diff --git a/CHANGELOG.md b/CHANGELOG.md index 329acc21..ade4b9e6 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.11...HEAD) ### Added + +- Items in a file list now require an ID so that an `aria-describedby` attribute can be used to describe the file details + ### Changed - Updated default text on cookie banner hide buttons diff --git a/src/nationalarchives/components/files-list/files-list.scss b/src/nationalarchives/components/files-list/files-list.scss index 3d43f695..a6185559 100644 --- a/src/nationalarchives/components/files-list/files-list.scss +++ b/src/nationalarchives/components/files-list/files-list.scss @@ -45,6 +45,9 @@ &__item-title { } + &__item-body { + } + &__item-meta { margin-top: 0; } diff --git a/src/nationalarchives/components/files-list/files-list.stories.js b/src/nationalarchives/components/files-list/files-list.stories.js index c86c82d5..e4eb2640 100644 --- a/src/nationalarchives/components/files-list/files-list.stories.js +++ b/src/nationalarchives/components/files-list/files-list.stories.js @@ -28,6 +28,7 @@ export const Default = Template.bind({}); Default.args = { items: [ { + id: "file-1", text: "Preservation policy part 1", href: "#", fileType: "PDF", @@ -37,6 +38,7 @@ Default.args = { "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: "#", fileType: "PDF", @@ -45,6 +47,7 @@ Default.args = { "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: "#", fileType: "PDF", diff --git a/src/nationalarchives/components/files-list/fixtures.json b/src/nationalarchives/components/files-list/fixtures.json index bb3a72a2..81382634 100644 --- a/src/nationalarchives/components/files-list/fixtures.json +++ b/src/nationalarchives/components/files-list/fixtures.json @@ -7,6 +7,7 @@ "itemHeadingLevel": 3, "items": [ { + "id": "file-1", "text": "Preservation policy part 1", "href": "#", "file_type": "PDF", @@ -15,6 +16,7 @@ "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", @@ -22,6 +24,7 @@ "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", @@ -30,7 +33,7 @@ } ] }, - "html": "
" + "html": "
" }, { "name": "with classes", @@ -38,6 +41,7 @@ "itemHeadingLevel": 3, "items": [ { + "id": "file-1", "text": "Preservation policy part 1", "href": "#", "file_type": "PDF", @@ -48,7 +52,7 @@ ], "classes": "files__test-class" }, - "html": "
" + "html": "
" }, { "name": "with attributes", @@ -56,6 +60,7 @@ "itemHeadingLevel": 3, "items": [ { + "id": "file-1", "text": "Preservation policy part 1", "href": "#", "file_type": "PDF", @@ -68,7 +73,7 @@ "data-testattribute": "foobar" } }, - "html": "
" + "html": "
" } ] } diff --git a/src/nationalarchives/components/files-list/macro-options.json b/src/nationalarchives/components/files-list/macro-options.json index db7e63ab..76da087a 100644 --- a/src/nationalarchives/components/files-list/macro-options.json +++ b/src/nationalarchives/components/files-list/macro-options.json @@ -11,6 +11,12 @@ "required": true, "description": "", "params": [ + { + "name": "id", + "type": "string", + "required": true, + "description": "" + }, { "name": "title", "type": "string", diff --git a/src/nationalarchives/components/files-list/template.njk b/src/nationalarchives/components/files-list/template.njk index 1ef1edd2..4fbddb3a 100644 --- a/src/nationalarchives/components/files-list/template.njk +++ b/src/nationalarchives/components/files-list/template.njk @@ -6,27 +6,29 @@ {%- for item in params.items %}
  • - {{ item.text }} + {{ item.text }} -
    -
    File type
    -
    - {{ item.fileType }} -
    -
    File size
    -
    - {{ item.fileSize }} -
    - {%- if item.fileExtent %} -
    Extent
    -
    - {{ item.fileExtent }} -
    +
    +
    +
    File type
    +
    + {{ item.fileType }} +
    +
    File size
    +
    + {{ item.fileSize }} +
    + {%- if item.fileExtent %} +
    Extent
    +
    + {{ item.fileExtent }} +
    + {%- endif %} +
    + {%- if item.description %} +

    {{ item.description }}

    {%- endif %} -
    - {%- if item.description %} -

    {{ item.description }}

    - {%- endif %} +
  • {%- endfor %}