diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index 0c2ac778c1..3461db96c3 100644 --- a/services/web/frontend/extracted-translations.json +++ b/services/web/frontend/extracted-translations.json @@ -974,6 +974,7 @@ "select_an_output_file": "", "select_an_output_file_figure_modal": "", "select_cells_in_a_single_row_to_merge": "", + "select_color": "", "select_folder_from_project": "", "select_from_output_files": "", "select_from_project_files": "", diff --git a/services/web/frontend/js/features/project-list/components/color-picker/color-picker.tsx b/services/web/frontend/js/features/project-list/components/color-picker/color-picker.tsx index 7f89e36766..1dda7317d4 100644 --- a/services/web/frontend/js/features/project-list/components/color-picker/color-picker.tsx +++ b/services/web/frontend/js/features/project-list/components/color-picker/color-picker.tsx @@ -23,16 +23,30 @@ type ColorPickerItemProps = { function ColorPickerItem({ color }: ColorPickerItemProps) { const { selectColor, selectedColor, pickingCustomColor } = useSelectColor() + const { t } = useTranslation() + const labelId = `color-picker-item-label-${color.replace('#', '')}` + + function handleKeyDown(event: React.KeyboardEvent) { + if (event.key === 'Enter' || event.key === ' ') { + selectColor(color) + } + } return ( /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, jsx-a11y/interactive-supports-focus */
selectColor(color)} role="button" style={{ backgroundColor: color }} - onClick={() => selectColor(color)} + tabIndex={0} + onKeyDown={handleKeyDown} > + + {t('select_color', { color })} + {!pickingCustomColor && color === selectedColor && ( )} @@ -41,7 +55,6 @@ function ColorPickerItem({ color }: ColorPickerItemProps) { } function MoreButton() { - const { t } = useTranslation() const { selectedColor, selectColor, @@ -51,6 +64,7 @@ function MoreButton() { setPickingCustomColor, } = useSelectColor() const [localColor, setLocalColor] = useState() + const { t } = useTranslation() useEffect(() => { setLocalColor(selectedColor) @@ -59,6 +73,12 @@ function MoreButton() { const isCustomColorSelected = localColor && !PRESET_COLORS.includes(localColor) + function handleKeyDown(event: React.KeyboardEvent) { + if (event.key === 'Enter' || event.key === ' ') { + showCustomPicker ? closeCustomPicker() : openCustomPicker() + } + } + return (
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, @@ -72,6 +92,8 @@ function MoreButton() { ? localColor || selectedColor : 'white', }} + tabIndex={0} + onKeyDown={handleKeyDown} >
+ setTagName(e.target.value)} + ref={autoFocusedRef} + required + type="text" />