From e9310787ab69a8480adb3ab95181735b36f77bb6 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Tue, 18 Jun 2024 09:49:51 +0100 Subject: [PATCH] Document list fix dashes for screen readers - prevent screen readers from announcing the dash before document list child/part items, by changing the CSS pseudo element to use a border to show the dash, instead of a dash character --- CHANGELOG.md | 1 + .../components/_document-list.scss | 5 ++++- .../components/docs/document_list.yml | 1 + 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 89c6df402e..00ab8c32e1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ ## Unreleased +* Prevent screen readers from announcing document list child/parts items dashes ([PR #4066](https://github.com/alphagov/govuk_publishing_components/pull/4066)) * Align checkboxes component more toward Design System ([PR #4061](https://github.com/alphagov/govuk_publishing_components/pull/4061)) * Add govuk-frontend checking to the component auditing ([PR #4058](https://github.com/alphagov/govuk_publishing_components/pull/4058)) diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss b/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss index 17e4c85991..dffd7756fb 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss @@ -131,10 +131,13 @@ padding-top: govuk-spacing(2); &::before { - content: "—"; + content: ""; position: absolute; left: 0; + width: govuk-spacing(3); overflow: hidden; + border-top: solid 1px $govuk-text-colour; + transform: translate(0, 0.5em); } @include govuk-media-query($from: desktop) { diff --git a/app/views/govuk_publishing_components/components/docs/document_list.yml b/app/views/govuk_publishing_components/components/docs/document_list.yml index 3fd65758f6..b446a834ee 100644 --- a/app/views/govuk_publishing_components/components/docs/document_list.yml +++ b/app/views/govuk_publishing_components/components/docs/document_list.yml @@ -13,6 +13,7 @@ accessibility_criteria: | The component must: * inform the user how many items are in the list + * ensure dashes before each list item are hidden from screen readers shared_accessibility_criteria: - link uses_component_wrapper_helper: true