Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feedback component accessibility fix #3930

Draft
wants to merge 8 commits into
base: main
Choose a base branch
from

Conversation

JamesCGDS
Copy link
Contributor

What

This PR fixes an accessibility issue with the buttons on the feedback component and how aria-expanded is working. In essence, the No and Report a problem with this page buttons that open the feedback forms and the Cancel buttons that close them work in unexpected ways.

For example, the aria-expanded attributes on the No and Report a problem with this page do toggle correctly however the buttons disappear on click i.e. they only handle expanding the forms, not collapsing them. A separate Cancel button handles collapsing the forms, which also disappears on click and its aria-expanded is only ever set to true.

Ideally, expanding and collapsing the feedback forms would be handled by a single button that shows at all times.

Therefore, this PR proposes to remove the Cancel button and moves towards using a single button. This change does mean that some of the visual updates introduced in this PR (specifically the position of the buttons) will be reverted to how they were before. This has been discussed with and approved by the interaction designer that worked on the feedback component at the time.

Why

Fixes an accessibility issue identified as part of a WCAG audit - trello card

Visual Changes

Before

Clicking the No button (desktop):

image

Clicking the No button (mobile):

image

Clicking the Report a problem with this page button (desktop):

image

Clicking the Report a problem with this page button (mobile):

image

After

Clicking the No button (desktop):

image

Clicking the No button (mobile):

image

Clicking the Report a problem with this page button (desktop):

image

Clicking the Report a problem with this page button (mobile):

image

@govuk-ci govuk-ci temporarily deployed to components-gem-pr-3930 March 18, 2024 14:15 Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants