Skip to content

Commit 122b148

Browse files
stevenyxuVivian Hu
authored and
Vivian Hu
committedJan 18, 2019
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

+1
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

+1
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)
Please sign in to comment.