search

catamphetamine / react-phone-number-input

React component for international phone number input
http://catamphetamine.gitlab.io/react-phone-number-input/
MIT License
915 stars 193 forks source link

(Accessibility) (Level AA) Keyboard navigation - Country select does not show a visible focus outline when focused #410

Closed a11y1 closed 1 year ago

a11y1 commented 1 year ago

"react-phone-number-input": "3.2.4"

When navigating via keyboard, the country select should show a visible focus outline when focused. This focus outline should meet minimum contrast requirements of 3:1.

The demo does not show a visible focus outline that meets WCAG standards.

Screen Shot 2022-07-15 at 2 48 13 PM Screen Shot 2022-07-15 at 2 49 36 PM

https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-minimum.html

catamphetamine commented 1 year ago

Country select does not show a visible focus outline when focused

You can style it any way you'd like.

By default, the component doesn't adhere to this rule because it's "level AA" and is not required for passing the A level conformance.

More details on conformance levels:

https://www.ucop.edu/electronic-accessibility/standards-and-best-practices/levels-of-conformance-a-aa-aaa.html

WCAG 2.0 guidelines are categorized into three levels of conformance in order to meet the needs of different groups and different situations: A (lowest), AA (mid range), and AAA (highest). Conformance at higher levels indicates conformance at lower levels. For example, by conforming to AA, a Web page meets both the A and AA conformance levels. Level A sets a minimum level of accessibility and does not achieve broad accessibility for many situations. For this reason, UC recommends AA conformance for all Web-based information.

So, looks like currently this component meets the A (minumum) conformance level and it should pass the general accessibility requirements.

Closing.