[web] Add custom focus style for the color picker on Firefox and Safari (#16192)

* Add custom focus style for color pickers on Firefox and Safari

* Use the color name instead of the HEX code

* Apply consistent styling similar to other elements

GitOrigin-RevId: 68dc802df7da6863a0de1c89358002f4f281453b

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

@@ -45,7 +45,7 @@ function ColorPickerItem({ color, name }: ColorPickerItemProps) {
       onKeyDown={handleKeyDown}
     >
       <span id={name} className="sr-only">
-        {t('select_color', { color })}
+        {t('select_color', { name })}
       </span>
       {!pickingCustomColor && color === selectedColor && (
         <Icon type="check" className="color-picker-item-icon" />

services/web/frontend/stylesheets/app/project-list-react.less

@@ -918,6 +918,10 @@
   display: inline-block;
   vertical-align: middle;
 
+  &:focus-visible {
+    box-shadow: 0 0 0 2px @white, 0 0 0 3px @blue-50, 0 0 0 5px @blue-30;
+  }
+
   &.more-button {
     border: 1px solid @gray-dark;
 

services/web/locales/en.json

@@ -1612,7 +1612,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_color": "Select color __name__",
   "select_folder_from_project": "Select folder from project",
   "select_from_output_files": "select from output files",
   "select_from_project_files": "select from project files",