Fix DAC issues (#165)

* Fix link in header components for image link purpose * Add aria-label to image caption on hero components * Add title attributes to social links in footer components * Fix details expanded state not announced on iOS * Add file size and type to file lists * Add html property to buttons * Improve accessibility and usability of the gallery component * Update CHANGELOG.md
nationalarchives · Oct 7, 2024 · 4f2eea4 · 4f2eea4
1 parent 5e09aed
commit 4f2eea4
Show file tree

Hide file tree

Showing 22 changed files with 143 additions and 88 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,13 +8,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.2.14...HEAD)
 
 ### Added
+
+- Buttons can now have an `html` property that allows HTML to be used in place of the `text` property
+
 ### Changed
 ### Deprecated
 ### Removed
 ### Fixed
 
 - Change border widths on global header items from `0.5px` to `1px` to help with sub-pixel rendering
 - Missing background colour added for focused buttons with `tna-button--solid-hover`
+- Logo link in header and global header components updated to address image link purpose WCAG failure
+- Added `aria-label` to image caption on hero components
+- Added `title` attributes to social links in footer components
+- Fix details expanded state not announced on iOS ([issue #5089 on govuk-frontend](https://github.com/alphagov/govuk-frontend/pull/5089))
+- Fixed file list accessible link names to include file size and type
+- Accessibility and usability improvements made to the gallery component with regards to HTML and JavaScript
 
 ### Security
 

diff --git a/src/nationalarchives/components/button/button-group.stories.js b/src/nationalarchives/components/button/button-group.stories.js
@@ -6,6 +6,7 @@ export default {
 
 const Template = ({
   text,
+  html,
   href,
   title,
   icon,
@@ -23,6 +24,7 @@ const Template = ({
   Button({
     params: {
       text,
+      html,
       href,
       title,
       icon,
@@ -58,6 +60,11 @@ Group.args = {
       accent: true,
       classes: "tna-button--demo",
     },
+    {
+      html: "<em>HTML</em>",
+      href: "#",
+      classes: "tna-button--demo",
+    },
     {
       text: "Icon",
       href: "#",

diff --git a/src/nationalarchives/components/button/button.stories.js b/src/nationalarchives/components/button/button.stories.js
@@ -3,6 +3,7 @@ import macroOptions from "./macro-options.json";
 
 const argTypes = {
   text: { control: "text" },
+  html: { control: "text" },
   href: { control: "text" },
   title: { control: "text" },
   icon: { control: "text" },
@@ -32,6 +33,7 @@ export default {
 
 const Template = ({
   text,
+  html,
   href,
   title,
   icon,
@@ -50,6 +52,7 @@ const Template = ({
   Button({
     params: {
       text,
+      html,
       href,
       title,
       icon,

diff --git a/src/nationalarchives/components/button/fixtures.json b/src/nationalarchives/components/button/fixtures.json
@@ -9,6 +9,14 @@
       },
       "html": "<a href=\"#\" class=\"tna-button\">Log in</a>"
     },
+    {
+      "name": "with html",
+      "options": {
+        "html": "<em>Log in</em>",
+        "href": "#"
+      },
+      "html": "<a href=\"#\" class=\"tna-button\"><em>Log in</em></a>"
+    },
     {
       "name": "with title",
       "options": {

diff --git a/src/nationalarchives/components/button/macro-options.json b/src/nationalarchives/components/button/macro-options.json
@@ -2,9 +2,15 @@
   {
     "name": "text",
     "type": "string",
-    "required": true,
+    "required": false,
     "description": "The text of the button."
   },
+  {
+    "name": "html",
+    "type": "string",
+    "required": false,
+    "description": "The HTML to use as the text of the button. Setting this overwrites the `text` property."
+  },
   {
     "name": "href",
     "type": "string",

diff --git a/src/nationalarchives/components/button/template.njk b/src/nationalarchives/components/button/template.njk
@@ -24,5 +24,9 @@
   {% elif params.iconSvg -%}
   {{ params.iconSvg | safe }}
   {% endif -%}
+  {% if params.html -%}
+  {{ params.html | safe }}
+  {% else -%}
   {{ params.text }}
-</{{ 'button' if params.buttonElement else 'a' }}>
+  {% endif -%}
+</{{ 'button' if params.buttonElement else 'a' }}>
diff --git a/src/nationalarchives/components/details/details.scss b/src/nationalarchives/components/details/details.scss
@@ -15,10 +15,11 @@
   }
 
   &__summary {
+    width: fit-content;
     padding: spacing.space(0.5) spacing.space(1) spacing.space(0.5)
       spacing.space(2.75);
 
-    display: inline-block;
+    display: block;
 
     position: relative;
     z-index: 1;

diff --git a/src/nationalarchives/components/files-list/fixtures.json b/src/nationalarchives/components/files-list/fixtures.json
diff --git a/src/nationalarchives/components/files-list/template.njk b/src/nationalarchives/components/files-list/template.njk
@@ -9,7 +9,7 @@
     {%- for item in params.items %}
     <li class="tna-files-list__item">
       <h{{ params.itemHeadingLevel }} class="tna-files-list__item-title tna-heading-s">
-        <a href="{{ item.href }}" class="tna-files-list__link" aria-describedby="{{ item.id }}">{{ item.text }}</a>
+        <a href="{{ item.href }}" class="tna-files-list__link"{% if item.fileExtent %} aria-describedby="{{ item.id }}-extent"{% endif %}>{{ item.text }}<span class="tna-visually-hidden"> ({{ item.fileType }}, {{ item.fileSize }})</span></a>
       </h{{ params.itemHeadingLevel }}>
       <div class="tna-files-list__item-body" id="{{ item.id }}">
         <dl class="tna-dl-chips tna-dl-chips--plain tna-files-list__item-meta">
@@ -24,7 +24,7 @@
           {%- if item.fileExtent %}
           <dt>Extent</dt>
           <dd>
-            <span class="tna-dl-chips__item">{{ item.fileExtent }}</span>
+            <span id="{{ item.id }}-extent" class="tna-dl-chips__item">{{ item.fileExtent }}</span>
           </dd>
           {%- endif %}
         </dl>

diff --git a/src/nationalarchives/components/footer/fixtures.json b/src/nationalarchives/components/footer/fixtures.json
diff --git a/src/nationalarchives/components/footer/template.njk b/src/nationalarchives/components/footer/template.njk
@@ -81,7 +81,7 @@
             <ul class="tna-ul tna-ul--plain tna-footer__social-items">
             {%- for item in params.social %}
               <li class="tna-footer__social-item">
-                <a href="{{ item.href }}" class="tna-footer__social-item-link" data-name="{{ item.icon }}">
+                <a href="{{ item.href }}" class="tna-footer__social-item-link" title="{{ item.title }}" data-name="{{ item.icon }}">
                   {%- if item.icon == 'twitter' %}
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="32"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
                   {%- elif item.icon == 'youtube' %}

diff --git a/src/nationalarchives/components/gallery/fixtures.json b/src/nationalarchives/components/gallery/fixtures.json
diff --git a/src/nationalarchives/components/gallery/gallery.mjs b/src/nationalarchives/components/gallery/gallery.mjs
@@ -61,7 +61,7 @@ export class Gallery {
   setup() {
     this.$items.forEach(($item) => {
       $item.setAttribute("hidden", "until-found");
-      $item.setAttribute("role", "tabpanel");
+      $item.setAttribute("aria-hidden", "true");
     });
     this.$navigation.removeAttribute("hidden");
     this.$navigationItems.forEach(($item) => {
@@ -70,7 +70,6 @@ export class Gallery {
         this.$itemsContainer.focus();
       });
     });
-    // this.$module.setAttribute("tabindex", "0");
     this.$module.addEventListener("keydown", (e) => {
       let preventDefaultKeyAction = false;
       switch (e.key) {
@@ -116,49 +115,63 @@ export class Gallery {
     this.$navigationButtons?.removeAttribute("hidden");
     this.$navigationButtonPrev?.addEventListener("click", () => {
       this.showPreviousItem();
-      this.$itemsContainer.focus();
     });
     this.$navigationButtonNext?.addEventListener("click", () => {
       this.showNextItem();
-      this.$itemsContainer.focus();
     });
+
+    this.$liveRegion = document.createElement("div");
+    this.$liveRegion.setAttribute("aria-live", "polite");
+    this.$liveRegion.setAttribute("aria-atomic", "true");
+    this.$liveRegion.setAttribute("class", "tna-gallery__item-header");
+    this.$itemsContainer.prepend(this.$liveRegion);
+    this.$itemsContainer.classList.add("tna-gallery__items--hide-item-titles");
   }
 
   showIndex() {
     this.showItem("");
-    this.$itemsContainer.setAttribute("tabindex", "-1");
+    this.$itemsContainer.classList.add("tna-gallery__items--hide-items");
     this.$showIndex?.setAttribute("hidden", true);
   }
 
-  showItem(id) {
+  showItem(id, focus = false) {
     this.$items.forEach(($item) => {
       if (id && $item.id === id) {
         $item.removeAttribute("hidden");
-        $item.removeAttribute("tabindex");
+        $item.removeAttribute("aria-hidden");
+        if (focus) {
+          $item.setAttribute("tabindex", "0");
+          $item.focus();
+        }
       } else {
         $item.setAttribute("hidden", "until-found");
-        $item.setAttribute("tabindex", "-1");
+        $item.setAttribute("aria-hidden", "true");
       }
+      $item.setAttribute("tabindex", "-1");
     });
-    this.$navigationItems.forEach(($item, index) => {
+    this.$navigationItems.forEach(($item /*, index*/) => {
       if (id) {
         if ($item.getAttribute("aria-controls") === id) {
           $item.setAttribute("aria-selected", "true");
-          $item.setAttribute("tabindex", "0");
+          // $item.setAttribute("tabindex", "0");
+          if (this.isFullScreen()) {
+            $item.scrollIntoView({ block: "nearest" });
+          }
         } else {
           $item.setAttribute("aria-selected", "false");
-          $item.setAttribute("tabindex", "-1");
+          // $item.setAttribute("tabindex", "-1");
         }
       } else {
         $item.setAttribute("aria-selected", "false");
-        $item.setAttribute("tabindex", index === 0 ? "0" : "-1");
+        // $item.setAttribute("tabindex", index === 0 ? "0" : "-1");
       }
     });
     if (this.allowGridIndex) {
       this.$showIndex?.removeAttribute("hidden");
     }
+    this.$itemsContainer.classList.remove("tna-gallery__items--hide-items");
     this.currentId = id;
-    this.$itemsContainer.setAttribute("tabindex", "0");
+    this.$liveRegion.textContent = `Image ${this.getCurrentItemIndex() + 1} of ${this.$items.length}`;
   }
 
   getCurrentItemIndex() {
@@ -172,31 +185,27 @@ export class Gallery {
     if (nextIndexToShow < 0) {
       nextIndexToShow = this.$items.length - 1;
     }
-    this.showItem(this.$items[nextIndexToShow].id, true);
+    this.showItem(this.$items[nextIndexToShow].id);
   }
 
   showNextItem() {
     let nextIndexToShow = this.getCurrentItemIndex() + 1;
     if (nextIndexToShow >= this.$items.length) {
       nextIndexToShow = 0;
     }
-    this.showItem(this.$items[nextIndexToShow].id, true);
+    this.showItem(this.$items[nextIndexToShow].id);
   }
 
   showFirstItem() {
-    this.showItem(this.$items[0].id, true);
+    this.showItem(this.$items[0].id);
   }
 
   showLastItem() {
-    this.showItem(this.$items[this.$items.length - 1].id, true);
+    this.showItem(this.$items[this.$items.length - 1].id);
   }
 
-  toggleFullScreen() {
-    if (!document.fullscreenElement) {
-      this.enterFullScreen();
-    } else if (document.exitFullscreen) {
-      this.exitFullScreen();
-    }
+  isFullScreen() {
+    return document.fullscreenElement;
   }
 
   enterFullScreen() {
@@ -211,7 +220,7 @@ export class Gallery {
   }
 
   syncFullScreen() {
-    if (document.fullscreenElement) {
+    if (this.isFullScreen()) {
       this.$enterFullscreen.setAttribute("hidden", true);
       this.$exitFullscreen.removeAttribute("hidden");
     } else {

diff --git a/src/nationalarchives/components/gallery/gallery.scss b/src/nationalarchives/components/gallery/gallery.scss
@@ -192,8 +192,9 @@
     transform: rotate(45deg);
   }
 
-  &__items[tabindex="-1"],
-  &__items[tabindex="-1"] + &__navigation-buttons {
+  &__items--hide-item-titles &__item &__item-header,
+  &__items--hide-items,
+  &__items--hide-items + &__navigation-buttons {
     display: none;
   }
 

diff --git a/src/nationalarchives/components/gallery/template.njk b/src/nationalarchives/components/gallery/template.njk
@@ -18,7 +18,7 @@
     </div>
     <div class="tna-gallery__options tna-button-group tna-button-group--small" hidden>
       {{ tnaButton({
-        text: "Full screen",
+        html: '<span class="tna-visually-hidden">View the ' + (params.title or '') + ' gallery in </span>Full screen',
         iconSvg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z"/></svg>',
         iconOnlyOnMobile: true,
         buttonElement: true,
@@ -51,7 +51,7 @@
   </div>
   <div class="tna-gallery__items">
     {%- for item in params.items %}
-    <div class="tna-gallery__item" id="{{ params.id }}-item-{{ loop.index }}" aria-labelledby="{{ params.id }}-item-{{ loop.index }}-tab" role="tabpanel">
+    <div class="tna-gallery__item" id="{{ params.id }}-item-{{ loop.index }}" aria-labelledby="{{ params.id }}-item-{{ loop.index }}-tab">
       <p class="tna-gallery__item-header">Image {{ loop.index }} of {{ params.items | length }}</p>
       <figure class="tna-gallery__item-figure">
         <div class="tna-gallery__item-figure-inner">
@@ -80,9 +80,9 @@
       </span>
     </button>
   </div>
-  <div class="tna-gallery__navigation" role="tablist" hidden>
+  <div class="tna-gallery__navigation" hidden>
     {%- for item in params.items -%}
-    <button type="button" class="tna-gallery__navigation-item" role="tab" id="{{ params.id }}-item-{{ loop.index }}-tab" aria-label="Photo {{ loop.index }} of {{ params.items | length }}" aria-controls="{{ params.id }}-item-{{ loop.index }}">
+    <button type="button" class="tna-gallery__navigation-item" id="{{ params.id }}-item-{{ loop.index }}-tab" aria-label="Image {{ loop.index }} of {{ params.items | length }}" aria-controls="{{ params.id }}-item-{{ loop.index }}">
       <img src="{{ item.src }}" class="tna-gallery__navigation-item-image" alt="" width="{{ item.width }}" height="{{ item.height }}" loading="lazy">
       <span class="tna-visually-hidden">Image</span>
       <span class="tna-gallery__navigation-item-label">{{ loop.index }}</span>