darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-29 10:44:58 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3645 from alphagov/fix-focus-on-table

Browse Source 
Make only the scrollable table focusable
This commit is contained in:
Tom Byers
2020-09-23 11:32:04 +01:00
committed by GitHub
parent dcd48f99dd cf07d79024
commit 27f7e873f1
2 changed files with 18 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/fullscreenTable.js
View File

@@ -37,6 +37,7 @@
this.insertShims = () => { this.insertShims = () => {
const attributesForFocus = 'role aria-labelledby tabindex';
let captionId = this.$table.find('caption').text().toLowerCase().replace(/[^A-Za-z]+/g, ''); let captionId = this.$table.find('caption').text().toLowerCase().replace(/[^A-Za-z]+/g, '');
this.$table.find('caption').attr('id', captionId); this.$table.find('caption').attr('id', captionId);
@@ -48,6 +49,7 @@
.clone() .clone()
.addClass('fullscreen-fixed-table') .addClass('fullscreen-fixed-table')
.removeClass('fullscreen-scrollable-table') .removeClass('fullscreen-scrollable-table')
.removeAttr(attributesForFocus)
.attr('aria-hidden', true) .attr('aria-hidden', true)
) )
.append( .append(

17
tests/javascripts/fullscreenTable.test.js
View File

@@ -145,7 +145,7 @@ describe('FullscreenTable', () => {
}); });
test("it has a role of 'region' and an accessible name matching the caption", () => { test("the scrolling section is focusable and has an accessible name matching the table caption", () => {
// start module // start module
window.GOVUK.modules.start(); window.GOVUK.modules.start();
@@ -160,6 +160,21 @@ describe('FullscreenTable', () => {
}); });
test("the section providing the fixed row headers is not focusable and is hidden from assistive tech'", () => {
// start module
window.GOVUK.modules.start();
fixedRowHeaders = document.querySelector('.fullscreen-fixed-table');
expect(fixedRowHeaders.hasAttribute('role')).toBe(false);
expect(fixedRowHeaders.hasAttribute('aria-labelledby')).toBe(false);
expect(fixedRowHeaders.hasAttribute('tabindex')).toBe(false);
expect(fixedRowHeaders.hasAttribute('aria-hidden')).toBe(true);
expect(fixedRowHeaders.getAttribute('aria-hidden')).toEqual('true');
});
}); });
describe("the height of the table should fit the vertical space available to it", () => { describe("the height of the table should fit the vertical space available to it", () => {