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

Required indicator on radio-group, select, combobox, and text-area #2496

Draft
wants to merge 16 commits into
base: main
Choose a base branch
from

Conversation

mollykreis
Copy link
Contributor

@mollykreis mollykreis commented Dec 12, 2024

Pull Request

🤨 Rationale

Add required-visible attributes to the radio-group, select, combobox, and text-area components as part of #2100.

There is still a need to add this attribute to the text-field and number-field. That will be done once the templates for those components have been forked (#2495).

👩‍💻 Implementation

Within the patterns directory, I created a mixin that can be used on elements that should have a requiredVisible property and required-visible attribute. Additionally, shared styling was added for the requiredVisible state and a function was created to generate the template for an element's label. This is a function rather than a constant template because each element already had an existing label structure that I didn't want to change as part of this PR.

The template of each element included in this PR was also updated to set aria-required based on the value of requiredVisible.

I also updated the styling of icons to make the svg display: block because this solved a problem I encountered when shrinking the asterisk icon down to 5x5.

🧪 Testing

  • Manually tested
  • New matrix tests
  • Unit tests for the new mixin
  • New unit tests for the ARIA behavior of each element

✅ Checklist

  • I have updated the project documentation to reflect my changes or determined no changes are needed.

@mollykreis
Copy link
Contributor Author

@msmithNI - will you buddy this PR for me?

@mollykreis mollykreis requested a review from msmithNI December 12, 2024 20:49
@mollykreis mollykreis changed the title Required indicator Required indicator on radio-group, select, combobox, and text-area Dec 12, 2024
@fredvisser
Copy link
Contributor

Looks like nodejs/node#56127 highlights the build issue we have here.

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.

3 participants