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

fix(a11y): ResultReason tabindex order #2941

Merged
merged 3 commits into from
Apr 2, 2024
Merged

Conversation

DafyddLlyr
Copy link
Contributor

@DafyddLlyr DafyddLlyr commented Mar 28, 2024

Problem

image

Solution

  • Restructure DOM so the order of elements is correct (move change button to come "after" accordion)
  • Use useRef() and useLayoutEffect() hooks to maintain consistent style - change button remains in same location

Demo

Screen.Recording.2024-03-28.at.16.29.07.mov

🧪 Test flow: https://2941.planx.pizza/testing/result-tab-index-order/amber

Also...

There were a few lines controlling the logic around expanded and onChange which are redundant - the MUI accordion has this as the default behaviour anyway, so I've removed this.

- This is just matching the default behaviour of the MUI accordion
@DafyddLlyr
Copy link
Contributor Author

Order of components [A]

Copy link

github-actions bot commented Mar 28, 2024

Removed vultr server and associated DNS entries

@DafyddLlyr DafyddLlyr changed the title fix(a11y): ResultReason tabindex order fix(a11y): ResultReason tabindex order Mar 28, 2024
@DafyddLlyr DafyddLlyr marked this pull request as ready for review March 28, 2024 16:32
@DafyddLlyr DafyddLlyr requested a review from a team March 28, 2024 16:32
Copy link
Contributor

@ianjon3s ianjon3s left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a really strong solution. I had attempted to reorder the components as a quick solution and had identified the need to inherit the height to prevent the chevron shifting on expand. In the jQuery days this would be injected after the html render (not ideal), good to see the powers of React rendering used here.

@DafyddLlyr DafyddLlyr merged commit d3c5da2 into main Apr 2, 2024
12 checks passed
@DafyddLlyr DafyddLlyr deleted the dp/result-reason-order branch April 2, 2024 11:25
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