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

@@ -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(

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