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

✨ [#483] add description to selectboxes and radio option #658

Closed
wants to merge 1 commit into from

Conversation

nikkiysendoorn1
Copy link
Contributor

No description provided.

Copy link

codecov bot commented Mar 11, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 69.36%. Comparing base (c73fa85) to head (85e5f1e).

Additional details and impacted files
@@            Coverage Diff             @@
##             main     #658      +/-   ##
==========================================
- Coverage   69.78%   69.36%   -0.42%     
==========================================
  Files         207      207              
  Lines        4335     4335              
  Branches     1155     1155              
==========================================
- Hits         3025     3007      -18     
- Misses       1310     1328      +18     

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

@nikkiysendoorn1 nikkiysendoorn1 force-pushed the future/483-description-per-option branch 2 times, most recently from d8263d5 to 2f7684e Compare March 11, 2024 14:55
Comment on lines +25 to +31
{% if (item.description) { %}
<div class="utrecht-description utrecht-form-description--openforms">
<p class="utrecht-form-field-description utrecht-form-field__description">
{{ item.description }}
</p>
</div>
{% } %}
Copy link
Member

Choose a reason for hiding this comment

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

I'm missing the aria-describedby on the inputs & the IDs on this element.

Additionally, I don't think the utrecht-form-field__description being nested makes it properly targettable with the CSS grid grid-area directives, so I'm not sure about how correct this markup is 🤔

Looking at https://nl-design-system.github.io/utrecht/storybook/?path=/story/css-form-field-radio-group--description, the markup seems to be:

<div class="utrecht-form-field-description utrecht-form-field__description"> {{ item.description }} </div>

which works well with their grid layout.

@nikkiysendoorn1 nikkiysendoorn1 force-pushed the future/483-description-per-option branch from 2f7684e to 85e5f1e Compare March 18, 2024 11:40
@nikkiysendoorn1 nikkiysendoorn1 deleted the future/483-description-per-option branch March 18, 2024 12:55
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.

Use description per option in selectboxes and radio components
2 participants