refactor!: remove native button from drawer toggle (#2413)

vaadin · Aug 30, 2021 · 8b2d339 · 8b2d339
1 parent 64cc823
commit 8b2d339
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 25 deletions.
diff --git a/packages/vaadin-app-layout/src/vaadin-drawer-toggle.js b/packages/vaadin-app-layout/src/vaadin-drawer-toggle.js
@@ -14,6 +14,8 @@ import { Button } from '@vaadin/button/src/vaadin-button.js';
  *   <vaadin-drawer-toggle slot="navbar">Toggle drawer</vaadin-drawer-toggle>
  * </vaadin-app-layout>
  * ```
+ *
+ * @extends Button
  */
 class DrawerToggleElement extends Button {
   static get template() {
@@ -31,16 +33,6 @@ class DrawerToggleElement extends Button {
           padding: 4px;
         }
 
-        #button {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          opacity: 0;
-          cursor: inherit;
-        }
-
         [part='icon'],
         [part='icon']::after,
         [part='icon']::before {
@@ -67,7 +59,6 @@ class DrawerToggleElement extends Button {
       <slot>
         <div part="icon"></div>
       </slot>
-      <button id="button" type="button" aria-label$="[[ariaLabel]]"></button>
     `;
   }
 
@@ -79,7 +70,8 @@ class DrawerToggleElement extends Button {
     return {
       ariaLabel: {
         type: String,
-        value: 'Toggle'
+        value: 'Toggle',
+        reflectToAttribute: true
       }
     };
   }
@@ -89,18 +81,19 @@ class DrawerToggleElement extends Button {
 
     this.addEventListener('click', () => {
       if (!this.disabled) {
-        this._fireClick();
+        this.__fireClick();
       }
     });
 
     this.addEventListener('keyup', (event) => {
       if (/^( |SpaceBar|Enter)$/.test(event.key) && !this.disabled) {
-        this._fireClick();
+        this.__fireClick();
       }
     });
   }
 
-  _fireClick() {
+  /** @private */
+  __fireClick() {
     this.dispatchEvent(new CustomEvent('drawer-toggle-click', { bubbles: true, composed: true }));
   }
 }

diff --git a/packages/vaadin-app-layout/test/drawer-toggle.test.js b/packages/vaadin-app-layout/test/drawer-toggle.test.js
@@ -79,18 +79,13 @@ describe('drawer-toggle', () => {
   });
 
   describe('aria-label', () => {
-    it('should have ariaLabel property set to "Toggle"', () => {
-      expect(toggle.ariaLabel).to.equal('Toggle');
+    it('should set aria-label attribute to "Toggle" by default', () => {
+      expect(toggle.getAttribute('aria-label')).to.equal('Toggle');
     });
 
-    it('should sync ariaLabel property with aria-label attribute', () => {
-      toggle.setAttribute('aria-label', 'Label');
-      expect(toggle.ariaLabel).to.equal('Label');
-    });
-
-    it('should set "aria-label" on the native button', () => {
-      const button = toggle.shadowRoot.querySelector('button');
-      expect(button.getAttribute('aria-label')).to.equal('Toggle');
+    it('should reflect ariaLabel property to the attribute', () => {
+      toggle.ariaLabel = 'Label';
+      expect(toggle.getAttribute('aria-label')).to.equal('Label');
     });
   });
 });