fix!: aria-labels announcing twice with "group" on components

BREAKING CHANGE: `querySelector` for `[role]` and `[aria-*]` attributes may no longer work. See `@material/web/migrations/v2/README.md` and `@material/web/migrations/v2/query-selector-aria.ts`. Browser/SR test results (go/mwc-double-aria-test-results) - ✅ VoiceOver on Chrome - ✅ VoiceOver on iOS Safari - ✅ TalkBack on Chrome - ✅ ChromeVox on Chrome - ✅ NVDA on Chrome - ✅ NVDA on Firefox - ✅ JAWS on Chrome - ✅ JAWS on Firefox (Opt) - ❓ VoiceOver on Safari - ❓ VoiceOver on Firefox PiperOrigin-RevId: 632611852
material-components · Jul 1, 2024 · aebbfc9 · aebbfc9
1 parent 352607d
commit aebbfc9
Show file tree

Hide file tree

Showing 28 changed files with 815 additions and 203 deletions.
diff --git a/button/internal/button.ts b/button/internal/button.ts
@@ -11,7 +11,7 @@ import {html, isServer, LitElement, nothing} from 'lit';
 import {property, query, queryAssignedElements} from 'lit/decorators.js';
 
 import {ARIAMixinStrict} from '../../internal/aria/aria.js';
