Feedback component accessibility fix #3930
Draft
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This is to prevent trackEvent from running too early as toggleForms now amends data attributes on expansion/collapse
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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-expandedis working. In essence, theNoandReport a problem with this pagebuttons that open the feedback forms and theCancelbuttons that close them work in unexpected ways.For example, the
aria-expandedattributes on theNoandReport a problem with this pagedo toggle correctly however the buttons disappear on click i.e. they only handle expanding the forms, not collapsing them. A separateCancelbutton handles collapsing the forms, which also disappears on click and itsaria-expandedis 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
Cancelbutton 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
Nobutton (desktop):Clicking the
Nobutton (mobile):Clicking the
Report a problem with this pagebutton (desktop):Clicking the
Report a problem with this pagebutton (mobile):After
Clicking the
Nobutton (desktop):Clicking the
Nobutton (mobile):Clicking the
Report a problem with this pagebutton (desktop):Clicking the
Report a problem with this pagebutton (mobile):