Ensure focus is restored to last active element when nav is closed
This commit is contained in:
@@ -56,6 +56,7 @@ export default class Navigation {
|
||||
}
|
||||
|
||||
openNav() {
|
||||
this.lastActiveElement = document.activeElement;
|
||||
this.state = 'visible';
|
||||
this.menu.hideMenu();
|
||||
this.container.classList.add(STATES.open);
|
||||
@@ -68,5 +69,8 @@ export default class Navigation {
|
||||
this.menu.showMenu();
|
||||
this.container.classList.remove(STATES.open);
|
||||
this.container.setAttribute('aria-hidden', true);
|
||||
if (this.lastActiveElement) {
|
||||
this.lastActiveElement.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -126,12 +126,15 @@ describe('Navigation close button', () => {
|
||||
describe('Navigation focus behaviour', () => {
|
||||
let first;
|
||||
let last;
|
||||
let menu;
|
||||
|
||||
beforeEach(() => {
|
||||
nav.init();
|
||||
nav.openNav();
|
||||
menu = nav.container.querySelector('.Menu');
|
||||
first = nav.container.querySelector('.Nav-link');
|
||||
last = nav.container.querySelector('.Nav-close');
|
||||
menu.focus();
|
||||
nav.init();
|
||||
nav.openNav();
|
||||
});
|
||||
|
||||
it('Should apply focus to .Nav-titleLink when opened', () => {
|
||||
@@ -155,4 +158,10 @@ describe('Navigation focus behaviour', () => {
|
||||
first.dispatchEvent(event);
|
||||
expect(document.activeElement).toBe(last);
|
||||
});
|
||||
|
||||
test('Focus is restored to last active element when Navigation is closed', () => {
|
||||
first.focus();
|
||||
nav.closeNav();
|
||||
expect(document.activeElement).toBe(menu);
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user