fix: improve drawer toggle ARIA attributes (#3390)

vaadin · Feb 3, 2022 · 262e47c · 262e47c
1 parent 158f36a
commit 262e47c
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 4 deletions.
diff --git a/dev/app-layout.html b/dev/app-layout.html
@@ -8,7 +8,7 @@
     <script type="module" src="./lumo-globals.js"></script>
 
     <style>
-      h1 {
+      h1[slot='navbar'] {
         font-size: var(--lumo-font-size-l);
         margin: 0;
       }

diff --git a/packages/app-layout/src/vaadin-app-layout.js b/packages/app-layout/src/vaadin-app-layout.js
@@ -451,6 +451,7 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
   ready() {
     super.ready();
     this.addController(this.__focusTrapController);
+    this.__setAriaExpanded();
   }
 
   /** @protected */
@@ -509,6 +510,8 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
         this.__releaseFocusFromDrawer();
       }
     }
+
+    this.__setAriaExpanded();
   }
 
   /**
@@ -542,6 +545,14 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
     }
   }
 
+  /** @private */
+  __setAriaExpanded() {
+    const toggle = this.querySelector('vaadin-drawer-toggle');
+    if (toggle) {
+      toggle.setAttribute('aria-expanded', this.drawerOpened);
+    }
+  }
+
   /** @protected */
   _updateDrawerSize() {
     const childCount = this.querySelectorAll('[slot=drawer]').length;

diff --git a/packages/app-layout/src/vaadin-drawer-toggle.js b/packages/app-layout/src/vaadin-drawer-toggle.js
@@ -70,7 +70,7 @@ class DrawerToggle extends Button {
     return {
       ariaLabel: {
         type: String,
-        value: 'Toggle',
+        value: 'Toggle navigation panel',
         reflectToAttribute: true
       }
     };

diff --git a/packages/app-layout/test/app-layout.test.js b/packages/app-layout/test/app-layout.test.js
@@ -188,6 +188,19 @@ describe('vaadin-app-layout', () => {
         esc(drawer);
         expect(layout.drawerOpened).to.be.true;
       });
+
+      it('should set aria-expanded on the toggle to true by default', () => {
+        expect(toggle.getAttribute('aria-expanded')).to.equal('true');
+        layout.drawerOpened = true;
+        expect(getComputedStyle(drawer).visibility).to.equal('visible');
+      });
+
+      it('should update aria-expanded on drawerOpened property change', () => {
+        layout.drawerOpened = false;
+        expect(toggle.getAttribute('aria-expanded')).to.equal('false');
+        layout.drawerOpened = true;
+        expect(toggle.getAttribute('aria-expanded')).to.equal('true');
+      });
     });
 
     describe('mobile layout', () => {

diff --git a/packages/app-layout/test/drawer-toggle.test.js b/packages/app-layout/test/drawer-toggle.test.js
@@ -78,8 +78,8 @@ describe('drawer-toggle', () => {
   });
 
   describe('aria-label', () => {
-    it('should set aria-label attribute to "Toggle" by default', () => {
-      expect(toggle.getAttribute('aria-label')).to.equal('Toggle');
+    it('should set correct aria-label attribute by default', () => {
+      expect(toggle.getAttribute('aria-label')).to.equal('Toggle navigation panel');
     });
 
     it('should reflect ariaLabel property to the attribute', () => {