Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Toggle Component: Improve accessibility

See original GitHub issue

Description

The Toggle component is not accessible in it’s current state.

Needs:

Keyboard handling (press “enter” to toggle)
label validation - if no label provided, add hidden label for screen readers.
aria-checked attribute

Versions

fundamental-react: 0.3.0.rc-2 fiori-fundamentals:

NOTE: Where applicable, please include uncropped screen captures.

DISCLAIMER: After triaging an issue, the fundamental-react team will see if it can be reproduced or confirmed. If more information is needed, the fundamental-react team will contact the author. Any issues awaiting responses from the author for more than 7 days will be closed. The author can re-open the issue at a later time if they can present the requested information.

Issue Analytics

State:
Created 5 years ago
Comments:5 (5 by maintainers)

Top GitHub Comments

2reactions

prsdthkrcommented, Mar 4, 2020

@jbadan I guess having the aria-label set on the input is better. That way, we don’t have to add, associate and style another label element. Also I think aria-label should be a required prop.

0reactions

jbadancommented, Mar 9, 2020

I think we can set the default for our playground pages - but the custom proptype we use for localization will make it required: https://github.com/SAP/fundamental-react/blob/master/src/utils/CustomPropTypes/CustomPropTypes.js#L78 (seen used here in Counter: https://github.com/SAP/fundamental-react/blob/e3e6c9ae7986085a4ce65b39d2da853db258fd06/src/Counter/Counter.js#L36)