Add aria labels to toolbar

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

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/modules/toolbar.ts b/modules/toolbar.ts
@@ -192,14 +192,15 @@ class Toolbar extends Module<ToolbarProps> {
 }
 Toolbar.DEFAULTS = {};
 
-function addButton(container: HTMLElement, format: string, value?: unknown) {
+function addButton(container: HTMLElement, format: string, value?: string) {
   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);
 }
@@ -215,6 +216,7 @@ function addControls(
     groups = [groups];
   }
   groups.forEach((controls: any) => {
+    console.log({ controls });
     const group = document.createElement('span');
     group.classList.add('ql-formats');
     controls.forEach((control: any) => {

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);
         }

diff --git a/ui/picker.ts b/ui/picker.ts
@@ -54,12 +54,13 @@ class Picker {
     item.tabIndex = '0';
     item.setAttribute('role', 'button');
     item.classList.add('ql-picker-item');
-    if (option.hasAttribute('value')) {
-      // @ts-expect-error Fix me later
-      item.setAttribute('data-value', option.getAttribute('value'));
+    const value = option.getAttribute('value');
+    if (value) {
+      item.setAttribute('data-value', value);
     }
     if (option.textContent) {
       item.setAttribute('data-label', option.textContent);
+      item.setAttribute('aria-label', option.textContent);
     }
     item.addEventListener('click', () => {
       this.selectItem(item, true);