diff --git a/app/assets/javascripts/fullscreenTable.js b/app/assets/javascripts/fullscreenTable.js index 99bfc7313..82026ff51 100644 --- a/app/assets/javascripts/fullscreenTable.js +++ b/app/assets/javascripts/fullscreenTable.js @@ -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('
'); + let captionId = this.$table.find('caption').text().toLowerCase().replace(/[^A-Za-z]+/g, ''); + + this.$table.find('caption').attr('id', captionId); + this.$table.wrap(``); this.$component .append( diff --git a/app/assets/stylesheets/components/fullscreen-table.scss b/app/assets/stylesheets/components/fullscreen-table.scss index 57c400a31..baffb30f2 100644 --- a/app/assets/stylesheets/components/fullscreen-table.scss +++ b/app/assets/stylesheets/components/fullscreen-table.scss @@ -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; + } +} diff --git a/tests/javascripts/fullscreenTable.test.js b/tests/javascripts/fullscreenTable.test.js index c50c07d78..63a3c091c 100644 --- a/tests/javascripts/fullscreenTable.test.js +++ b/tests/javascripts/fullscreenTable.test.js @@ -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); + + }); + + }); + });