Toolbar: add aria-pressed to toolbar buttons

slab · Jul 27, 2022 · 80f4b32 · 80f4b32
1 parent 541bd36
commit 80f4b32
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 17 deletions.
diff --git a/modules/toolbar.js b/modules/toolbar.js
@@ -133,6 +133,7 @@ class Toolbar extends Module {
         }
       } 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)
@@ -142,8 +143,11 @@ class Toolbar extends Module {
             formats[format].toString() === input.getAttribute('value')) ||
           (formats[format] == null && !input.getAttribute('value'));
         input.classList.toggle('ql-active', isActive);
+        input.setAttribute('aria-pressed', isActive);
       } 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);
       }
     });
   }
@@ -154,6 +158,7 @@ function addButton(container, format, value) {
   const input = document.createElement('button');
   input.setAttribute('type', 'button');
   input.classList.add(`ql-${format}`);
+  input.setAttribute('aria-pressed', 'false');
   if (value != null) {
     input.value = value;
   }

diff --git a/test/unit/modules/toolbar.js b/test/unit/modules/toolbar.js
@@ -7,8 +7,8 @@ describe('Toolbar', function() {
       addControls(this.container, ['bold', 'italic']);
       expect(this.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>
       `);
     });
@@ -20,12 +20,12 @@ describe('Toolbar', function() {
       ]);
       expect(this.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>
       `);
     });
@@ -34,8 +34,8 @@ describe('Toolbar', function() {
       addControls(this.container, ['bold', { header: '2' }]);
       expect(this.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>
       `);
     });
@@ -83,14 +83,14 @@ describe('Toolbar', function() {
           </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>
@@ -99,8 +99,8 @@ describe('Toolbar', function() {
           </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>
       `);
     });
@@ -136,8 +136,10 @@ describe('Toolbar', function() {
       );
       this.quill.setSelection(7);
       expect(boldButton.classList.contains('ql-active')).toBe(true);
+      expect(boldButton.attributes['aria-pressed'].value).toBe('true');
       this.quill.setSelection(2);
       expect(boldButton.classList.contains('ql-active')).toBe(false);
+      expect(boldButton.attributes['aria-pressed'].value).toBe('false');
     });
 
     it('link', function() {
@@ -146,8 +148,10 @@ describe('Toolbar', function() {
       );
       this.quill.setSelection(12);
       expect(linkButton.classList.contains('ql-active')).toBe(true);
+      expect(linkButton.attributes['aria-pressed'].value).toBe('true');
       this.quill.setSelection(2);
       expect(linkButton.classList.contains('ql-active')).toBe(false);
+      expect(linkButton.attributes['aria-pressed'].value).toBe('false');
     });
 
     it('dropdown', function() {
@@ -174,12 +178,18 @@ describe('Toolbar', function() {
       this.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');
       this.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');
       this.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');
     });
   });
 });