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.

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

Combobox: ARIA attribute fixes #2004

Merged
merged 18 commits into from
Jun 19, 2019

Conversation

interactivellama
Copy link
Contributor

Fixes #2003

Additional description

This allows aXe audit to pass for Combobox. npm run test:a11y
@jcjuett @kevinparkerson

Screen Shot 2019-05-31 at 9 32 26 AM

@aswinshenoy @pulkonet When you run npm run test:a11y on your new work (and you should! -- but it is not currently in the TravisCI tasks list for all pull requests today). This PR may help with fixing some of the errors.

The issues were duplicate ARIA attributes used when only one was set was needed and that HTML IDs were being referenced when they were not on the page, since it's React convention to only add visible HTML nodes to the page such as when displaying menus, popovers, and tooltips.


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.

Read-only combobox had two copies of ARIA attributes
Added due to autocomplete bug in browsers. Invalid value of "test" is passed into `autoComplete` intentionally.
- Remove duplicate attributes
- align node IDs
ID was invalid since it was not rendered on the screen at the time
section tag should only be used for Popover. See SLDS markup
Copy link
Contributor

@kevinparkerson kevinparkerson left a comment

Choose a reason for hiding this comment

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

@interactivellama running npm run test:a11y fails for me

@interactivellama
Copy link
Contributor Author

@kevinparkerson Do the combobox a11y tests pass?

@interactivellama
Copy link
Contributor Author

You will need to do an npm install due to the axe fork I made

…to aria-attributes-fix

# Conflicts:
#	components/tooltip/__docs__/__snapshots__/storybook-stories.storyshot
#	package-lock.json
#	package.json
@interactivellama interactivellama temporarily deployed to design-system-react-co-pr-2004 June 18, 2019 04:33 Inactive
@interactivellama
Copy link
Contributor Author

@kevinparkerson Updated

autoComplete="test"
id="id_from_input_prop"
Copy link
Contributor

Choose a reason for hiding this comment

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

@interactivellama why was this id removed? not needed for snapshot testing?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, it was not needed.

@kevinparkerson
Copy link
Contributor

@interactivellama still seeing this locally:
Screen Shot 2019-06-19 at 3 25 25 PM

@kevinparkerson
Copy link
Contributor

Screen Shot 2019-06-19 at 3 28 47 PM

@interactivellama interactivellama temporarily deployed to design-system-react-co-pr-2004 June 19, 2019 22:32 Inactive
Copy link
Contributor

@kevinparkerson kevinparkerson left a comment

Choose a reason for hiding this comment

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

All combobox a11y tests now pass... code checks out. It's good to go!

@kevinparkerson kevinparkerson merged commit 9744369 into salesforce:master Jun 19, 2019
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: ARIA attributes are invalid
2 participants