Material UI example is not accessible

[muscal]

Discussed in #153

^{Originally posted by muscal February 6, 2024}
Took a look on Chrome / Safari on macOS and determined this widget/component is not accessible. In hopes that you could invest in making the widget accessible, i've listed out the critical issuesI've listed them below in hopes that these could be addressed in the next version of the component.

Issue 1 (All Browsers): The icon doesn’t have a label / name (see the 1st screenshot below), e.g. Country Code; and it doesn’t read the selection, e.g. Spain +34

Issue 2 (Safari Browser-only): The dropdown randomly stops working by keyboard and / or freezes (without VoiceOver).
Issue 3 (Safari Browser-only): It crashes / freezes VoiceOver everytime I close the CC dropdown (either by selection or with ESC) (see the 2nd screenshot)

Issue 4 (All Browsers): PGUP / PGDOWN doesn’t move keyboard focus with the scroll behaviour, i.e. it scrolls the list but doesn’t set the keyboard focus

Even putting accessibility & VoiceOver aside the country code seems really janky in Safari. It looks like a memory leak of sorts? For example when selecting a CC from the list and alternating between keyboard & mouse Safari freezes / locks up. See #2 above.

[goveo]

@muscal Thanks for the detailed feedback!
The issues that you described only related to the MUI example, right?
A native component should work fine and support accessibility features (can be checked here)

I will try to improve dropdown in the example for MaterialUI.

[muscal]

The issues that you described only related to the MUI example, right?

Yes, was testing the MUI example! The native component seems to work fine. Thank you for the quick response. Will keep this open for your MUI adjustments.