fix(button): fix label when using [href]

clshortfuse · Jul 21, 2023 · d713e4a · d713e4a
1 parent 29eab67
commit d713e4a
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 8 deletions.
diff --git a/components/Button.js b/components/Button.js
@@ -9,6 +9,8 @@ import StateMixin from '../mixins/StateMixin.js';
 import SurfaceMixin from '../mixins/SurfaceMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
+/* https://m3.material.io/components/buttons/specs */
+
 export default CustomElement
   .extend()
   .mixin(ThemableMixin)
@@ -72,21 +74,19 @@ export default CustomElement
     <mdw-icon mdw-if={hasIcon} id=icon ink={iconInk} disabled={disabledState}
       outlined={outlined} aria-hidden=true svg={svg} src={src}
       svg-path={svgPath} view-box={viewBox} icon={icon}></mdw-icon>
-    <slot id=slot disabled={disabledState} aria-hidden=false>{value}</slot>
+    <slot id=slot disabled={disabledState} aria-hidden=true>{value}</slot>
   `
   .recompose(({ refs: { anchor, shape, state, rippleContainer, surface, control } }) => {
     surface.append(shape);
     shape.append(state, rippleContainer);
     shape.setAttribute('filled', '{filled}');
-    control.setAttribute('hidden', '{href}');
+    control.setAttribute('mdw-if', '{!href}');
     control.setAttribute('role', 'button');
     anchor.setAttribute('mdw-if', '{href}');
     anchor.setAttribute('aria-label', '{_computedAriaLabel}');
     anchor.setAttribute('aria-labelledby', '{_computedAriaLabelledby}');
   })
   .css`
-    /* https://m3.material.io/components/buttons/specs */
-
     :host {
       --mdw-shape__size: var(--mdw-shape__full);
       --mdw-ink: var(--mdw-color__primary);

diff --git a/components/IconButton.js b/components/IconButton.js
@@ -20,7 +20,7 @@ export default Button
     isToggle({ type }) {
       return type === 'checkbox';
     },
-    _computedAriaLabelledBy({ ariaLabel }) {
+    _computedAriaLabelledby({ ariaLabel }) {
       return ariaLabel ? null : 'tooltip';
     },
   })

diff --git a/mixins/ControlMixin.js b/mixins/ControlMixin.js
@@ -103,17 +103,17 @@ export default function ControlMixin(Base) {
         }
         return ariaLabel?.trim() || null;
       },
-      _computedAriaLabelledBy({ ariaLabel }) {
+      _computedAriaLabelledby({ ariaLabel }) {
         return ariaLabel ? null : 'slot';
       },
     })
 
     .recompose(({ template, html, element }) => {
       template.append(html`
         <${element.controlTagName} id=control
-          aria-labelledby={_computedAriaLabelledBy}
-          part=control
           aria-label={_computedAriaLabel}
+          aria-labelledby={_computedAriaLabelledby}
+          part=control
           form-disabled={disabledState}
           type={type}
           >${element.controlVoidElement ? '' : `</${element.controlTagName}>`}

diff --git a/test/spec/Button.test.js b/test/spec/Button.test.js
@@ -91,6 +91,22 @@ describe('mdw-button', () => {
       const [{ role }] = iterateMeaningfulAXNodes(results);
       assert.equal(role, 'link');
     });
+
+    it('supports aria-label with [href]', async () => {
+      const element = html`<mdw-button href=# aria-label=foo></mdw-button>`;
+      const results = await axTree({ selector: element.tagName });
+      const [{ role, name }] = iterateMeaningfulAXNodes(results);
+      assert.equal(role, 'link');
+      assert.equal(name, 'foo');
+    });
+
+    it('labels based on slot with [href]', async () => {
+      const element = html`<mdw-button href=#>foo</mdw-button>`;
+      const results = await axTree({ selector: element.tagName });
+      const [{ role, name }] = iterateMeaningfulAXNodes(results);
+      assert.equal(role, 'link');
+      assert.equal(name, 'foo');
+    });
   });
 
   /* eslint-disable camelcase */

diff --git a/test/spec/IconButton.test.js b/test/spec/IconButton.test.js
@@ -92,6 +92,22 @@ describe('mdw-icon-button', () => {
       const [{ role }] = iterateMeaningfulAXNodes(results);
       assert.equal(role, 'link');
     });
+
+    it('supports aria-label with [href]', async () => {
+      const element = html`<mdw-icon-button href=# aria-label=foo></mdw-icon-button>`;
+      const results = await axTree({ selector: element.tagName });
+      const [{ role, name }] = iterateMeaningfulAXNodes(results);
+      assert.equal(role, 'link');
+      assert.equal(name, 'foo');
+    });
+
+    it('labels based on slot with [href]', async () => {
+      const element = html`<mdw-icon-button href=#>foo</mdw-icon-button>`;
+      const results = await axTree({ selector: element.tagName });
+      const [{ role, name }] = iterateMeaningfulAXNodes(results);
+      assert.equal(role, 'link');
+      assert.equal(name, 'foo');
+    });
   });
 
   /* eslint-disable camelcase */