search

carbon-design-system / carbon-platform

The "next" version of the Carbon Design System website, as a platform.
https://next.carbondesignsystem.com
Apache License 2.0
21 stars 5 forks source link

Fix accessibility compliance with catalog multiselect filter #666

Open jharvey10 opened 2 years ago

jharvey10 commented 2 years ago

I attempted to remove the eslint disable directive for adding tab indexes to non-interactive components, but was unable to because this requires a "role" to be assigned to the popover content div (which then likely involves adding roles to the individual elements within it).

I worked with Andrea on this and we concluded that we need guidance from the system squad or accessibility team on what role this container should have (as well as its children).

image

_Originally posted by @jdharvey-ibm in https://github.com/carbon-design-system/carbon-platform/pull/665#discussion_r860268531_

jharvey10 commented 2 years ago

Tagging for awareness:

@andreancardona @carbon-design-system/developers-system

joshblack commented 2 years ago

@jdharvey-ibm this is definitely a tough one, I'm not sure what a11y primitives this maps to most easily 🤔

It kind of looks like this is a list box with multiple selection in option groups? Maybe something like: https://codesandbox.io/s/competent-sea-1gkf5x?file=/src/App.js ?

jharvey10 commented 2 years ago

@joshblack Thanks! @andreancardona and I were thinking that might be the closest one too! We actually started down that direction, but got kinda stuck. I think the piece we were missing that you mentioned is option groups. I bet if we add that to what we started, we'd be in pretty good shape.

mattrosno commented 2 years ago

Hey team! Please add your planning poker estimate with ZenHub @alisonjoseph @andreancardona @francinelucca @jdharvey-ibm