From 6d00ee64e1178ff03670fbee24164d354b0bec2d Mon Sep 17 00:00:00 2001
From: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com>
Date: Mon, 18 Dec 2023 13:16:13 +0100
Subject: [PATCH] [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
---
 .../project-list/components/color-picker/color-picker.tsx     | 2 +-
 services/web/frontend/stylesheets/app/project-list-react.less | 4 ++++
 services/web/locales/en.json                                  | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)

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 4b6716568d..4160e2fece 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
@@ -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" />
diff --git a/services/web/frontend/stylesheets/app/project-list-react.less b/services/web/frontend/stylesheets/app/project-list-react.less
index a7493173b1..73ff12b72e 100644
--- a/services/web/frontend/stylesheets/app/project-list-react.less
+++ b/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;
 
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index a884c793f3..22ba22259e 100644
--- a/services/web/locales/en.json
+++ b/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",