Feedback component accessibility fix #3930
Draft
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What
This PR fixes an accessibility issue with the buttons on the feedback component and how
aria-expanded
is working. In essence, theNo
andReport a problem with this page
buttons that open the feedback forms and theCancel
buttons that close them work in unexpected ways.For example, the
aria-expanded
attributes on theNo
andReport 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 separateCancel
button handles collapsing the forms, which also disappears on click and itsaria-expanded
is only ever set totrue
.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):Clicking the
No
button (mobile):Clicking the
Report a problem with this page
button (desktop):Clicking the
Report a problem with this page
button (mobile):After
Clicking the
No
button (desktop):Clicking the
No
button (mobile):Clicking the
Report a problem with this page
button (desktop):Clicking the
Report a problem with this page
button (mobile):