Skip to content

Conversation

@bxiao
Copy link
Contributor

@bxiao bxiao commented Feb 4, 2021

Fixes #2753

According to the Aria 1.2 spec for combobox https://www.w3.org/TR/wai-aria-practices-1.2/examples/combobox/combobox-autocomplete-list.html, the role="combobox" attribute should be set on the inner input element, not the containing div.

Additional description


CONTRIBUTOR checklist (do not remove)

Please complete for every pull request

  • First-time contributors should sign the Contributor License Agreement. It's a fancy way of saying that you are giving away your contribution to this project. If you haven't before, wait a few minutes and a bot will comment on this pull request with instructions.
  • npm run lint:fix has been run and linting passes.
  • Mocha, Jest (Storyshots), and components/component-docs.json CI tests pass (npm test).
  • Tests have been added for new props to prevent regressions in the future. See readme.
  • Review the appropriate Storybook stories. Open http://localhost:9001/.
  • Review tests are passing in the browser. Open http://localhost:8001/.
  • Review markup conforms to SLDS by looking at DOM snapshot strings.

REVIEWER checklist (do not remove)

  • TravisCI tests pass. This includes linting, Mocha, Jest, Storyshots, and components/component-docs.json tests.
  • Tests have been added for new props to prevent regressions in the future. See readme.
  • Review the appropriate Storybook stories. Open http://localhost:9001/.
  • The Accessibility panel of each Storybook story has 0 violations (aXe). Open http://localhost:9001/.
  • Review tests are passing in the browser. Open http://localhost:8001/.
  • Review markup conforms to SLDS by looking at DOM snapshot strings.
Required only if there are markup / UX changes
  • Add year-first date and commit SHA to last-slds-markup-review in package.json and push.
  • Request a review of the deployed Heroku app by the Salesforce UX Accessibility Team.
  • Add year-first review date, and commit SHA, last-accessibility-review, to package.json and push.
  • While the contributor's branch is checked out, run npm run local-update within locally cloned site repo to confirm the site will function correctly at the next release.

@bxiao bxiao changed the title Combobox: Set role=\'combobox\' on input element Combobox: Set role='combobox' on input element Feb 4, 2021
@interactivellama interactivellama self-requested a review February 4, 2021 19:18
@interactivellama
Copy link
Contributor

@bxiao This is bigger than just moving the role attribute.

From an open work ticket: W-8074194
Currently, Salesforce uses the ARIA 1.1 markup for comboboxes. Screen readers announce the new markup better, so we should update to the 1.2 version. Need to move the following attributes to the text input:

role="combobox"
aria-expanded
aria-haspopup="listbox"

The div will just be a wrapper for styles now, it won't have any of the combobox attributes.

@interactivellama
Copy link
Contributor

Also, as you mentioned on Slack. Please update all variants that have the div role=combobox attribute.

Copy link
Contributor

@interactivellama interactivellama left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See comments

@interactivellama interactivellama merged commit 2b249fc into salesforce:master Feb 5, 2021
@bxiao bxiao deleted the fix/comboboxRole branch February 5, 2021 17:55
interactivellama added a commit to interactivellama/design-system-react that referenced this pull request Oct 29, 2021
…)"

This reverts commit 2b249fc.

# Conflicts:
#	components/combobox/__docs__/__snapshots__/storybook-stories.storyshot
#	components/combobox/__tests__/combobox.browser-test.jsx
#	components/combobox/combobox.jsx
#	components/component-docs.json
#	components/date-picker/__tests__/__snapshots__/datepicker.dom-snapshot-test.jsx.snap
interactivellama added a commit to interactivellama/design-system-react that referenced this pull request Oct 29, 2021
…)"

This reverts commit 2b249fc.

# Conflicts:
#	components/combobox/__docs__/__snapshots__/storybook-stories.storyshot
#	components/combobox/__tests__/combobox.browser-test.jsx
#	components/combobox/combobox.jsx
#	components/component-docs.json
#	components/date-picker/__tests__/__snapshots__/datepicker.dom-snapshot-test.jsx.snap
interactivellama added a commit that referenced this pull request Nov 1, 2021
* Revert "Combobox: Set role='combobox' on input element (#2756)"

This reverts commit 2b249fc.

# Conflicts:
#	components/combobox/__docs__/__snapshots__/storybook-stories.storyshot
#	components/combobox/__tests__/combobox.browser-test.jsx
#	components/combobox/combobox.jsx
#	components/component-docs.json
#	components/date-picker/__tests__/__snapshots__/datepicker.dom-snapshot-test.jsx.snap

* Update snapshots

* Remove double roles
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Combobox Component should comply with ARIA 1.2

2 participants