[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
This commit is contained in:
Rebeka Dekany 2023-12-18 13:16:13 +01:00 committed by Copybot
parent 0ac38cb70f
commit b0028a2789
3 changed files with 6 additions and 2 deletions

View file

@ -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" />

View file

@ -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;

View file

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