github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-12-01 14:10:02 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #16106 from overleaf/rd-color-hex

Browse source 
[web] Accessibility - set color names for tags

GitOrigin-RevId: 2f1d75955320030d9b6f34806abffe8a70c9e29e
This commit is contained in:
Rebeka Dekany 2023-12-05 14:01:13 +01:00 committed by Copybot
parent 94b9d1fa48
commit 821f5f0822
3 changed files with 20 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
services/web/frontend/extracted-translations.json
View file

@ -1086,6 +1086,7 @@
"session_error": "", "session_error": "",
"session_expired_redirecting_to_login": "", "session_expired_redirecting_to_login": "",
"sessions": "", "sessions": "",
"set_color": "",
"settings": "", "settings": "",
"setup_another_account_under_a_personal_email_address": "", "setup_another_account_under_a_personal_email_address": "",
"share": "", "share": "",

36
services/web/frontend/js/features/project-list/components/color-picker/color-picker.tsx
View file

@ -5,26 +5,26 @@ import { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import Tooltip from '../../../../shared/components/tooltip' import Tooltip from '../../../../shared/components/tooltip'
const PRESET_COLORS: ReadonlyArray<string> = [ const PRESET_COLORS: ReadonlyArray<{ color: string; name: string }> = [
'#A7B1C2', { color: '#A7B1C2', name: 'Grey' },
'#F04343', { color: '#F04343', name: 'Red' },
'#DD8A3E', { color: '#DD8A3E', name: 'Orange' },
'#E4CA3E', { color: '#E4CA3E', name: 'Yellow' },
'#33CF67', { color: '#33CF67', name: 'Green' },
'#43A7F0', { color: '#43A7F0', name: 'Light blue' },
'#434AF0', { color: '#434AF0', name: 'Dark blue' },
'#B943F0', { color: '#B943F0', name: 'Purple' },
'#FF4BCD', { color: '#FF4BCD', name: 'Pink' },
] ]
type ColorPickerItemProps = { type ColorPickerItemProps = {
color: string color: string
name: string
} }
function ColorPickerItem({ color }: ColorPickerItemProps) { function ColorPickerItem({ color, name }: ColorPickerItemProps) {
const { selectColor, selectedColor, pickingCustomColor } = useSelectColor() const { selectColor, selectedColor, pickingCustomColor } = useSelectColor()
const { t } = useTranslation() const { t } = useTranslation()
const labelId = `color-picker-item-label-${color.replace('#', '')}`
function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) { function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
if (event.key === 'Enter' || event.key === ' ') { if (event.key === 'Enter' || event.key === ' ') {
@ -36,7 +36,7 @@ function ColorPickerItem({ color }: ColorPickerItemProps) {
/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,
jsx-a11y/no-static-element-interactions, jsx-a11y/interactive-supports-focus */ jsx-a11y/no-static-element-interactions, jsx-a11y/interactive-supports-focus */
<div <div
aria-labelledby={labelId} aria-label={`${name}, ${t('set_color')}`}
className="color-picker-item" className="color-picker-item"
onClick={() => selectColor(color)} onClick={() => selectColor(color)}
role="button" role="button"
@ -44,7 +44,7 @@ function ColorPickerItem({ color }: ColorPickerItemProps) {
tabIndex={0} tabIndex={0}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
> >
<span id={labelId} className="sr-only"> <span id={name} className="sr-only">
{t('select_color', { color })} {t('select_color', { color })}
</span> </span>
{!pickingCustomColor && color === selectedColor && ( {!pickingCustomColor && color === selectedColor && (
@ -71,7 +71,7 @@ function MoreButton() {
}, [selectedColor]) }, [selectedColor])
const isCustomColorSelected = const isCustomColorSelected =
localColor && !PRESET_COLORS.includes(localColor) localColor && !PRESET_COLORS.some(colorObj => colorObj.color === localColor)
function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) { function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
if (event.key === 'Enter' || event.key === ' ') { if (event.key === 'Enter' || event.key === ' ') {
@ -148,15 +148,15 @@ export function ColorPicker({
useEffect(() => { useEffect(() => {
if (!selectedColor) { if (!selectedColor) {
selectColor( selectColor(
PRESET_COLORS[Math.floor(Math.random() * PRESET_COLORS.length)] PRESET_COLORS[Math.floor(Math.random() * PRESET_COLORS.length)].color
) )
} }
}, [selectColor, selectedColor]) }, [selectColor, selectedColor])
return ( return (
<> <>
{PRESET_COLORS.map(hexColor => ( {PRESET_COLORS.map(({ color, name }) => (
<ColorPickerItem color={hexColor} key={hexColor} /> <ColorPickerItem color={color} name={name} key={color} />
))} ))}
{!disableCustomColor && <MoreButton />} {!disableCustomColor && <MoreButton />}
</> </>

1
services/web/locales/en.json
View file

@ -1622,6 +1622,7 @@
"session_error": "Session error. Please check you have cookies enabled. If the problem persists, try clearing your cache and cookies.", "session_error": "Session error. Please check you have cookies enabled. If the problem persists, try clearing your cache and cookies.",
"session_expired_redirecting_to_login": "Session Expired. Redirecting to login page in __seconds__ seconds", "session_expired_redirecting_to_login": "Session Expired. Redirecting to login page in __seconds__ seconds",
"sessions": "Sessions", "sessions": "Sessions",
"set_color": "set color",
"set_new_password": "Set new password", "set_new_password": "Set new password",
"set_password": "Set Password", "set_password": "Set Password",
"settings": "Settings", "settings": "Settings",