From 4f2eea4792dead66d203b779f597a719232987d1 Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Mon, 7 Oct 2024 12:05:19 +0100 Subject: [PATCH] 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 --- CHANGELOG.md | 9 +++ .../components/button/button-group.stories.js | 7 +++ .../components/button/button.stories.js | 3 + .../components/button/fixtures.json | 8 +++ .../components/button/macro-options.json | 8 ++- .../components/button/template.njk | 6 +- .../components/details/details.scss | 3 +- .../components/files-list/fixtures.json | 42 +++++++------- .../components/files-list/template.njk | 4 +- .../components/footer/fixtures.json | 2 +- .../components/footer/template.njk | 2 +- .../components/gallery/fixtures.json | 4 +- .../components/gallery/gallery.mjs | 57 +++++++++++-------- .../components/gallery/gallery.scss | 5 +- .../components/gallery/template.njk | 8 +-- .../components/global-header/fixtures.json | 14 ++--- .../components/global-header/template.njk | 5 +- .../components/header/fixtures.json | 2 +- .../components/header/template.njk | 15 +++-- .../components/hero/fixtures.json | 14 ++--- .../components/hero/template.njk | 3 +- src/nationalarchives/templates/fixtures.json | 10 ++-- 22 files changed, 143 insertions(+), 88 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2bdfbcc3..c2dfc38e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,9 @@ 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 @@ -15,6 +18,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - 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 index c11ff8b5..389114c6 100644 --- 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: "HTML", + 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 index 130a5e86..25a026e7 100644 --- 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 index c4f35b23..aac6fb0c 100644 --- a/src/nationalarchives/components/button/fixtures.json +++ b/src/nationalarchives/components/button/fixtures.json @@ -9,6 +9,14 @@ }, "html": "Log in" }, + { + "name": "with html", + "options": { + "html": "Log in", + "href": "#" + }, + "html": "Log in" + }, { "name": "with title", "options": { diff --git a/src/nationalarchives/components/button/macro-options.json b/src/nationalarchives/components/button/macro-options.json index 6a59c2ad..62af140b 100644 --- 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 index f3b415c4..88dc1dad 100644 --- 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 }} - \ No newline at end of file + {% endif -%} + diff --git a/src/nationalarchives/components/details/details.scss b/src/nationalarchives/components/details/details.scss index cd1c2a1e..f601252f 100644 --- 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 index be338592..6aba1c75 100644 --- a/src/nationalarchives/components/files-list/fixtures.json +++ b/src/nationalarchives/components/files-list/fixtures.json @@ -10,30 +10,30 @@ "id": "file-1", "text": "Preservation policy part 1", "href": "#", - "file_type": "PDF", - "file_size": "1.7MB", - "file_extent": "120 pages", + "fileType": "PDF", + "fileSize": "1.7MB", + "fileExtent": "120 pages", "description": "The principles according to which The National Archives will preserve and care for our archival collections." }, { "id": "file-2", "text": "Preservation policy part 2", "href": "#", - "file_type": "PDF", - "file_size": "0.9MB", + "fileType": "PDF", + "fileSize": "0.9MB", "description": "The principles according to which The National Archives will preserve and care for our archival collections." }, { "id": "file-3", "text": "Preservation policy part 3", "href": "#", - "file_type": "PDF", - "file_size": "3MB", - "file_extent": "200 pages" + "fileType": "PDF", + "fileSize": "3MB", + "fileExtent": "200 pages" } ] }, - "html": "
" + "html": "
" }, { "name": "fully clickable", @@ -44,15 +44,15 @@ "id": "file-1", "text": "Preservation policy part 1", "href": "#", - "file_type": "PDF", - "file_size": "1.7MB", - "file_extent": "120 pages", + "fileType": "PDF", + "fileSize": "1.7MB", + "fileExtent": "120 pages", "description": "The principles according to which The National Archives will preserve and care for our archival collections." } ], "fullAreaClick": true }, - "html": "
" + "html": "
" }, { "name": "with classes", @@ -63,15 +63,15 @@ "id": "file-1", "text": "Preservation policy part 1", "href": "#", - "file_type": "PDF", - "file_size": "1.7MB", - "file_extent": "120 pages", + "fileType": "PDF", + "fileSize": "1.7MB", + "fileExtent": "120 pages", "description": "The principles according to which The National Archives will preserve and care for our archival collections." } ], "classes": "files__test-class" }, - "html": "
" + "html": "
" }, { "name": "with attributes", @@ -82,9 +82,9 @@ "id": "file-1", "text": "Preservation policy part 1", "href": "#", - "file_type": "PDF", - "file_size": "1.7MB", - "file_extent": "120 pages", + "fileType": "PDF", + "fileSize": "1.7MB", + "fileExtent": "120 pages", "description": "The principles according to which The National Archives will preserve and care for our archival collections." } ], @@ -92,7 +92,7 @@ "data-testattribute": "foobar" } }, - "html": "
" + "html": "
" } ] } diff --git a/src/nationalarchives/components/files-list/template.njk b/src/nationalarchives/components/files-list/template.njk index 29a1d3db..e45f84fd 100644 --- 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 %}
  • - {{ item.text }} + {{ item.text }} ({{ item.fileType }}, {{ item.fileSize }})
    @@ -24,7 +24,7 @@ {%- if item.fileExtent %}
    Extent
    - {{ item.fileExtent }} + {{ item.fileExtent }}
    {%- endif %}
    diff --git a/src/nationalarchives/components/footer/fixtures.json b/src/nationalarchives/components/footer/fixtures.json index 192e9715..ace8118d 100644 --- a/src/nationalarchives/components/footer/fixtures.json +++ b/src/nationalarchives/components/footer/fixtures.json @@ -142,7 +142,7 @@ } ] }, - "html": "" + "html": "" }, { "name": "with theme selector", diff --git a/src/nationalarchives/components/footer/template.njk b/src/nationalarchives/components/footer/template.njk index e2e7f176..4d899e54 100644 --- a/src/nationalarchives/components/footer/template.njk +++ b/src/nationalarchives/components/footer/template.njk @@ -81,7 +81,7 @@
    " + "html": "
    " }, { "name": "with no logo link", @@ -65,7 +65,7 @@ } ] }, - "html": "
    The National Archives
    " + "html": "
    " }, { "name": "with no top navigation", @@ -88,7 +88,7 @@ } ] }, - "html": "
    " + "html": "
    " }, { "name": "with navigationId", @@ -124,7 +124,7 @@ ], "navigationId": "test-navigation-id" }, - "html": "
    " + "html": "
    " }, { "name": "with topNavigationId", @@ -160,7 +160,7 @@ ], "topNavigationId": "test-top-navigation-id" }, - "html": "
    " + "html": "
    " }, { "name": "with classes", @@ -196,7 +196,7 @@ ], "classes": "card__test-class" }, - "html": "
    " + "html": "
    " }, { "name": "with attributes", @@ -234,7 +234,7 @@ "data-testattribute": "foobar" } }, - "html": "
    " + "html": "
    " } ] } diff --git a/src/nationalarchives/components/global-header/template.njk b/src/nationalarchives/components/global-header/template.njk index d09d9329..d0fc5dc6 100644 --- a/src/nationalarchives/components/global-header/template.njk +++ b/src/nationalarchives/components/global-header/template.njk @@ -8,12 +8,11 @@
    {% if params.logo.href -%} -
    The National ArchivesBeta
    " + "html": "
    Beta
    " } ] } diff --git a/src/nationalarchives/components/header/template.njk b/src/nationalarchives/components/header/template.njk index 74e2fbff..cbc8facb 100644 --- a/src/nationalarchives/components/header/template.njk +++ b/src/nationalarchives/components/header/template.njk @@ -6,9 +6,12 @@
    {%- if params.navigation or params.topNavigation %}
    diff --git a/src/nationalarchives/components/hero/fixtures.json b/src/nationalarchives/components/hero/fixtures.json index ea945368..c1e19825 100644 --- a/src/nationalarchives/components/hero/fixtures.json +++ b/src/nationalarchives/components/hero/fixtures.json @@ -195,7 +195,7 @@ "imageHeight": 333, "imageCaption": "An interesting photo by a famous photographer ©2023" }, - "html": "

    Title

    \"The
    About this image
    An interesting photo by a famous photographer ©2023
    " + "html": "

    Title

    \"The
    About this image
    An interesting photo by a famous photographer ©2023
    " }, { "name": "image with caption", @@ -206,7 +206,7 @@ "imageHeight": 333, "imageCaption": "An interesting photo by a famous photographer ©2023" }, - "html": "
    \"The
    About this image
    An interesting photo by a famous photographer ©2023
    " + "html": "
    \"The
    About this image
    An interesting photo by a famous photographer ©2023
    " }, { "name": "with alternative image sources", @@ -223,7 +223,7 @@ } ] }, - "html": "
    \"The
    About this image
    An interesting photo by a famous photographer ©2023
    " + "html": "
    \"The
    About this image
    An interesting photo by a famous photographer ©2023
    " }, { "name": "with alternative image sources with media queries", @@ -241,7 +241,7 @@ } ] }, - "html": "
    \"The
    About this image
    An interesting photo by a famous photographer ©2023
    " + "html": "
    \"The
    About this image
    An interesting photo by a famous photographer ©2023
    " }, { "name": "with alternative image sources with different width/heights", @@ -260,7 +260,7 @@ } ] }, - "html": "
    \"The
    About this image
    An interesting photo by a famous photographer ©2023
    " + "html": "
    \"The
    About this image
    An interesting photo by a famous photographer ©2023
    " }, { "name": "with actions", @@ -302,7 +302,7 @@ "imageCaption": "An interesting photo by a famous photographer ©2023", "classes": "hero__test-class" }, - "html": "
    \"The
    About this image
    An interesting photo by a famous photographer ©2023
    " + "html": "
    \"The
    About this image
    An interesting photo by a famous photographer ©2023
    " }, { "name": "with attributes", @@ -316,7 +316,7 @@ "data-testattribute": "foobar" } }, - "html": "
    \"The
    About this image
    An interesting photo by a famous photographer ©2023
    " + "html": "
    \"The
    About this image
    An interesting photo by a famous photographer ©2023
    " } ] } diff --git a/src/nationalarchives/components/hero/template.njk b/src/nationalarchives/components/hero/template.njk index 2f279040..3a16c07f 100644 --- a/src/nationalarchives/components/hero/template.njk +++ b/src/nationalarchives/components/hero/template.njk @@ -73,7 +73,8 @@ {%- if params.imageCaption %}
    - + About this image
    {{ params.imageCaption | safe }}
    diff --git a/src/nationalarchives/templates/fixtures.json b/src/nationalarchives/templates/fixtures.json index 8a409b58..de6f6fc3 100644 --- a/src/nationalarchives/templates/fixtures.json +++ b/src/nationalarchives/templates/fixtures.json @@ -4,7 +4,7 @@ "name": "generic", "template": "layouts/_generic.njk", "options": {}, - "html": "The National ArchivesSkip to main content
    The National Archives
    " + "html": "The National ArchivesSkip to main content
    " }, { "name": "generic with custom settings", @@ -27,25 +27,25 @@ }, "mainClasses": "tna-template__main--custom" }, - "html": "My Page - My SiteSkip to main content
    The National Archives
    " + "html": "My Page - My SiteSkip to main content
    " }, { "name": "plain", "template": "plain.njk", "options": {}, - "html": "Plain page - The National ArchivesSkip to main content
    The National Archives

    Plain page

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at magna est. Sed vel fermentum arcu. Suspendisse viverra est nec interdum tincidunt. Phasellus dictum, turpis eget iaculis tincidunt, ex metus porttitor turpis, ut pulvinar risus erat quis dui. Nam semper sapien a ipsum congue pharetra.

    Donec cursus, eros eu egestas aliquam, ipsum ligula suscipit metus, eget maximus turpis nisl vitae ex. Etiam ornare convallis quam a consequat. Etiam sodales aliquet nulla, id rutrum justo accumsan sed.

    • Alpha
    • Beta
    • Gamma
    1. Alpha
    2. Beta
    3. Gamma
    Alpha
    Lorem ipsum
    Beta
    Lorem ipsum
    Gamma
    Lorem ipsum
    Delta
    Lorem ipsum
    Epsilon
    Lorem ipsum
    Records added and removed between 2020 and 2022.
    YearRecords addedRecords removed
    2020123,456789
    2021456,789123
    202242,4241,337
    Total622,6692,249
    " + "html": "Plain page - The National ArchivesSkip to main content

    Plain page

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at magna est. Sed vel fermentum arcu. Suspendisse viverra est nec interdum tincidunt. Phasellus dictum, turpis eget iaculis tincidunt, ex metus porttitor turpis, ut pulvinar risus erat quis dui. Nam semper sapien a ipsum congue pharetra.

    Donec cursus, eros eu egestas aliquam, ipsum ligula suscipit metus, eget maximus turpis nisl vitae ex. Etiam ornare convallis quam a consequat. Etiam sodales aliquet nulla, id rutrum justo accumsan sed.

    • Alpha
    • Beta
    • Gamma
    1. Alpha
    2. Beta
    3. Gamma
    Alpha
    Lorem ipsum
    Beta
    Lorem ipsum
    Gamma
    Lorem ipsum
    Delta
    Lorem ipsum
    Epsilon
    Lorem ipsum
    Records added and removed between 2020 and 2022.
    YearRecords addedRecords removed
    2020123,456789
    2021456,789123
    202242,4241,337
    Total622,6692,249
    " }, { "name": "list", "template": "list.njk", "options": {}, - "html": "List page - The National ArchivesSkip to main content
    The National Archives

    List page

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.

    " + "html": "List page - The National ArchivesSkip to main content

    List page

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.

    " }, { "name": "index grid", "template": "index-grid.njk", "options": {}, - "html": "Index list page - The National ArchivesSkip to main content
    The National Archives

    Index list page

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.

    " + "html": "Index list page - The National ArchivesSkip to main content

    Index list page

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.

    " } ] }