Merge pull request #14790 from overleaf/rd-report-form-tag-coloritems

Accessibility - make the color picker tag elements keyboard-accessible

GitOrigin-RevId: 2a12f7d450ece50a81a0d31a1903f07851ba72f4

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": "",

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<HTMLDivElement>) {
+    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 */
     <div
+      aria-labelledby={labelId}
       className="color-picker-item"
+      onClick={() => selectColor(color)}
       role="button"
       style={{ backgroundColor: color }}
-      onClick={() => selectColor(color)}
+      tabIndex={0}
+      onKeyDown={handleKeyDown}
     >
+      <span id={labelId} className="sr-only">
+        {t('select_color', { color })}
+      </span>
       {!pickingCustomColor && color === selectedColor && (
         <Icon type="check" className="color-picker-item-icon" />
       )}
@@ -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<string>()
+  const { t } = useTranslation()
 
   useEffect(() => {
     setLocalColor(selectedColor)
@@ -59,6 +73,12 @@ function MoreButton() {
   const isCustomColorSelected =
     localColor && !PRESET_COLORS.includes(localColor)
 
+  function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      showCustomPicker ? closeCustomPicker() : openCustomPicker()
+    }
+  }
+
   return (
     <div className="color-picker-more-wrapper" data-content="My Content">
       {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,
@@ -72,6 +92,8 @@ function MoreButton() {
             ? localColor || selectedColor
             : 'white',
         }}
+        tabIndex={0}
+        onKeyDown={handleKeyDown}
       >
         <Tooltip
           id="tooltip-color-picker-plus"

services/web/frontend/js/features/project-list/components/modals/create-tag-modal.tsx

@@ -77,14 +77,15 @@ export default function CreateTagModal({
       <Modal.Body>
         <Form name="createTagForm" onSubmit={handleSubmit}>
           <FormGroup>
+            <label htmlFor="new-tag-form-name">{t('new_tag_name')}</label>
             <input
-              ref={autoFocusedRef}
               className="form-control"
-              type="text"
-              placeholder={t('new_tag_name')}
+              id="new-tag-form-name"
               name="new-tag-form-name"
-              required
               onChange={e => setTagName(e.target.value)}
+              ref={autoFocusedRef}
+              required
+              type="text"
             />
           </FormGroup>
           <FormGroup aria-hidden="true">

services/web/locales/en.json

@@ -1532,6 +1532,7 @@
   "select_an_output_file": "Select an Output File",
   "select_an_output_file_figure_modal": "Select an output file",
   "select_cells_in_a_single_row_to_merge": "Select cells in a single row to merge",
+  "select_color": "Select color __color__",
   "select_folder_from_project": "Select folder from project",
   "select_from_output_files": "select from output files",
   "select_from_project_files": "select from project files",