diff --git a/app/assets/javascripts/fullscreenTable.js b/app/assets/javascripts/fullscreenTable.js index 82026ff51..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,6 +49,7 @@ .clone() .addClass('fullscreen-fixed-table') .removeClass('fullscreen-scrollable-table') + .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", () => {