-
Notifications
You must be signed in to change notification settings - Fork 4
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: [Table] Pagination input label's 'for' property needs to align with the input id #356
Conversation
✅ Deploy Preview for cfpb-design-system-react ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
- Uniquely identify pagination <input> elements - Correctly associate pagination <input> labels with the input id
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
5956806
to
281e57e
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
One more change and should be good to go.
Provided context that I believe addresses the expressed concern.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM!
Close #568 ## Changes - [Accessibility] Fix labelling issue in DSR Table/Pagination - Dependent upon cfpb/design-system-react#356 - `Upload a new file` now a secondary button ([should be a link but I couldn't get the styling overrides to play nice with one another](#575)) - Update primary button label: `Download Report (CSV)` - Remove green header border on Filing pages ## Screenshots |Change|Screenshot| |---|---| |Button label (Warnings)|<img width="739" alt="Screenshot 2024-05-31 at 4 04 11 PM" src="https://github.com/cfpb/sbl-frontend/assets/2592907/be87effb-1174-446a-89e8-44433b0a1c71">| |Button label (Errors)|<img width="767" alt="Screenshot 2024-05-31 at 4 09 02 PM" src="https://github.com/cfpb/sbl-frontend/assets/2592907/a5b4b6d1-f4c7-4be5-8ada-5f9d596026ea">| |Remove green header border on filing|<img width="1230" alt="Screenshot 2024-06-03 at 9 54 54 AM" src="https://github.com/cfpb/sbl-frontend/assets/2592907/e404f67b-3ff6-46a6-825f-fab60e574260">| |Accessibility for pagination: input's `for` label aligns with table id|<img width="974" alt="Screenshot 2024-06-03 at 9 53 03 AM" src="https://github.com/cfpb/sbl-frontend/assets/2592907/35732b11-95ac-4627-a12e-00331896848b">| --------- Co-authored-by: Bill Himmelsbach <[email protected]>
Accessibility improvement
Changes
tableId
to uniquely identify and label Pagination's input elementHow to test this PR
Element nested in <label> but label[for=m-pagination_current-page] does not match element [id=m-pagination_current-page-default
Screenshots