fix: add aria-hidden="true" to ripple, focus ring, and elevation

PiperOrigin-RevId: 562075778

chips/internal/chip.ts

@@ -56,15 +56,12 @@ export abstract class Chip extends LitElement {
   }
 
   protected renderContainerContent() {
-    // Note: add aria-hidden="true" to focus ring and ripple. For some reason
-    // they cause VoiceOver to get stuck inside filter chip sets without it.
-    // TODO(b/297428579): investigate and file VoiceOver bug
     return html`
       ${this.renderOutline()}
-      <md-focus-ring part="focus-ring" for=${this.primaryId}
+      <md-focus-ring part="focus-ring"
-        aria-hidden="true"></md-focus-ring>
+          for=${this.primaryId}></md-focus-ring>
-      <md-ripple for=${this.primaryId} ?disabled=${this.rippleDisabled}
+      <md-ripple for=${this.primaryId}
-        aria-hidden="true"></md-ripple>
+          ?disabled=${this.rippleDisabled}></md-ripple>
       ${this.renderPrimaryAction(this.renderPrimaryContent())}
     `;
   }

docs/components/figures/fab/extended-fabs.html

@@ -8,7 +8,7 @@
       <div>
         <div class="fab-wrapper">
           <md-fab label="navigate" variant="primary">
-            <md-icon slot="icon" aria-hidden="true">navigation</md-icon>
+            <md-icon slot="icon">navigation</md-icon>
           </md-fab>
         </div>
         <span>1</span>
@@ -22,4 +22,4 @@
       </div>
     </div>
   </figure>
-</div>
+</div>

elevation/internal/elevation.ts

@@ -10,6 +10,13 @@ import {html, LitElement} from 'lit';
  * A component for elevation.
  */
 export class Elevation extends LitElement {
+  override connectedCallback() {
+    super.connectedCallback();
+    // Needed for VoiceOver, which will create a "group" if the element is a
+    // sibling to other content.
+    this.setAttribute('aria-hidden', 'true');
+  }
+
   protected override render() {
     return html`<span class="shadow"></span>`;
   }

focus/internal/focus-ring.ts

@@ -56,6 +56,13 @@ export class FocusRing extends LitElement implements Attachable {
     this.attachableController.detach();
   }
 
+  override connectedCallback() {
+    super.connectedCallback();
+    // Needed for VoiceOver, which will create a "group" if the element is a
+    // sibling to other content.
+    this.setAttribute('aria-hidden', 'true');
+  }
+
   /** @private */
   handleEvent(event: FocusRingEvent) {
     if (event[HANDLED_BY_FOCUS_RING]) {

icon/internal/icon.ts

@@ -18,10 +18,14 @@ export class Icon extends LitElement {
     super.connectedCallback();
     const ariaHidden = this.getAttribute('aria-hidden');
     if (ariaHidden === 'false') {
+      // Allow the user to set `aria-hidden="false"` to create an icon that is
+      // announced by screenreaders.
       this.removeAttribute('aria-hidden');
       return;
     }
 
+    // Needed for VoiceOver, which will create a "group" if the element is a
+    // sibling to other content.
     this.setAttribute('aria-hidden', 'true');
   }
 }

ripple/internal/ripple.ts

@@ -126,6 +126,13 @@ export class Ripple extends LitElement implements Attachable {
     this.attachableController.detach();
   }
 
+  override connectedCallback() {
+    super.connectedCallback();
+    // Needed for VoiceOver, which will create a "group" if the element is a
+    // sibling to other content.
+    this.setAttribute('aria-hidden', 'true');
+  }
+
   protected override render() {
     const classes = {
       'hovered': this.hovered,

tabs/demo/stories.ts

@@ -367,8 +367,7 @@ function getTabContentGenerator(knobs: StoryKnobs) {
   const useIcon = contentKnob !== 'label';
   const useLabel = contentKnob !== 'icon';
   return (icon: string, label: string) => {
-    const iconTemplate =
+    const iconTemplate = html`<md-icon slot="icon">${icon}</md-icon>`;
-        html`<md-icon aria-hidden="true" slot="icon">${icon}</md-icon>`;
     return html`
       ${useIcon ? iconTemplate : nothing}
       ${useLabel ? html`${label}` : nothing}