v0.2.15

nationalarchives · Oct 7, 2024 · dc71527 · dc71527
1 parent 53e52df
commit dc71527
Show file tree

Hide file tree

Showing 12 changed files with 142 additions and 67 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,7 +5,7 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [Unreleased](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.2.14...HEAD)
+## [Unreleased](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.2.15...HEAD)
 
 ### Added
 ### Changed
@@ -14,6 +14,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 ### Security
 
+## [0.2.15](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.2.14...v0.2.15) - 2024-10-07
+
+### Changed
+
+- Upgraded TNA Frontend to `v0.2.15`
+
 ## [0.2.14](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.2.13...v0.2.14) - 2024-09-18
 
 ### Changed

diff --git a/README.md b/README.md
@@ -54,6 +54,7 @@ We test each component against its published [component fixtures](https://github
 
 | TNA Frontend Jinja | Compatible TNA Frontend versions |
 | ------------------ | -------------------------------- |
+| `0.2.15`           | `0.2.15`                         |
 | `0.2.14`           | `0.2.14`                         |
 | `0.2.13`           | `0.2.13`                         |
 | `0.2.12`           | `0.2.12`                         |

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,8 +4,8 @@
     "test": "node test-fixtures.mjs"
   },
   "dependencies": {
-    "@nationalarchives/frontend": "0.2.14",
-    "diff": "^5.1.0",
+    "@nationalarchives/frontend": "0.2.15",
+    "diff": "^7.0.0",
     "glob": "^10.2.7",
     "js-beautify": "^1.14.8",
     "node-fetch": "^3.3.1"

diff --git a/setup.py b/setup.py
@@ -5,7 +5,7 @@
 
 setuptools.setup(
     name="tna-frontend-jinja",
-    version="0.2.14",
+    version="0.2.15",
     author="Andrew Hosgood",
     author_email="[email protected]",
     description="TNA Frontend Jinja templates",

diff --git a/tna_frontend_jinja/templates/components/button/macro.html b/tna_frontend_jinja/templates/components/button/macro.html
@@ -25,6 +25,10 @@
   {% elif params.iconSvg -%}
   {{ params.iconSvg | safe }}
   {% endif -%}
+  {% if params.html -%}
+  {{ params.html | safe }}
+  {% else -%}
   {{ params.text }}
+  {% endif -%}
 </{{ 'button' if params.buttonElement else 'a' }}>
 {% endmacro %}
diff --git a/tna_frontend_jinja/templates/components/files-list/macro.html b/tna_frontend_jinja/templates/components/files-list/macro.html
@@ -10,7 +10,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">
@@ -25,7 +25,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/tna_frontend_jinja/templates/components/footer/macro.html b/tna_frontend_jinja/templates/components/footer/macro.html
@@ -79,7 +79,7 @@ <h3 class="tna-!--visually-hidden">Follow us</h3>
             <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/tna_frontend_jinja/templates/components/gallery/macro.html b/tna_frontend_jinja/templates/components/gallery/macro.html
@@ -19,7 +19,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,
@@ -52,7 +52,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">
@@ -81,9 +81,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>

diff --git a/tna_frontend_jinja/templates/components/global-header/macro.html b/tna_frontend_jinja/templates/components/global-header/macro.html
@@ -8,12 +8,11 @@
     <div class="tna-column tna-column--flex-1 tna-column--order-2">
       <span class="tna-global-header__logo-wrapper">
         {% if params.logo and params.logo.href -%}
-        <a href="{{ params.logo.href }}" class="tna-global-header__logo tna-global-header__logo--link" title="{%- if params.logo.title -%}{{ params.logo.title }}{%- else -%}The National Archives{%- if params.logo.strapline %} - {{ params.logo.strapline }}{%- endif -%}{%- endif -%}">
+        <a href="{{ params.logo.href }}" class="tna-global-header__logo tna-global-header__logo--link" title="{%- if params.logo.title -%}{{ params.logo.title }}{%- else -%}The National Archives{%- if params.logo.strapline %} - {{ params.logo.strapline }}{%- endif -%}{%- endif -%}" aria-label="{%- if params.logo.title -%}{{ params.logo.title }}{%- else -%}The National Archives{%- if params.logo.strapline %} - {{ params.logo.strapline }}{%- endif -%}{%- endif -%}">
         {%- else %}
         <span class="tna-global-header__logo">
         {%- endif %}
-          <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" class="tna-logo" viewBox="0 0 160 160" width="96" height="96">
-            <title>The National Archives</title>
+          <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" class="tna-logo" viewBox="0 0 160 160" width="96" height="96" aria-hidden="true">
             <path fill="transparent" d="M0 0h160v160H0z" class="tna-logo__background" />
             <g class="tna-logo__foreground" fill="currentColor">
               <path d="M1.9 107.2h156.3V158H1.9v-50.8zm0-52.7h156.3v50.8H1.9V54.5zm0-52.6h77.2v50.8H1.9V1.9zm79 0h77.2v50.8H80.9V1.9zm0-1.9H0v160h160V0H80.9z" />

diff --git a/tna_frontend_jinja/templates/components/header/macro.html b/tna_frontend_jinja/templates/components/header/macro.html
@@ -3,9 +3,12 @@
 <header class="tna-header {{ ' '.join(containerClasses) }}" data-module="tna-header" {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}{% if value != '' %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
   <div class="tna-container tna-header__contents">
     <div class="tna-column tna-header__logo">
-      <{%- if params.logo and params.logo.href -%}a href="{{ params.logo.href }}" class="tna-header__logo-contents tna-header__logo-contents--link" title="{%- if params.logo and params.logo.title -%}{{ params.logo.title }}{%- else -%}The National Archives{%- if params.logo and params.logo.strapline %} - {{ params.logo.strapline }}{%- endif -%}{%- endif -%}"{%- else -%}span class="tna-header__logo-contents"{%- endif -%}>
-        <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" class="tna-logo" viewBox="0 0 160 160" width="96" height="96">
-          <title>The National Archives</title>
+      {% if params.logo and params.logo.href -%}
+      <a href="{{ params.logo.href }}" class="tna-header__logo-contents tna-header__logo-contents--link" title="{%- if params.logo.title -%}{{ params.logo.title }}{%- else -%}The National Archives{%- if params.logo.strapline %} - {{ params.logo.strapline }}{%- endif -%}{%- endif -%}" aria-label="{%- if params.logo.title -%}{{ params.logo.title }}{%- else -%}The National Archives{%- if params.logo.strapline %} - {{ params.logo.strapline }}{%- endif -%}{%- endif -%}">
+      {%- else %}
+      <span class="tna-header__logo-contents">
+      {%- endif %}
+        <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" class="tna-logo" viewBox="0 0 160 160" width="96" height="96" aria-hidden="true">
           <path fill="transparent" d="M0 0h160v160H0z" class="tna-logo__background"/>
           <g class="tna-logo__foreground" fill="currentColor">
             <path d="M1.9 107.2h156.3V158H1.9v-50.8zm0-52.7h156.3v50.8H1.9V54.5zm0-52.6h77.2v50.8H1.9V1.9zm79 0h77.2v50.8H80.9V1.9zm0-1.9H0v160h160V0H80.9z"/>
@@ -15,7 +18,11 @@
         {%- if params.logo and params.logo.strapline -%}
         <span class="tna-header__logo-strapline">{{ params.logo.strapline }}</span>
         {%- endif -%}
-      </{%- if params.logo and params.logo.href -%}a{%- else -%}span{%- endif -%}>
+      {%- if params.logo and params.logo.href %}
+      </a>
+      {%- else %}
+      </span>
+      {%- endif %}
     </div>
     {%- if params.navigation or params.topNavigation -%}
     <div class="tna-column tna-header__navigation-button-wrapper">

diff --git a/tna_frontend_jinja/templates/components/hero/macro.html b/tna_frontend_jinja/templates/components/hero/macro.html
@@ -73,7 +73,8 @@
     {%- if params.imageCaption -%}
     <figcaption class="tna-hero__caption">
       <details class="tna-hero__details">
-        <summary class="tna-hero__details-summary">
+        <summary class="tna-hero__details-summary" aria-label="Additional information
+        about the featured image">
           About this <span class="tna-hero__details-summary-icon">i</span>mage
         </summary>
         <div class="tna-hero__information">