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

fix(chips): set appropriate aria-orientation #6464

Merged
merged 2 commits into from
Sep 11, 2017

Conversation

crisbeto
Copy link
Member

Based on the accessibility guidelines, the listbox role has a default aria-orientation of vertical, however the chips in a chip list are horizontal.

@crisbeto crisbeto added Accessibility This issue is related to accessibility (a11y) pr: needs review labels Aug 14, 2017
@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Aug 14, 2017
@@ -45,6 +45,7 @@ import {coerceBooleanProperty} from '@angular/cdk/coercion';
host: {
'[attr.tabindex]': '_tabIndex',
'role': 'listbox',
'aria-orientation': 'horizontal',
Copy link
Contributor

Choose a reason for hiding this comment

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

Stacked chips are vertical.
I'm okay with the change. But I think we need to update the docs to let developers set correct aria-orientation if they use stacked chip list.

@crisbeto
Copy link
Member Author

Addressed the feedback. Can you take another look @tinayuangao?

Copy link
Contributor

@tinayuangao tinayuangao left a comment

Choose a reason for hiding this comment

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

LGTM

@@ -33,8 +33,19 @@ chips are neither selectable nor focusable. Currently, disabled chips receive no
Users can move through the chips using the arrow keys and select/deselect them with the space. Chips
also gain focus when clicked, ensuring keyboard navigation starts at the appropriate chip.

### Orientation
If you want the chips in the list to be stacked verticall, instead of horizontally, you can apply
Copy link
Contributor

Choose a reason for hiding this comment

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

vertically?

Based on the [accessibility guidelines](https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox), the `listbox` role has a default `aria-orientation` of `vertical`, however the chips in a chip list are horizontal.
@tinayuangao tinayuangao added the action: merge The PR is ready for merge by the caretaker label Sep 11, 2017
@mmalerba mmalerba merged commit a37aa6a into angular:master Sep 11, 2017
josephperrott pushed a commit to josephperrott/components that referenced this pull request Sep 15, 2017
Based on the [accessibility guidelines](https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox), the `listbox` role has a default `aria-orientation` of `vertical`, however the chips in a chip list are horizontal.
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Accessibility This issue is related to accessibility (a11y) action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants