A11Y: add screenreader markup for category color pickers (#29351)

app/assets/javascripts/admin/addon/components/color-input.hbs

@@ -3,10 +3,12 @@
   @maxlength={{this.maxlength}}
   @input={{this.onHexInput}}
   class="hex-input"
+  aria-labelledby={{this.ariaLabelledby}}
 />
 <input
   class="picker"
   type="color"
   value={{this.normalizedHexValue}}
   {{on "input" this.onPickerInput}}
+  aria-labelledby={{this.ariaLabelledby}}
 />

app/assets/javascripts/discourse/app/components/color-picker-choice.js

@@ -9,7 +9,7 @@ import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
 
 @tagName("button")
-@attributeBindings("style", "title")
+@attributeBindings("style", "title", "ariaLabel:aria-label")
 @classNameBindings(":colorpicker", "isUsed:used-color:unused-color")
 export default class ColorPickerChoice extends Component {
   @discourseComputed("color", "usedColors")

app/assets/javascripts/discourse/app/components/color-picker.hbs

@@ -3,6 +3,7 @@
     @color={{c}}
     @usedColors={{this.usedColors}}
     @selectColor={{action "selectColor"}}
+    @ariaLabel={{this.getColorLabel c}}
   >
     {{d-icon "check"}}
   </ColorPickerChoice>

app/assets/javascripts/discourse/app/components/color-picker.js

@@ -1,11 +1,23 @@
 import Component from "@ember/component";
 import { action } from "@ember/object";
-import { classNames } from "@ember-decorators/component";
+import { attributeBindings, classNames } from "@ember-decorators/component";
+import I18n from "discourse-i18n";
 
 @classNames("colors-container")
+@attributeBindings("role", "ariaLabel:aria-label")
 export default class ColorPicker extends Component {
+  role = "group";
+
   @action
   selectColor(color) {
     this.set("value", color);
   }
+
+  @action
+  getColorLabel(color) {
+    const isUsed = this.usedColors?.includes(color.toUpperCase())
+      ? I18n.t("category.color_used")
+      : "";
+    return `#${color} ${isUsed}`;
+  }
 }

app/assets/javascripts/discourse/app/components/edit-category-general.hbs

@@ -67,28 +67,38 @@
       {{html-safe this.categoryBadgePreview}}
 
       <section class="field">
-        <span class="color-title">{{i18n "category.background_color"}}:</span>
+        <span id="background-color-label" class="color-title">{{i18n
+            "category.background_color"
+          }}:</span>
         <div class="colorpicker-wrapper">
           <ColorInput
             @hexValue={{this.category.color}}
             @valid={{this.category.colorValid}}
+            @ariaLabelledby="background-color-label"
           />
           <ColorPicker
             @colors={{this.backgroundColors}}
             @usedColors={{this.usedBackgroundColors}}
             @value={{this.category.color}}
+            @ariaLabel={{i18n "category.predefined_colors"}}
           />
         </div>
       </section>
 
       <section class="field">
-        <span class="color-title">{{i18n "category.foreground_color"}}:</span>
+        <span id="foreground-color-label" class="color-title">{{i18n
+            "category.foreground_color"
+          }}:</span>
         <div class="colorpicker-wrapper edit-text-color">
-          <ColorInput @hexValue={{this.category.text_color}} />
+          <ColorInput
+            @hexValue={{this.category.text_color}}
+            @ariaLabelledby="foreground-color-label"
+          />
           <ColorPicker
             @colors={{this.foregroundColors}}
             @value={{this.category.text_color}}
             @id="edit-text-color"
+            @ariaLabel={{i18n "category.predefined_colors"}}
           />
         </div>
       </section>

config/locales/client.en.yml

@@ -4044,6 +4044,8 @@ en:
       badge_colors: "Badge colors"
       background_color: "Background color"
       foreground_color: "Foreground color"
+      color_used: "Color in use"
+      predefined_colors: "Predefined color options"
       name_placeholder: "One or two words maximum"
       color_placeholder: "Any web color"
       delete_confirm: "Are you sure you want to delete this category?"