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 }} -{{ 'button' if params.buttonElement else 'a' }}> \ No newline at end of file + {% endif -%} +{{ 'button' if params.buttonElement else 'a' }}> 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": "
The principles according to which The National Archives will preserve and care for our archival collections.
The principles according to which The National Archives will preserve and care for our archival collections.
The principles according to which The National Archives will preserve and care for our archival collections.
The principles according to which The National Archives will preserve and care for our archival collections.
The principles according to which The National Archives will preserve and care for our archival collections.
The principles according to which The National Archives will preserve and care for our archival collections.
The principles according to which The National Archives will preserve and care for our archival collections.
The principles according to which The National Archives will preserve and care for our archival collections.
The principles according to which The National Archives will preserve and care for our archival collections.
The principles according to which The National Archives will preserve and care for our archival collections.
Image {{ loop.index }} of {{ params.items | length }}