Toolbar: add aria-pressed to toolbar buttons (#3615)

slab · Aug 7, 2023 · 7810032 · 7810032
1 parent 601e287
commit 7810032
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 17 deletions.
diff --git a/modules/toolbar.ts b/modules/toolbar.ts
@@ -164,6 +164,7 @@ class Toolbar extends Module<ToolbarProps> {
         }
       } else if (range == null) {
         input.classList.remove('ql-active');
+        input.setAttribute('aria-pressed', 'false');
       } else if (input.hasAttribute('value')) {
         // both being null should match (default values)
         // '1' should match with 1 (headers)
@@ -173,8 +174,11 @@ class Toolbar extends Module<ToolbarProps> {
             formats[format].toString() === input.getAttribute('value')) ||
           (formats[format] == null && !input.getAttribute('value'));
         input.classList.toggle('ql-active', isActive);
+        input.setAttribute('aria-pressed', isActive.toString());
       } else {
-        input.classList.toggle('ql-active', formats[format] != null);
+        const isActive = formats[format] != null;
+        input.classList.toggle('ql-active', isActive);
+        input.setAttribute('aria-pressed', isActive.toString());
       }
     });
   }
@@ -185,6 +189,7 @@ function addButton(container: HTMLElement, format: string, value?: unknown) {
   const input = document.createElement('button');
   input.setAttribute('type', 'button');
   input.classList.add(`ql-${format}`);
+  input.setAttribute('aria-pressed', 'false');
   if (value != null) {
     // @ts-expect-error
     input.value = value;

diff --git a/test/unit/modules/toolbar.spec.ts b/test/unit/modules/toolbar.spec.ts
@@ -28,8 +28,8 @@ describe('Toolbar', () => {
       addControls(container, ['bold', 'italic']);
       expect(container).toEqualHTML(`
         <span class="ql-formats">
-          <button type="button" class="ql-bold"></button>
-          <button type="button" class="ql-italic"></button>
+          <button type="button" class="ql-bold" aria-pressed="false"></button>
+          <button type="button" class="ql-italic" aria-pressed="false"></button>
         </span>
       `);
     });
@@ -42,12 +42,12 @@ describe('Toolbar', () => {
       ]);
       expect(container).toEqualHTML(`
         <span class="ql-formats">
-          <button type="button" class="ql-bold"></button>
-          <button type="button" class="ql-italic"></button>
+          <button type="button" class="ql-bold" aria-pressed="false"></button>
+          <button type="button" class="ql-italic" aria-pressed="false"></button>
         </span>
         <span class="ql-formats">
-          <button type="button" class="ql-underline"></button>
-          <button type="button" class="ql-strike"></button>
+          <button type="button" class="ql-underline" aria-pressed="false"></button>
+          <button type="button" class="ql-strike" aria-pressed="false"></button>
         </span>
       `);
     });
@@ -57,8 +57,8 @@ describe('Toolbar', () => {
       addControls(container, ['bold', { header: '2' }]);
       expect(container).toEqualHTML(`
         <span class="ql-formats">
-          <button type="button" class="ql-bold"></button>
-          <button type="button" class="ql-header" value="2"></button>
+          <button type="button" class="ql-bold" aria-pressed="false"></button>
+          <button type="button" class="ql-header" aria-pressed="false" value="2"></button>
         </span>
       `);
     });
@@ -108,14 +108,14 @@ describe('Toolbar', () => {
           </select>
         </span>
         <span class="ql-formats">
-          <button type="button" class="ql-bold"></button>
-          <button type="button" class="ql-italic"></button>
-          <button type="button" class="ql-underline"></button>
-          <button type="button" class="ql-strike"></button>
+          <button type="button" class="ql-bold" aria-pressed="false"></button>
+          <button type="button" class="ql-italic" aria-pressed="false"></button>
+          <button type="button" class="ql-underline" aria-pressed="false"></button>
+          <button type="button" class="ql-strike" aria-pressed="false"></button>
         </span>
         <span class="ql-formats">
-          <button type="button" class="ql-list" value="ordered"></button>
-          <button type="button" class="ql-list" value="bullet"></button>
+          <button type="button" class="ql-list" value="ordered" aria-pressed="false"></button>
+          <button type="button" class="ql-list" value="bullet" aria-pressed="false"></button>
           <select class="ql-align">
             <option selected="selected"></option>
             <option value="center"></option>
@@ -124,8 +124,8 @@ describe('Toolbar', () => {
           </select>
         </span>
         <span class="ql-formats">
-          <button type="button" class="ql-link"></button>
-          <button type="button" class="ql-image"></button>
+          <button type="button" class="ql-link" aria-pressed="false"></button>
+          <button type="button" class="ql-image" aria-pressed="false"></button>
         </span>
       `);
     });
@@ -176,8 +176,10 @@ describe('Toolbar', () => {
       ) as HTMLButtonElement;
       quill.setSelection(7);
       expect(boldButton.classList.contains('ql-active')).toBe(true);
+      expect(boldButton.attributes['aria-pressed'].value).toBe('true');
       quill.setSelection(2);
       expect(boldButton.classList.contains('ql-active')).toBe(false);
+      expect(boldButton.attributes['aria-pressed'].value).toBe('false');
     });
 
     test('link', () => {
@@ -187,8 +189,10 @@ describe('Toolbar', () => {
       ) as HTMLButtonElement;
       quill.setSelection(12);
       expect(linkButton.classList.contains('ql-active')).toBe(true);
+      expect(linkButton.attributes['aria-pressed'].value).toBe('true');
       quill.setSelection(2);
       expect(linkButton.classList.contains('ql-active')).toBe(false);
+      expect(linkButton.attributes['aria-pressed'].value).toBe('false');
     });
 
     test('dropdown', () => {
@@ -217,12 +221,18 @@ describe('Toolbar', () => {
       quill.setSelection(17);
       expect(centerButton.classList.contains('ql-active')).toBe(true);
       expect(leftButton.classList.contains('ql-active')).toBe(false);
+      expect(centerButton.attributes['aria-pressed'].value).toBe('true');
+      expect(leftButton.attributes['aria-pressed'].value).toBe('false');
       quill.setSelection(2);
       expect(centerButton.classList.contains('ql-active')).toBe(false);
       expect(leftButton.classList.contains('ql-active')).toBe(true);
+      expect(centerButton.attributes['aria-pressed'].value).toBe('false');
+      expect(leftButton.attributes['aria-pressed'].value).toBe('true');
       quill.blur();
       expect(centerButton.classList.contains('ql-active')).toBe(false);
       expect(leftButton.classList.contains('ql-active')).toBe(false);
+      expect(centerButton.attributes['aria-pressed'].value).toBe('false');
+      expect(leftButton.attributes['aria-pressed'].value).toBe('false');
     });
   });
 });