feat(multiselect): allow disabled listbox items

[tay1orjones]

Closes #9610
Refs #6477

Modifies MultiSelect to pass through the disabled option on items to downshift. Adds new styles to properly display disabled items.

Changelog

New

• multiselect: added listbox disabled item styles

Changed

• multiselect: enable disabled option for listbox items

Testing / Reviewing

• View the carbon-components-react storybook default MultiSelect story. The third option in the listbox should have the disabled attribute and appear disabled.
• View the carbon-react-next storybook default MultiSelect story. The third option in the listbox should have the disabled attribute and appear disabled.
• Would be awesome to get a visual review to make sure the disabled styles I added are good

[netlify]

✔️ Deploy Preview for carbon-react-next ready!

🔨 Explore the source changes: 390a87e

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-react-next/deploys/6170792887e7d200080752db

😎 Browse the preview: https://deploy-preview-9859--carbon-react-next.netlify.app

[tay1orjones]

A few notes regarding the accessibility of this:

• The disabled: true is passed through to Downshift. Downshift applies a disabled attribute to the element with role="option"
• The option role inherits aria-disabled, which to my understanding can be used interchangeably with the disabled attribute.
• Disabled options do not receive focus and are skipped when using keyboard navigation. From the aria-disabled spec:

  • (aria-disabled) Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable ... Disabled elements might not receive focus from the tab order. For some disabled elements, applications might choose not to support navigation to descendants.

Overall I think we're within bounds accessibility-wise. @dakahn @mbgower definitely would appreciate any critique you might have of my thinking here!

[netlify]

✔️ Deploy Preview for carbon-elements ready!

🔨 Explore the source changes: 390a87e

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-elements/deploys/6170792864c33100070e6059

😎 Browse the preview: https://deploy-preview-9859--carbon-elements.netlify.app

[netlify]

✔️ Deploy Preview for carbon-components-react ready!
Built without sensitive environment variables

🔨 Explore the source changes: 390a87e

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/61707928c6b085000833afcc

😎 Browse the preview: https://deploy-preview-9859--carbon-components-react.netlify.app

[dakahn]

Yep downshift does its job when it comes to disabled. Nice! I'd actually recommend aria-disabled over using disabled in general because the latter can cause a confusing experience potentially.

[dakahn]

Totally agree with keeping the disabled item focusable -- good call there. Looks good 👍🏾

[laurenmrice]

The disabled text and icon should be color token $disabled-02, not -03.

[tay1orjones]

@laurenmrice thanks for catching that! Just updated it.

[laurenmrice]

lgtm!