fix: rely on Form.Control and controlId in Form.Group

[adamstankiewicz]

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:

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.

[netlify]

✅ 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... Use your smartphone camera to open QR code link.

---

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

[brian-smith-tcril]

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

[adamstankiewicz]

@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.

[brian-smith-tcril]

LGTM!

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

[codecov]

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.

[openedx-semantic-release-bot]

🎉 This PR is included in version 21.13.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