Fix(web-twig): Pass missing id attributes to the form components
#1465
Conversation
dlouhak
requested review from
literat,
adamkudrna,
crishpeen,
pavelklibani and
a team
as code owners
✅ Deploy Preview for spirit-design-system-storybook canceled.
|
✅ Deploy Preview for spirit-design-system ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| helperText="{{ _helperText }}" | ||
| id="{{ 'item-helper-text' }}" |
There was a problem hiding this comment.
Temporary state. I know we shouldn't use same ID on the page more than once…
I'm not sure how to handle passing id if the component Item doesn't accept one. Use label in the kebab-case syntax, or extend API?
There was a problem hiding this comment.
I have tried to do this the same way as in all other components, but since the is is not mandatory it is hard to say. Maybe the easiest way to fix this is just to set id as required for the Item component.
There was a problem hiding this comment.
I made the ValidationText and HelperText optional, so this is no longer needed. See #1470
dlouhak
changed the title
id attributes to the form componentsid attributes to the form components
| @@ -12,10 +12,10 @@ | |||
| <!-- Render checked --> | |||
| <label for="example-id-checked" class="Checkbox"><input type="checkbox" id="example-id-checked" class="Checkbox__input" checked> <span class="Checkbox__text"><span class="Checkbox__label">Example | |||
| label</span></span></label> <!-- Render with helper text --> | |||
| <label for="example-id-helper" class="Checkbox"><input type="checkbox" id="example-id-helper" class="Checkbox__input"> <span class="Checkbox__text"><span class="Checkbox__label">Example label</span> <span class="Checkbox__helperText">Example helper text</span></span></label> <!-- Render with hidden label --> | |||
| <label for="example-id-helper" class="Checkbox"><input type="checkbox" id="example-id-helper" class="Checkbox__input"> <span class="Checkbox__text"><span class="Checkbox__label">Example label</span> <span class="Checkbox__helperText" id="example-id-helper__helperText">Example helper text</span></span></label> | |||
There was a problem hiding this comment.
It looks like we are missing the aria attribute too. Afaik it should be aria-describedby. @adamkudrna
...web-twig/src/Resources/components/Item/__tests__/__snapshots__/itemHelperText.twig.snap.html
Show resolved
Hide resolved
|
I created a new PR #1470 to solve the issue because I took a slightly different approach. If we merge it, we can close this one. |
No description provided.