From de89e3cc11b85b259f11705dc181a3147f6fab5c Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Fri, 18 Sep 2020 21:28:34 +0100
Subject: [PATCH 1/2] Make fullscreen focusable

Includes:
- adding tabindex=0 to make it focusable
- giving it a focus style matching GOVUK Frontend
- giving it a label matching the table caption

Taken from this article:

https://adrianroselli.com/2017/11/a-responsive-accessible-table.html#ResponsiveScrollingKeyboard
---
 app/assets/javascripts/fullscreenTable.js               | 8 ++++++--
 app/assets/stylesheets/components/fullscreen-table.scss | 9 +++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

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('<div class="fullscreen-scrollable-table"/>');
+      let captionId = this.$table.find('caption').text().toLowerCase().replace(/[^A-Za-z]+/g, '');
+
+      this.$table.find('caption').attr('id', captionId);
+      this.$table.wrap(`<div class="fullscreen-scrollable-table" role="region" aria-labelledby="${captionId}" tabindex="0"/>`);
 
       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;
+  }
+}

From a9c1d643262af58ce646c89c0107a1ba81a7cedf Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Fri, 18 Sep 2020 21:51:24 +0100
Subject: [PATCH 2/2] Add tests for the focus style & new attributes

---
 tests/javascripts/fullscreenTable.test.js | 35 +++++++++++++++++++++++
 1 file changed, 35 insertions(+)

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);
+
+    });
+
+  });
+
 });