Skip to content

Commit

Permalink
Update changelog and add fix
Browse files Browse the repository at this point in the history
  • Loading branch information
edwardhorsford committed Sep 27, 2024
1 parent bc8020b commit 0c825e8
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 1 deletion.
18 changes: 18 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,23 @@
# NHS.UK frontend Changelog

## Unreleased

* Updates the error summary markup ([fixes #1035](https://github.com/nhsuk/nhsuk-frontend/issues/1035), [PR 1036](https://github.com/nhsuk/nhsuk-frontend/pull/1036))

### Recommended changes - error summary markup

#### Remove `aria-labelledby`, remove `id="error-summary-title"` from title and move `role="alert"` to child container on the error summary component

If you’re not using the Nunjucks macros, you can improve the experience for screen reader users by making these changes to the error summary markup:

- Remove `aria-labelledby="error-summary-title"` and `role="alert"` from the parent element (`nhsuk-error-summary`)
- Add a `div` wrapper around the contents of `nhsuk-error-summary` with the attribute `role="alert"`
- Remove `id="error-summary-title"` from the error summary `h2` (`nhsuk-error-summary__title`)

This will enable screen reader users to have a better, more coherent experience with the error summary. Most notably it will ensure that users of JAWS 2022 or later will hear the entire contents of the error summary on page load and therefore have further context on why there is an error on the page they’re on. It also prevents VoiceOver from announcing 'There is a problem' twice.

This was originally added in this [GOV.UK Frontend PR #2677](https://github.com/alphagov/govuk-frontend/pull/2677).

## 9.0.0 - 18 September 2024

:boom: **Breaking changes**
Expand Down
2 changes: 1 addition & 1 deletion packages/components/error-summary/template.njk
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
{# Keep the role="alert" in a seperate child container to prevent a race condition between
the focusing js at the alert, resulting in information getting missed in screen reader announcements #}
<div role="alert">
<h2 class="nhsuk-error-summary__title" id="error-summary-title">
<h2 class="nhsuk-error-summary__title">
{{ params.titleHtml | safe if params.titleHtml else params.titleText }}
</h2>
<div class="nhsuk-error-summary__body">
Expand Down

0 comments on commit 0c825e8

Please sign in to comment.