darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-21 00:23:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3637 from alphagov/make-table-focusable

Browse Source 
Make table focusable
This commit is contained in:
Tom Byers
2020-09-23 09:36:17 +01:00
committed by GitHub
parent a75cde039f a9c1d64326
commit 6ab85c4c78
3 changed files with 50 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,7 +21,8 @@
this.$scrollableTable
.on('scroll', this.toggleShadows)
.on('scroll', this.maintainHeight);
.on('scroll', this.maintainHeight)
.on('focus blur', () => this.$component.toggleClass('js-focus-style'));
if (
window.GOVUK.stickAtBottomWhenScrolling &&
@@ -36,7 +37,10 @@
this.insertShims = () => {
this.$table.wrap('<div class="fullscreen-scrollable-table"/>');
let captionId = this.$table.find('caption').text().toLowerCase().replace(/[^A-Za-z]+/g, '');
this.$table.find('caption').attr('id', captionId);
this.$table.wrap(`<div class="fullscreen-scrollable-table" role="region" aria-labelledby="${captionId}" tabindex="0"/>`);
this.$component
.append(

9
app/assets/stylesheets/components/fullscreen-table.scss
View File

@@ -144,3 +144,12 @@
}
}
.js-focus-style {
outline: 3px solid $govuk-focus-text-colour;
box-shadow: 0 0 0 7px $govuk-focus-colour;
*:focus {
outline: none;
}
}

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

@@ -145,6 +145,21 @@ describe('FullscreenTable', () => {
});
test("it has a role of 'region' and an accessible name matching the caption", () => {
// start module
window.GOVUK.modules.start();
tableFrame = document.querySelector('.fullscreen-scrollable-table');
caption = tableFrame.querySelector('caption');
expect(tableFrame.hasAttribute('role')).toBe(true);
expect(tableFrame.getAttribute('role')).toEqual('region');
expect(tableFrame.hasAttribute('aria-labelledby')).toBe(true);
expect(tableFrame.getAttribute('aria-labelledby')).toEqual(caption.getAttribute('id'));
});
});
describe("the height of the table should fit the vertical space available to it", () => {
@@ -317,4 +332,24 @@ describe('FullscreenTable', () => {
});
describe("when the table is focused", () => {
beforeEach(() => {
// start module
window.GOVUK.modules.start();
tableFrame = document.querySelector('.fullscreen-scrollable-table');
tableFrame.focus();
});
test("it should make the parent frame a focus style", () => {
expect(container.classList.contains('js-focus-style')).toBe(true);
});
});
});