Skip to content

Commit

Permalink
Document list fix dashes for screen readers
Browse files Browse the repository at this point in the history
- 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
  • Loading branch information
andysellick committed Jun 18, 2024
1 parent eec6009 commit 19a5f8d
Show file tree
Hide file tree
Showing 3 changed files with 8 additions and 3 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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))

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,10 @@ body: |
* a last updated date object
* a document type
accessibility_criteria: |
The component must:
The component:
* inform the user how many items are in the list
* 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
Expand Down

0 comments on commit 19a5f8d

Please sign in to comment.