Skip to content

Commit 122b148

Browse files
stevenyxuVivian Hu
authored andcommitted
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).
1 parent e721664 commit 122b148

File tree

2 files changed

+2
-0
lines changed

2 files changed

+2
-0
lines changed

src/cdk/a11y/focus-trap/focus-trap.spec.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@ describe('FocusTrap', () => {
101101
) as HTMLElement[];
102102

103103
expect(anchors.every(current => current.getAttribute('tabindex') === '0')).toBe(true);
104+
expect(anchors.every(current => current.getAttribute('aria-hidden') === 'true')).toBe(true);
104105

105106
fixture.componentInstance._isFocusTrapEnabled = false;
106107
fixture.detectChanges();

src/cdk/a11y/focus-trap/focus-trap.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -304,6 +304,7 @@ export class FocusTrap {
304304
this._toggleAnchorTabIndex(this._enabled, anchor);
305305
anchor.classList.add('cdk-visually-hidden');
306306
anchor.classList.add('cdk-focus-trap-anchor');
307+
anchor.setAttribute('aria-hidden', 'true');
307308
return anchor;
308309
}
309310

0 commit comments

Comments
 (0)