From cf07d790241d613462b0cda03a00226f04fb2850 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Wed, 23 Sep 2020 10:33:58 +0100
Subject: [PATCH] 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", () => {