feat: Make color ARIA labels better (#3871)

* Make color aria labels better

* Use isTransparent helper

* Fix import

* Try to fix test

* More test fixes

* Reuse variable

src/components/ColorPicker.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Popover } from "./Popover";
+import { isTransparent } from "../utils";
 
 import "./ColorPicker.scss";
 import { isArrowKey, KEYS } from "../keys";
@@ -14,7 +15,7 @@ const isValidColor = (color: string) => {
 };
 
 const getColor = (color: string): string | null => {
-  if (color === "transparent") {
+  if (isTransparent(color)) {
     return color;
   }
 
@@ -137,36 +138,41 @@ const Picker = ({
         }}
         tabIndex={0}
       >
-        {colors.map((_color, i) => (
-          <button
-            className="color-picker-swatch"
-            onClick={(event) => {
-              (event.currentTarget as HTMLButtonElement).focus();
-              onChange(_color);
-            }}
-            title={`${_color} — ${keyBindings[i].toUpperCase()}`}
-            aria-label={_color}
-            aria-keyshortcuts={keyBindings[i]}
-            style={{ color: _color }}
-            key={_color}
-            ref={(el) => {
-              if (el && i === 0) {
-                firstItem.current = el;
-              }
-              if (el && _color === color) {
-                activeItem.current = el;
-              }
-            }}
-            onFocus={() => {
-              onChange(_color);
-            }}
-          >
-            {_color === "transparent" ? (
-              <div className="color-picker-transparent"></div>
-            ) : undefined}
-            <span className="color-picker-keybinding">{keyBindings[i]}</span>
-          </button>
-        ))}
+        {colors.map((_color, i) => {
+          const _colorWithoutHash = _color.replace("#", "");
+          return (
+            <button
+              className="color-picker-swatch"
+              onClick={(event) => {
+                (event.currentTarget as HTMLButtonElement).focus();
+                onChange(_color);
+              }}
+              title={`${t(`colors.${_colorWithoutHash}`)}${
+                !isTransparent(_color) ? ` (${_color})` : ""
+              } — ${keyBindings[i].toUpperCase()}`}
+              aria-label={t(`colors.${_colorWithoutHash}`)}
+              aria-keyshortcuts={keyBindings[i]}
+              style={{ color: _color }}
+              key={_color}
+              ref={(el) => {
+                if (el && i === 0) {
+                  firstItem.current = el;
+                }
+                if (el && _color === color) {
+                  activeItem.current = el;
+                }
+              }}
+              onFocus={() => {
+                onChange(_color);
+              }}
+            >
+              {isTransparent(_color) ? (
+                <div className="color-picker-transparent"></div>
+              ) : undefined}
+              <span className="color-picker-keybinding">{keyBindings[i]}</span>
+            </button>
+          );
+        })}
         {showInput && (
           <ColorInput
             color={color}

src/locales/en.json

@@ -282,5 +282,52 @@
     "fileSavedToFilename": "Saved to {filename}",
     "canvas": "canvas",
     "selection": "selection"
+  },
+  "colors": {
+    "ffffff": "White",
+    "f8f9fa": "Gray 0",
+    "f1f3f5": "Gray 1",
+    "fff5f5": "Red 0",
+    "fff0f6": "Pink 0",
+    "f8f0fc": "Grape 0",
+    "f3f0ff": "Violet 0",
+    "edf2ff": "Indigo 0",
+    "e7f5ff": "Blue 0",
+    "e3fafc": "Cyan 0",
+    "e6fcf5": "Teal 0",
+    "ebfbee": "Green 0",
+    "f4fce3": "Lime 0",
+    "fff9db": "Yellow 0",
+    "fff4e6": "Orange 0",
+    "transparent": "Transparent",
+    "ced4da": "Gray 4",
+    "868e96": "Gray 6",
+    "fa5252": "Red 6",
+    "e64980": "Pink 6",
+    "be4bdb": "Grape 6",
+    "7950f2": "Violet 6",
+    "4c6ef5": "Indigo 6",
+    "228be6": "Blue 6",
+    "15aabf": "Cyan 6",
+    "12b886": "Teal 6",
+    "40c057": "Green 6",
+    "82c91e": "Lime 6",
+    "fab005": "Yellow 6",
+    "fd7e14": "Orange 6",
+    "000000": "Black",
+    "343a40": "Gray 8",
+    "495057": "Gray 7",
+    "c92a2a": "Red 9",
+    "a61e4d": "Pink 9",
+    "862e9c": "Grape 9",
+    "5f3dc4": "Violet 9",
+    "364fc7": "Indigo 9",
+    "1864ab": "Blue 9",
+    "0b7285": "Cyan 9",
+    "087f5b": "Teal 9",
+    "2b8a3e": "Green 9",
+    "5c940d": "Lime 9",
+    "e67700": "Yellow 9",
+    "d9480f": "Orange 9"
   }
 }

src/tests/contextmenu.test.tsx

@@ -19,6 +19,7 @@ import { ShortcutName } from "../actions/shortcuts";
 import { copiedStyles } from "../actions/actionStyles";
 import { API } from "./helpers/api";
 import { setDateTimeForTests } from "../utils";
+import { t } from "../i18n";
 
 const checkpoint = (name: string) => {
   expect(renderScene.mock.calls.length).toMatchSnapshot(
@@ -314,9 +315,9 @@ describe("contextMenu element", () => {
 
     // Change some styles of second rectangle
     clickLabeledElement("Stroke");
-    clickLabeledElement("#c92a2a");
+    clickLabeledElement(t("colors.c92a2a"));
     clickLabeledElement("Background");
-    clickLabeledElement("#e64980");
+    clickLabeledElement(t("colors.e64980"));
     // Fill style
     fireEvent.click(screen.getByTitle("Cross-hatch"));
     // Stroke width

src/tests/regressionTests.test.tsx

@@ -16,6 +16,7 @@ import {
 } from "./test-utils";
 import { defaultLang } from "../i18n";
 import { FONT_FAMILY } from "../constants";
+import { t } from "../i18n";
 
 const { h } = window;
 
@@ -168,9 +169,9 @@ describe("regression tests", () => {
     mouse.up(10, 10);
 
     clickLabeledElement("Background");
-    clickLabeledElement("#fa5252");
+    clickLabeledElement(t("colors.fa5252"));
     clickLabeledElement("Stroke");
-    clickLabeledElement("#5f3dc4");
+    clickLabeledElement(t("colors.5f3dc4"));
     expect(API.getSelectedElement().backgroundColor).toBe("#fa5252");
     expect(API.getSelectedElement().strokeColor).toBe("#5f3dc4");
   });
@@ -939,7 +940,7 @@ describe("regression tests", () => {
       // change background color since default is transparent
       // and transparent elements can't be selected by clicking inside of them
       clickLabeledElement("Background");
-      clickLabeledElement("#fa5252");
+      clickLabeledElement(t("colors.fa5252"));
       mouse.down();
       mouse.up(1000, 1000);
 
@@ -1046,7 +1047,7 @@ describe("regression tests", () => {
     expect(screen.queryByText(/fill/i)).toBeNull();
 
     clickLabeledElement("Background");
-    clickLabeledElement("#fa5252");
+    clickLabeledElement(t("colors.fa5252"));
     // select rectangle
     mouse.reset();
     mouse.click();