From 041f061dec9728ac6d020f35c585399c695d6249 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Wed, 23 Sep 2020 09:58:27 +0100 Subject: [PATCH 1/2] Make only the scrollable table focusable The JS clones the scrollable table so was passing its attributes across to the fixed one (which provides the row headings). This bug was pushed in: https://github.com/alphagov/notifications-admin/pull/3637 --- app/assets/javascripts/fullscreenTable.js | 1 + 1 file changed, 1 insertion(+) diff --git a/app/assets/javascripts/fullscreenTable.js b/app/assets/javascripts/fullscreenTable.js index 82026ff51..d25496ce1 100644 --- a/app/assets/javascripts/fullscreenTable.js +++ b/app/assets/javascripts/fullscreenTable.js @@ -48,6 +48,7 @@ .clone() .addClass('fullscreen-fixed-table') .removeClass('fullscreen-scrollable-table') + .removeAttr('role aria-labelledby tabindex') .attr('aria-hidden', true) ) .append( From cf07d790241d613462b0cda03a00226f04fb2850 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Wed, 23 Sep 2020 10:33:58 +0100 Subject: [PATCH 2/2] Make difference between table frames obvious ...by naming the attributes related to accessibility. Also includes tests for this. --- app/assets/javascripts/fullscreenTable.js | 3 ++- tests/javascripts/fullscreenTable.test.js | 17 ++++++++++++++++- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/fullscreenTable.js b/app/assets/javascripts/fullscreenTable.js index d25496ce1..1cfa858d9 100644 --- a/app/assets/javascripts/fullscreenTable.js +++ b/app/assets/javascripts/fullscreenTable.js @@ -37,6 +37,7 @@ this.insertShims = () => { + const attributesForFocus = 'role aria-labelledby tabindex'; let captionId = this.$table.find('caption').text().toLowerCase().replace(/[^A-Za-z]+/g, ''); this.$table.find('caption').attr('id', captionId); @@ -48,7 +49,7 @@ .clone() .addClass('fullscreen-fixed-table') .removeClass('fullscreen-scrollable-table') - .removeAttr('role aria-labelledby tabindex') + .removeAttr(attributesForFocus) .attr('aria-hidden', true) ) .append( diff --git a/tests/javascripts/fullscreenTable.test.js b/tests/javascripts/fullscreenTable.test.js index 63a3c091c..c8d89d962 100644 --- a/tests/javascripts/fullscreenTable.test.js +++ b/tests/javascripts/fullscreenTable.test.js @@ -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 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", () => {