Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[accessibility]: accessibility issue with combox #11268

Closed
2 tasks done
cedricpelle opened this issue Dec 22, 2023 · 2 comments · Fixed by #11421
Closed
2 tasks done

[accessibility]: accessibility issue with combox #11268

cedricpelle opened this issue Dec 22, 2023 · 2 comments · Fixed by #11421
Assignees
@m4olivei
Labels
accessibility Has accessibility requirement bug Something isn't working dev Needs some dev work package: carbon web components severity 3 Affects minor functionality, has a workaround

Comments

@cedricpelle
Copy link

cedricpelle commented Dec 22, 2023 •
edited by andy-blum
Loading

JIRA

Description

i have some violations when using the IBM Equal Access Accessibility Checker on the combox
image

Accessibility_Report-test.xlsx

Component(s) impacted

combox

Browser

No response

Carbon for IBM.com version

V1

Severity

Severity 2 = Aspects of design is broken, and impedes users in a significant way, but there is a way to complete their tasks. Affects major functionality, has a workaround.

Application/website

IBM Terms

Package

@carbon/ibmdotcom-web-components, @carbon/web-components

CodeSandbox example

https://web-components-v1.carbondesignsystem.com/?path=/story/components-combo-box--default

Steps to reproduce the issue (if applicable)

Code used :

<script type="module"
src="https://1.www.s81c.com/common/carbon/web-components/version/v1.35.0/combo-box.min.js"></script>

<bx-combo-box
helper-text="Optional helper text"
label-text="Combo box title"
trigger-content="Filter..."
aria-label="Combo box"

Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7
Option 8

Release date (if applicable)

No response

Code of Conduct
@cedricpelle cedricpelle added bug Something isn't working dev Needs some dev work labels Dec 22, 2023
@cedricpelle
Copy link
Author

code used
image

@cedricpelle
Copy link
Author

We have too a violation on the button to unselect

image

@andy-blum andy-blum added package: web components Work necessary for the IBM.com Library web components package owner: Innovation Team used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants labels Dec 22, 2023
@oliviaflory oliviaflory added accessibility Has accessibility requirement package: carbon web components severity 3 Affects minor functionality, has a workaround and removed owner: Innovation Team used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants package: web components Work necessary for the IBM.com Library web components package labels Jan 2, 2024
@m4olivei m4olivei self-assigned this Jan 17, 2024
@m4olivei m4olivei mentioned this issue Jan 19, 2024
Merged
@kodiakhq kodiakhq bot closed this as completed in #11421 Feb 29, 2024
kodiakhq bot pushed a commit that referenced this issue Feb 29, 2024
@m4olivei
[combo-box / dropdown] Improve accessibility (#11421)
1c854c0 
### Related Ticket(s)

Closes #11268
[Jira ticket](https://jsw.ibm.com/browse/ADCMS-4401)

### Description

Fixes accessibility issues with Combo-box, and by extension Dropdown.

Used both React package (which uses [Downshift](https://www.downshift-js.com/)), and [ARIA APG](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) as references. Tested with VoiceOver on Mac OS.

### Testing

* Use both dropdown and combo-box components. Ensure there are no regressions for sighted users
* Using a screenreader, test both dropdown and combo-box components. Should work well. See [Select-Only Combobox Example](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/) and [Editable Combobox With List Autocomplete Example](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/) are great reference examples.
* Regression test the Multi select component (it extends the Dropdown component)

### Changelog

**Changed**

- Improved dropdown and combo-box accessibility.

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
kennylam pushed a commit to kennylam/carbon-for-ibm-dotcom that referenced this issue Mar 20, 2024
@m4olivei @kennylam
[combo-box / dropdown] Improve accessibility (carbon-design-system#11421
4d04791 
)

Closes carbon-design-system#11268
[Jira ticket](https://jsw.ibm.com/browse/ADCMS-4401)

Fixes accessibility issues with Combo-box, and by extension Dropdown.

Used both React package (which uses [Downshift](https://www.downshift-js.com/)), and [ARIA APG](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) as references. Tested with VoiceOver on Mac OS.

* Use both dropdown and combo-box components. Ensure there are no regressions for sighted users
* Using a screenreader, test both dropdown and combo-box components. Should work well. See [Select-Only Combobox Example](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/) and [Editable Combobox With List Autocomplete Example](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/) are great reference examples.
* Regression test the Multi select component (it extends the Dropdown component)

**Changed**

- Improved dropdown and combo-box accessibility.

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
kennylam pushed a commit to kennylam/carbon-for-ibm-dotcom that referenced this issue Jun 11, 2024
@m4olivei
[combo-box / dropdown] Improve accessibility (carbon-design-system#11421
95c599f 
)

### Related Ticket(s)

Closes carbon-design-system#11268
[Jira ticket](https://jsw.ibm.com/browse/ADCMS-4401)

### Description

Fixes accessibility issues with Combo-box, and by extension Dropdown.

Used both React package (which uses [Downshift](https://www.downshift-js.com/)), and [ARIA APG](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) as references. Tested with VoiceOver on Mac OS.

### Testing

* Use both dropdown and combo-box components. Ensure there are no regressions for sighted users
* Using a screenreader, test both dropdown and combo-box components. Should work well. See [Select-Only Combobox Example](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/) and [Editable Combobox With List Autocomplete Example](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/) are great reference examples.
* Regression test the Multi select component (it extends the Dropdown component)

### Changelog

**Changed**

- Improved dropdown and combo-box accessibility.

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@m4olivei m4olivei

Labels
accessibility Has accessibility requirement bug Something isn't working dev Needs some dev work package: carbon web components severity 3 Affects minor functionality, has a workaround
Projects
Carbon for IBM.com
Archived in project
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[combo-box / dropdown] Improve accessibility m4olivei/carbon-for-ibm-dotcom
4 participants
@m4olivei @andy-blum @cedricpelle @oliviaflory