Accessibility issues with our multiple select

Altinn / app-frontend-react

Altinn application React frontend

BSD 3-Clause "New" or "Revised" License

16 stars 24 forks source link

Accessibility issues with our multiple select #831

Closed Febakke closed 1 year ago

Febakke commented 1 year ago

Description of the bug

Contrast Contrast between white background and placeholder text is to low. Small text need a contrast of 4.5:1, now it is 3.96:1.

[x] Propose new color for placeholder text: #68707C semantic/text/neutral/subtle

Keyboard and navigation: In Altinn 3 apps there is now focus indicator when trying to navigate the lists of values with keyboard There is also no hover effect when using mouse

Screen reader:

[x] Screen reader tells the user if it is expanded or not
[x] Values in the list is read by the screen reader
[x] It is read if the value is already selected.

Use a normal select and react-select for reference.

Steps To Reproduce

I found different errors when testing in apps and in storybook. Test both!

Additional Information

No response

bjosttveit commented 1 year ago

App-frontend currently uses react-select instead of the multiple select component from the design system. This should be switched out. Are there issues with the design system component as well @Febakke ?

Febakke commented 1 year ago

Yes, when I tested the one in storybook I had issues with getting the screen reader to read the values in the list. But I dont know if that might be an issue with Storybook? Maybe @TomasEng knows?

TomasEng commented 1 year ago

If this happens in Storybook, it will probably happen in the apps as well.

TomasEng commented 1 year ago

I am looking at the issues related to the design system component.

RonnyB71 commented 1 year ago

Blocked, awaiting DigDir Designsystem.

mimarz commented 1 year ago

I have previously used downshiftjs to make an accessible select with multiple select. Examples here.

WAI also has good guidelines for how a select (combox) should behave here

mimarz commented 1 year ago

I have previously used downshiftjs to make an accessible select with multiple select. Examples here.

WAI also has good guidelines for how a select (combox) should behave here

Floating-ui actually has some examples on how to build select/comboxbox with their tools. Would be interesting if we could make use of this as its an dependency we already use, instead of having to potentially drag in something new.

Floating-ui examples
Orange also had a good article on guidelines for autocomplete here

TomasEng commented 1 year ago

I have previously used downshiftjs to make an accessible select with multiple select. Examples here. WAI also has good guidelines for how a select (combox) should behave here

Floating-ui actually has some examples on how to build select/comboxbox with their tools. Would be interesting if we could make use of this as its an dependency we already use, instead of having to potentially drag in something new.

Floating-ui examples

Orange also had a good article on guidelines for autocomplete here

Thanks for sharing these examples and guidelines! I'm looking at them now to see what fits best with our component. I agree that Floating UI would be the best solution since we are already using it.

bjosttveit commented 1 year ago

I noticed some weird tabbing behavior when trying out this component, I dont know if you are aware. When tabbing into the select, and then pressing tab again it does not go to the next component but the top of the document. If I close the dropdown first with esc it goes to the next element as expected.

https://user-images.githubusercontent.com/47412359/223971117-b24ac5cb-78e2-4281-a6b5-4a61a0e340a1.mov