diff --git a/chips/internal/chip.ts b/chips/internal/chip.ts
index 088549869a..607b942ce8 100644
--- a/chips/internal/chip.ts
+++ b/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}
-        aria-hidden="true"></md-focus-ring>
-      <md-ripple for=${this.primaryId} ?disabled=${this.rippleDisabled}
-        aria-hidden="true"></md-ripple>
+      <md-focus-ring part="focus-ring"
+          for=${this.primaryId}></md-focus-ring>
+      <md-ripple for=${this.primaryId}
+          ?disabled=${this.rippleDisabled}></md-ripple>
       ${this.renderPrimaryAction(this.renderPrimaryContent())}
     `;
   }
diff --git a/docs/components/figures/fab/extended-fabs.html b/docs/components/figures/fab/extended-fabs.html
index a32b9a7538..03c6c87c37 100644
--- a/docs/components/figures/fab/extended-fabs.html
+++ b/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>
\ No newline at end of file
+</div>
diff --git a/elevation/internal/elevation.ts b/elevation/internal/elevation.ts
index 6d5363ee0c..8245e9612d 100644
--- a/elevation/internal/elevation.ts
+++ b/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>`;
   }
diff --git a/focus/internal/focus-ring.ts b/focus/internal/focus-ring.ts
index 957c634b9f..f4b3df18fc 100644
--- a/focus/internal/focus-ring.ts
+++ b/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]) {
diff --git a/icon/internal/icon.ts b/icon/internal/icon.ts
index c5b4846b78..17d70327ab 100644
--- a/icon/internal/icon.ts
+++ b/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');
   }
 }
diff --git a/ripple/internal/ripple.ts b/ripple/internal/ripple.ts
index c5c2261b18..66d9f552e7 100644
--- a/ripple/internal/ripple.ts
+++ b/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,
diff --git a/tabs/demo/stories.ts b/tabs/demo/stories.ts
index ae8d47103e..30855dc957 100644
--- a/tabs/demo/stories.ts
+++ b/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 =
-        html`<md-icon aria-hidden="true" slot="icon">${icon}</md-icon>`;
+    const iconTemplate = html`<md-icon slot="icon">${icon}</md-icon>`;
     return html`
       ${useIcon ? iconTemplate : nothing}
       ${useLabel ? html`${label}` : nothing}