From 71fad3884bc55b266067efb346500c848b856946 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 23 Aug 2022 11:23:00 -0500
Subject: [PATCH] fix(breadcrumb): separator is not announced by narrators
 (#25796)

---
 core/src/components/breadcrumb/breadcrumb.tsx   |  7 ++++++-
 .../breadcrumbs/test/breadcrumbs.spec.ts        | 17 +++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/core/src/components/breadcrumb/breadcrumb.tsx b/core/src/components/breadcrumb/breadcrumb.tsx
index a565d089d1..c344f6fb68 100644
--- a/core/src/components/breadcrumb/breadcrumb.tsx
+++ b/core/src/components/breadcrumb/breadcrumb.tsx
@@ -222,7 +222,12 @@ export class Breadcrumb implements ComponentInterface {
           </button>
         )}
         {showSeparator && (
-          <span class="breadcrumb-separator" part="separator">
+          /**
+           * Separators should not be announced by narrators.
+           * We add aria-hidden on the span so that this applies
+           * to any custom separators too.
+           */
+          <span class="breadcrumb-separator" part="separator" aria-hidden="true">
             <slot name="separator">
               {mode === 'ios' ? (
                 <ion-icon icon={chevronForwardOutline} lazy={false} flip-rtl></ion-icon>
diff --git a/core/src/components/breadcrumbs/test/breadcrumbs.spec.ts b/core/src/components/breadcrumbs/test/breadcrumbs.spec.ts
index 8424e3c2fa..9166df3d81 100644
--- a/core/src/components/breadcrumbs/test/breadcrumbs.spec.ts
+++ b/core/src/components/breadcrumbs/test/breadcrumbs.spec.ts
@@ -34,3 +34,20 @@ it('should correctly provide the collapsed breadcrumbs in the event payload', as
   expect(collapsedBreadcrumbs[1]).toBe(breadcrumb[2]);
   expect(collapsedBreadcrumbs[2]).toBe(breadcrumb[3]);
 });
+
+it('should exclude the separator from narrators', async () => {
+  const page = await newSpecPage({
+    components: [Breadcrumbs, Breadcrumb],
+    html: `
+      <ion-breadcrumbs>
+        <ion-breadcrumb>First</ion-breadcrumb>
+        <ion-breadcrumb>Second</ion-breadcrumb>
+      </ion-breadcrumbs>
+    `,
+  });
+
+  const firstBreadcrumb = page.body.querySelector('ion-breadcrumb:first-of-type');
+  const separator = firstBreadcrumb.shadowRoot.querySelector('[part="separator"]');
+
+  expect(separator.getAttribute('aria-hidden')).toBe('true');
+});