Description
This issue was moved from the chatbot repo.
patternfly/chatbot#822 found violations only related to examples that utilize our checkbox component as a means of example options/controls. When our checkbox (and likely radio) components are siblings of one another, they violate the target size minimum WCAG criterion due to 1) the inputs being too small, and 2) the inputs being too close to other interactive widgets (in this case other checkboxes/radios).
Adding 3px of spacing between each input sibling helps resolves the violation. Using the pf-v6-c-form__group component helps add more spacing between stacked inputs, but only when inside our form component. Related checkboxes/radios should be in a role group or role radiogroup container anyways, though, to help relate them. So:
-
We could add spacing for sibling checkbox/radio inputs. This might conflict when inside a Form > FormGroup structure so probably need to make an exception for that
-
We could expand the FormGroup component so that the styling that adds additional spacing between sibling inputs takes effect even outside a Form component. This means if anyone is just rendering inputs as siblings, the violation falls onto them if not using our recommended approach
-
Both of the above if we want to cover more bases
-
Edit the InputGroup component so that checkbox and radio components can be used in a stacked (or unstacked) context, with the role being set to group or radiogroup as applicable (basically replacing FormGroup when it's being used for this purpose), and just updating styling the same as we would for item 2 above
Options 2 and 4 may not guarantee target size isn't violated where there's other interactive widgets around the checkboxes/radios, but at that point we can either iterate further on styling from base PF, or consider whether it's an issue that needs handling consumer side.
Making an update at least in Core would help us resolve various target-size violations related to checkbox or radio components being rendered as siblings.
Steps to Reproduce
Run axe dev tools with WCAG 2.2 compliance setting on. Examples fail due to checkboxes.
Data/JSON Context (if applicable)
No response
Environment
No response
Screenshots or Logs
No response
Jira Issue: PF-4437
Description
This issue was moved from the chatbot repo.
patternfly/chatbot#822 found violations only related to examples that utilize our checkbox component as a means of example options/controls. When our checkbox (and likely radio) components are siblings of one another, they violate the target size minimum WCAG criterion due to 1) the inputs being too small, and 2) the inputs being too close to other interactive widgets (in this case other checkboxes/radios).
Adding 3px of spacing between each input sibling helps resolves the violation. Using the
pf-v6-c-form__groupcomponent helps add more spacing between stacked inputs, but only when inside our form component. Related checkboxes/radios should be in a role group or role radiogroup container anyways, though, to help relate them. So:We could add spacing for sibling checkbox/radio inputs. This might conflict when inside a Form > FormGroup structure so probably need to make an exception for that
We could expand the FormGroup component so that the styling that adds additional spacing between sibling inputs takes effect even outside a Form component. This means if anyone is just rendering inputs as siblings, the violation falls onto them if not using our recommended approach
Both of the above if we want to cover more bases
Edit the InputGroup component so that checkbox and radio components can be used in a stacked (or unstacked) context, with the role being set to group or radiogroup as applicable (basically replacing FormGroup when it's being used for this purpose), and just updating styling the same as we would for item 2 above
Options 2 and 4 may not guarantee target size isn't violated where there's other interactive widgets around the checkboxes/radios, but at that point we can either iterate further on styling from base PF, or consider whether it's an issue that needs handling consumer side.
Making an update at least in Core would help us resolve various target-size violations related to checkbox or radio components being rendered as siblings.
Steps to Reproduce
Run axe dev tools with WCAG 2.2 compliance setting on. Examples fail due to checkboxes.
Data/JSON Context (if applicable)
No response
Environment
No response
Screenshots or Logs
No response
Jira Issue: PF-4437