-import {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';
+import {mixinDelegatesAria} from '../../internal/aria/delegate.js';
 import {
   FormSubmitter,
   setupFormSubmitter,
@@ -27,14 +27,13 @@ import {
 } from '../../labs/behaviors/element-internals.js';
 
 // Separate variable needed for closure.
-const buttonBaseClass = mixinElementInternals(LitElement);
+const buttonBaseClass = mixinDelegatesAria(mixinElementInternals(LitElement));
 
 /**
  * A button component.
  */
 export abstract class Button extends buttonBaseClass implements FormSubmitter {
   static {
-    requestUpdateOnAriaChange(Button);
     setupFormSubmitter(Button);
   }
 

diff --git a/checkbox/internal/checkbox.ts b/checkbox/internal/checkbox.ts
@@ -12,7 +12,7 @@ import {property, query, state} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 
 import {ARIAMixinStrict} from '../../internal/aria/aria.js';
-import {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';
+import {mixinDelegatesAria} from '../../internal/aria/delegate.js';
 import {
   dispatchActivationClick,
   isActivationClick,
@@ -32,8 +32,10 @@ import {
 import {CheckboxValidator} from '../../labs/behaviors/validators/checkbox-validator.js';
 
 // Separate variable needed for closure.
-const checkboxBaseClass = mixinConstraintValidation(
-  mixinFormAssociated(mixinElementInternals(LitElement)),
+const checkboxBaseClass = mixinDelegatesAria(
+  mixinConstraintValidation(
+    mixinFormAssociated(mixinElementInternals(LitElement)),
+  ),
 );
 
 /**
@@ -48,10 +50,6 @@ const checkboxBaseClass = mixinConstraintValidation(
  * --bubbles --composed
  */
 export class Checkbox extends checkboxBaseClass {
-  static {
-    requestUpdateOnAriaChange(Checkbox);
-  }
-
   /** @nocollapse */
   static override shadowRootOptions = {
     ...LitElement.shadowRootOptions,

diff --git a/chips/internal/chip.ts b/chips/internal/chip.ts
@@ -11,18 +11,17 @@ import {html, LitElement, PropertyValues, TemplateResult} from 'lit';
 import {property} from 'lit/decorators.js';
 import {ClassInfo, classMap} from 'lit/directives/class-map.js';
 
-import {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';
+import {mixinDelegatesAria} from '../../internal/aria/delegate.js';
+
+// Separate variable needed for closure.
+const chipBaseClass = mixinDelegatesAria(LitElement);
 
 /**
  * A chip component.
  *
  * @fires update-focus {Event} Dispatched when `disabled` is toggled. --bubbles
  */
-export abstract class Chip extends LitElement {
-  static {
-    requestUpdateOnAriaChange(Chip);
-  }
-
+export abstract class Chip extends chipBaseClass {
   /** @nocollapse */
   static override shadowRootOptions = {
     ...LitElement.shadowRootOptions,

diff --git a/dialog/internal/dialog.ts b/dialog/internal/dialog.ts
@@ -11,7 +11,7 @@ import {property, query, state} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 
 import {ARIAMixinStrict} from '../../internal/aria/aria.js';
-import {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';
+import {mixinDelegatesAria} from '../../internal/aria/delegate.js';
 import {redispatchEvent} from '../../internal/events/redispatch-event.js';
 
 import {
@@ -21,6 +21,9 @@ import {
   DialogAnimationArgs,
 } from './animations.js';
 
+// Separate variable needed for closure.
+const dialogBaseClass = mixinDelegatesAria(LitElement);
+
 /**
  * A dialog component.
  *
@@ -31,11 +34,7 @@ import {
  * @fires cancel {Event} Dispatched when the dialog has been canceled by clicking
  * on the scrim or pressing Escape.
  */
-export class Dialog extends LitElement {
-  static {
-    requestUpdateOnAriaChange(Dialog);
-  }
-
+export class Dialog extends dialogBaseClass {
   // We do not use `delegatesFocus: true` due to a Chromium bug with
   // selecting text.
   // See https://bugs.chromium.org/p/chromium/issues/detail?id=950357

diff --git a/fab/internal/shared.ts b/fab/internal/shared.ts
@@ -13,19 +13,18 @@ import {property} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 
 import {ARIAMixinStrict} from '../../internal/aria/aria.js';
-import {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';
+import {mixinDelegatesAria} from '../../internal/aria/delegate.js';
 
 /**
  * Sizes variants available to non-extended FABs.
  */
 export type FabSize = 'medium' | 'small' | 'large';
 
-// tslint:disable-next-line:enforce-comments-on-exported-symbols
-export abstract class SharedFab extends LitElement {
-  static {
-    requestUpdateOnAriaChange(SharedFab);
-  }
+// Separate variable needed for closure.
+const fabBaseClass = mixinDelegatesAria(LitElement);
 
+// tslint:disable-next-line:enforce-comments-on-exported-symbols
+export abstract class SharedFab extends fabBaseClass {
   /** @nocollapse */
   static override shadowRootOptions: ShadowRootInit = {
     mode: 'open' as const,

diff --git a/iconbutton/internal/icon-button.ts b/iconbutton/internal/icon-button.ts
@@ -13,7 +13,7 @@ import {classMap} from 'lit/directives/class-map.js';
 import {literal, html as staticHtml} from 'lit/static-html.js';
 
 import {ARIAMixinStrict} from '../../internal/aria/aria.js';
-import {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';
+import {mixinDelegatesAria} from '../../internal/aria/delegate.js';
 import {
   FormSubmitter,
   setupFormSubmitter,
@@ -28,7 +28,9 @@ import {
 type LinkTarget = '_blank' | '_parent' | '_self' | '_top';
 
 // Separate variable needed for closure.
-const iconButtonBaseClass = mixinElementInternals(LitElement);
+const iconButtonBaseClass = mixinDelegatesAria(
+  mixinElementInternals(LitElement),
+);
 
 /**
  * A button for rendering icons.
@@ -39,7 +41,6 @@ const iconButtonBaseClass = mixinElementInternals(LitElement);
  */
 export class IconButton extends iconButtonBaseClass implements FormSubmitter {
   static {
-    requestUpdateOnAriaChange(IconButton);
     setupFormSubmitter(IconButton);
   }
 

diff --git a/internal/aria/aria.ts b/internal/aria/aria.ts
@@ -73,7 +73,7 @@ export const ARIA_ATTRIBUTES = ARIA_PROPERTIES.map(ariaPropertyToAttribute);
  * @return True if the attribute is an aria attribute, or false if not.
  */
 export function isAriaAttribute(attribute: string): attribute is ARIAAttribute {
-  return attribute.startsWith('aria-') || attribute === 'role';
+  return ARIA_ATTRIBUTES.includes(attribute as ARIAAttribute);
 }
 
 /**

diff --git a/internal/aria/aria_test.ts b/internal/aria/aria_test.ts
@@ -16,10 +16,10 @@ describe('aria', () => {
         .toBeTrue();
     });
 
-    it('should return true for aria idref attributes', () => {
+    it('should return false for aria idref attributes', () => {
       expect(isAriaAttribute('aria-labelledby'))
         .withContext('aria-labelledby input')
-        .toBeTrue();
+        .toBeFalse();
     });
 
     it('should return true for role', () => {
@@ -29,6 +29,12 @@ describe('aria', () => {
     it('should return false for non-aria attributes', () => {
       expect(isAriaAttribute('label')).withContext('label input').toBeFalse();
     });
+
+    it('should return false for custom aria-* attributes', () => {
+      expect(isAriaAttribute('aria-label-custom'))
+        .withContext('aria-label-custom input')
+        .toBeFalse();
+    });
   });
 
   describe('ariaPropertyToAttribute()', () => {