Make difference between table frames obvious

...by naming the attributes related to
accessibility.

Also includes tests for this.

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(

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", () => {