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: rely on Form.Control and controlId in Form.Group #2931

Merged
merged 2 commits into from
Jan 11, 2024

Conversation

adamstankiewicz
Copy link
Member

@adamstankiewicz adamstankiewicz commented Dec 14, 2023

Description

Resolves https://2u-internal.atlassian.net/browse/TNL-11258.

There was a bug where the FormLabel in DataTable's TextFilter was including a for attribute pointing to an ID that does not exist in the DOM (throws an a11y error).

By instead passing ariaLabel.current to <Form.Group> as its controlId prop, we can ensure that all form component within the Form.Group rely on a consistent ID. However, previously, we were using the deprecated Input instead of Form.Control, so the appropriate id was not automatically applied to the input field in the DOM.

Resolution:

  • Pass controlId to Form.Group
  • Replace FormLabel with Form.Label.
  • Replace Input with Form.Control.

In the following image, not that the <label>'s for attribute now refers to the input with the appropriate, identical id:

image

Deploy Preview

https://deploy-preview-2931--paragon-openedx.netlify.app/components/datatable/#frontend-filtering-and-sorting

Merge Checklist

  • If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
  • Does your change adhere to the documented style conventions?
  • Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
  • Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
  • Were your changes tested in the example app?
  • Is there adequate test coverage for your changes?
  • Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please add wittjeff and adamstankiewicz as reviewers on this PR.

Post-merge Checklist

  • Verify your changes were released to NPM at the expected version.
  • If you'd like, share your contribution in #show-and-tell.
  • 🎉 🙌 Celebrate! Thanks for your contribution.

Copy link

netlify bot commented Dec 14, 2023

Deploy Preview for paragon-openedx ready!

Name Link
🔨 Latest commit 28926b9
🔍 Latest deploy log https://app.netlify.com/sites/paragon-openedx/deploys/65a00a2045bfe70008319599
😎 Deploy Preview https://deploy-preview-2931--paragon-openedx.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@adamstankiewicz adamstankiewicz added the bug Report of or fix for something that isn't working as intended label Dec 14, 2023
@brian-smith-tcril
Copy link
Contributor

@adamstankiewicz now that #2951 has been merged this should pass tests after a rebase.

@adamstankiewicz adamstankiewicz force-pushed the ags/resolve-a11y-datatable-textfilter branch from 5bd9772 to 082845e Compare January 5, 2024 19:58
@adamstankiewicz
Copy link
Member Author

adamstankiewicz commented Jan 5, 2024

@adamstankiewicz now that #2951 has been merged this should pass tests after a rebase.

@brian-smith-tcril Thanks for the ping! I've rebased with master, and will wait for CI to finish/pass. PR already has a thumb from Peter; did you also want to review/approve before merge?

Edit: failed again. Will take a look in a bit.

Copy link
Contributor

@brian-smith-tcril brian-smith-tcril left a comment

Choose a reason for hiding this comment

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

LGTM!

Looks like the only issues here are a couple tiny linter errors around imports. Once those are resolved :shipit:

@adamstankiewicz adamstankiewicz force-pushed the ags/resolve-a11y-datatable-textfilter branch from 082845e to 28926b9 Compare January 11, 2024 15:32
Copy link

codecov bot commented Jan 11, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (35bfa7d) 93.00% compared to head (28926b9) 93.00%.

Additional details and impacted files
@@           Coverage Diff           @@
##           master    #2931   +/-   ##
=======================================
  Coverage   93.00%   93.00%           
=======================================
  Files         236      236           
  Lines        4273     4273           
  Branches     1033     1033           
=======================================
  Hits         3974     3974           
  Misses        295      295           
  Partials        4        4           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@adamstankiewicz adamstankiewicz merged commit b858230 into master Jan 11, 2024
10 checks passed
@adamstankiewicz adamstankiewicz deleted the ags/resolve-a11y-datatable-textfilter branch January 11, 2024 15:44
@openedx-semantic-release-bot

🎉 This PR is included in version 21.13.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Report of or fix for something that isn't working as intended released
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

4 participants