From f66302d44301c936d5647c6d6cfd326b118808fb Mon Sep 17 00:00:00 2001 From: Steven Xu Date: Tue, 15 Jan 2019 14:27:10 -0800 Subject: [PATCH] fix(focus-trap): apply aria-hidden to focus trap tab anchors (#14644) These anchors at the book ends of a FocusTrap'ed element have focus listeners that redirect focus back to the element. However, some screen readers may access these focus traps without moving programmatic focus, leaving the SR user wondering why an empty control lives on the page. Android TalkBack currently treats this as a stop with no announcement (because it has no content). Adding the aria-hidden should prevent these from being accessed in SR contexts while preserving the core functionality of redirecting focus when it's moved linearly (e.g., with tab). --- src/cdk/a11y/focus-trap/focus-trap.spec.ts | 1 + src/cdk/a11y/focus-trap/focus-trap.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/src/cdk/a11y/focus-trap/focus-trap.spec.ts b/src/cdk/a11y/focus-trap/focus-trap.spec.ts index 5d91fbc4a6f..fbecb2d847d 100644 --- a/src/cdk/a11y/focus-trap/focus-trap.spec.ts +++ b/src/cdk/a11y/focus-trap/focus-trap.spec.ts @@ -101,6 +101,7 @@ describe('FocusTrap', () => { ) as HTMLElement[]; expect(anchors.every(current => current.getAttribute('tabindex') === '0')).toBe(true); + expect(anchors.every(current => current.getAttribute('aria-hidden') === 'true')).toBe(true); fixture.componentInstance._isFocusTrapEnabled = false; fixture.detectChanges(); diff --git a/src/cdk/a11y/focus-trap/focus-trap.ts b/src/cdk/a11y/focus-trap/focus-trap.ts index 21450553723..0a62e0629ea 100644 --- a/src/cdk/a11y/focus-trap/focus-trap.ts +++ b/src/cdk/a11y/focus-trap/focus-trap.ts @@ -304,6 +304,7 @@ export class FocusTrap { this._toggleAnchorTabIndex(this._enabled, anchor); anchor.classList.add('cdk-visually-hidden'); anchor.classList.add('cdk-focus-trap-anchor'); + anchor.setAttribute('aria-hidden', 'true'); return anchor; }