[R2] Form #163
[R2] Form #163
Conversation
|
To generate the Storybook and Docusaurus websites, write comment with:
To generate only Storybook write comment with:
To generate only Docusaurus write comment with:
|
|
@eea-jenkins build all |
|
@g-stamatis you still have this problem where the border changes color when the dropdown is visible and the cursor is outside of the dropdown area |
|
|
|
@eea-jenkins build storybook |
❌ Storybook build FAILEDCheck https://ci.eionet.europa.eu/job/volto-addons/job/volto-eea-design-system/job/PR-163/25/ for details |
…e export without label
|
Updates to fix accessibility issues. The list of changes will be logged to the form ticket: More updates or improvements (if needed) will be included in a new PR along with an example of a full form. |
|
@eea-jenkins build storybook |
❌ Storybook build FAILEDCheck https://ci.eionet.europa.eu/job/volto-addons/job/volto-eea-design-system/job/PR-163/41/ for details |
|
@eea-jenkins build storybook |
|
@eea-jenkins build storybook |
|
@eea-jenkins build storybook |
tarantilis
requested review from
ichim-david
and removed request for
ichim-david
|
After testing the message component looks unaffected by this PR commits and merges. |
| @@ -89,15 +89,15 @@ function CheckboxForm({ | |||
| ) : null} | |||
| <Form.Field error={invalid}> | |||
| <Checkbox label="Option 1" defaultChecked id="field1"></Checkbox> | |||
| <label htmlFor="field1">Helper text for option 1</label> | |||
| <p class="description">Helper text for option 1</p> | |||
There was a problem hiding this comment.
@g-stamatis Hmm. I'm not sure about this change.
checkboxes, radio, text inputs should have the label with the for attribute present.
There was a problem hiding this comment.
@avoinea The semantic uses the label prop inside the Checkbox component (line 91) so we had accesibility warnings for adding another label for the helper text. I don't clearly remember but I think we talked in a daily meeting and decided to just put a description p.
There was a problem hiding this comment.
https://62713c57bcbdf4004a3d99b8-oxzzvhflft.chromatic.com/?path=/story/components-forms-dropdown--error-dropdown&args=required:true;search:true
There are still accessibility errors as seen while testing
This is more serious than that mentioned by Alin.
https://taskman.eionet.europa.eu/issues/147795
https://62713c57bcbdf4004a3d99b8-oxzzvhflft.chromatic.com/?path=/story/components-forms-input--default