Add aria labels to toolbar

slab · Aug 25, 2023 · c1988a6 · c1988a6
1 parent 3ed59c3
commit c1988a6
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 0 deletions.
diff --git a/modules/toolbar.ts b/modules/toolbar.ts
@@ -83,6 +83,18 @@ class Toolbar extends Module<ToolbarProps> {
     format = format.slice('ql-'.length);
     if (input.tagName === 'BUTTON') {
       input.setAttribute('type', 'button');
+      input.setAttribute('aria-label', format);
+      if (input.value) {
+        input.setAttribute('aria-label', `${format} ${input.value}`);
+      }
+      if (format === 'direction') {
+        input.setAttribute(
+          'aria-label',
+          `Text ${format} ${
+            input.value === 'rtl' ? 'right to left' : 'left to right'
+          }`,
+        );
+      }
     }
     if (
       this.handlers[format] == null &&
@@ -195,11 +207,13 @@ Toolbar.DEFAULTS = {};
 function addButton(container: HTMLElement, format: string, value?: unknown) {
   const input = document.createElement('button');
   input.setAttribute('type', 'button');
+  input.setAttribute('aria-label', format);
   input.classList.add(`ql-${format}`);
   input.setAttribute('aria-pressed', 'false');
   if (value != null) {
     // @ts-expect-error
     input.value = value;
+    input.setAttribute('aria-label', `${value} ${format}`);
   }
   container.appendChild(input);
 }

diff --git a/themes/base.ts b/themes/base.ts
@@ -140,6 +140,7 @@ class BaseTheme extends Theme {
   ) {
     this.pickers = Array.from(selects).map((select) => {
       if (select.classList.contains('ql-align')) {
+        select.setAttribute('aria-label', 'Align text');
         if (select.querySelector('option') == null) {
           fillSelect(select, ALIGNS);
         }
@@ -151,6 +152,12 @@ class BaseTheme extends Theme {
         select.classList.contains('ql-background') ||
         select.classList.contains('ql-color')
       ) {
+        if (select.classList.contains('ql-background')) {
+          select.setAttribute('aria-label', 'Background color');
+        }
+        if (select.classList.contains('ql-color')) {
+          select.setAttribute('aria-label', 'Text color');
+        }
         const format = select.classList.contains('ql-background')
           ? 'background'
           : 'color';
@@ -165,10 +172,12 @@ class BaseTheme extends Theme {
       }
       if (select.querySelector('option') == null) {
         if (select.classList.contains('ql-font')) {
+          select.setAttribute('aria-label', 'Select a Font');
           fillSelect(select, FONTS);
         } else if (select.classList.contains('ql-header')) {
           fillSelect(select, HEADERS);
         } else if (select.classList.contains('ql-size')) {
+          select.setAttribute('aria-label', 'Select a font size');
           fillSelect(select, SIZES);
         }
       }

diff --git a/ui/picker.ts b/ui/picker.ts
@@ -57,6 +57,10 @@ class Picker {
     if (option.hasAttribute('value')) {
       // @ts-expect-error Fix me later
       item.setAttribute('data-value', option.getAttribute('value'));
+      item.setAttribute(
+        'aria-label',
+        this.getAriaLabel(option.getAttribute('value')),
+      );
     }
     if (option.textContent) {
       item.setAttribute('data-label', option.textContent);
@@ -81,6 +85,90 @@ class Picker {
     return item;
   }
 
+  getAriaLabel(value) {
+    if (value.startsWith('#')) {
+      return this.convertHexCodeToHumanReadableString(value);
+    }
+    return value;
+  }
+
+  convertHexCodeToHumanReadableString(value) {
+    switch (value) {
+      case '#e60000':
+        return 'Electric red';
+      case '#ff9900':
+        return 'Light orange';
+      case '#ffff00':
+        return 'Yellow';
+      case '#008a00':
+        return 'Green';
+      case '#0066cc':
+        return 'Navy blue';
+      case '#9933ff':
+        return 'Blue violet';
+      case '#ffffff':
+        return 'White';
+      case '#facccc':
+        return 'Light pink';
+      case '#ffebcc':
+        return 'Light yellow';
+      case '#ffffcc':
+        return 'Cream';
+      case '#cce8cc':
+        return 'Light sage';
+      case '#cce0f5':
+        return 'Light blue';
+      case '#ebd6ff':
+        return 'Light purple';
+      case '#bbbbbb':
+        return 'Silver';
+      case '#f06666':
+        return 'Salmon';
+      case '#ffc266':
+        return 'Light orange';
+      case '#ffff66':
+        return 'Lemon';
+      case '#66b966':
+        return 'Fern';
+      case '#66a3e0':
+        return 'Cornflower blue';
+      case '#c285ff':
+        return 'Purple';
+      case '#888888':
+        return 'Gray';
+      case '#a10000':
+        return 'Dark red';
+      case '#b26b00':
+        return 'Orange-brown';
+      case '#b2b200':
+        return 'Chartreuse';
+      case '#006100':
+        return 'Forest green';
+      case '#0047b2':
+        return 'Cobalt blue';
+      case '#6b24b2':
+        return 'Deep purple';
+      case '#444444':
+        return 'Dark gray';
+      case '#5c0000':
+        return 'Dark purple';
+      case '#663d00':
+        return 'Nutmeg brown';
+      case '#666600':
+        return 'Dark yellow-green';
+      case '#003700':
+        return 'Deep fir green';
+      case '#002966':
+        return 'Midnight blue';
+      case '#3d1466':
+        return 'Deepest purple';
+      case '#000000':
+        return 'Black';
+      default:
+        return '';
+    }
+  }
+
   buildLabel() {
     const label = document.createElement('span');
     label.classList.add('ql-picker-label');