Skip to content

Action and popovermenu accessibility - #342

Merged
ChristophWurst merged 3 commits into
masterfrom
fix/action/popover-mouse-design
Apr 11, 2019
Merged

Action and popovermenu accessibility#342
ChristophWurst merged 3 commits into
masterfrom
fix/action/popover-mouse-design

Conversation

@skjnldsv

@skjnldsv skjnldsv commented Apr 9, 2019

Copy link
Copy Markdown
Contributor

See aria guidelines https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20161214/examples/menu-button/menu-button-1/menu-button-1.html

Added:

  • visual feedback on the menu
  • can navigate through popovermenu with up/down pageUp/pageDown tab/shiftTab
  • can close popovermenu with escape
  • can open popovermenu with space and enter

Missing?

  • A-Z navigation
  • tabindex="-1" on all menu items

@nextcloud/accessibility @nextcloud/vue thoughts and reviews? ❤️

@skjnldsv skjnldsv added 3. to review Waiting for reviews feature: popover Related to the popovermenu component feature: actions Related to the actions components labels Apr 9, 2019
@skjnldsv skjnldsv added this to the next milestone Apr 9, 2019
@skjnldsv skjnldsv self-assigned this Apr 9, 2019
@skjnldsv
skjnldsv force-pushed the fix/action/popover-mouse-design branch from e381d5c to 8f55a06 Compare April 9, 2019 17:07
@keydown.down.exact.prevent="focusNextAction"
@keydown.shift.tab.prevent="focusPreviousAction"
@keydown.tab.exact.prevent="focusNextAction"
@keydown.page-up.exact.prevent="focusFirstAction"

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

oh man, this is so good!! 🌟

@skjnldsv skjnldsv added 2. developing Work in progress and removed 3. to review Waiting for reviews labels Apr 9, 2019
Comment thread src/components/Action/Action.vue
@skjnldsv
skjnldsv force-pushed the fix/action/popover-mouse-design branch from 84fd1de to b2ff781 Compare April 9, 2019 17:38
@jancborchardt

Copy link
Copy Markdown
Contributor

Nice nice!

A-Z navigation

What do you mean by that?

tabindex="-1" on all menu items

Why that? "-1" means they would be taken out of the tab order, which should be avoided. (Ideally there is no tabindex needed at all, because the HTML elements and order should be accessible.)

@skjnldsv

skjnldsv commented Apr 9, 2019

Copy link
Copy Markdown
Contributor Author

@jancborchardt read the aria docs :p

A-Z, a-z | Moves focus to the next popup item that starts with that letter.If no popup menu item starts with the letter, focus does not move.

Role Attribute Element Usage
menuitem   li The role="menuitem" attribute identifies the li element as an ARIA menuitem widget.Accessible name for the menuitem widget comes from child text content of the li element.The menuitem widget has tabindex="-1".
  tabindex="-1" li Identifies each li[role=menuitem] as an interactive element on the page (e.g. can recived keyboard focus), but is not part of the tab order of the page.

@ChristophWurst ChristophWurst left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Looks good!

Comment thread src/components/Action/Action.vue Outdated
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
@skjnldsv
skjnldsv force-pushed the fix/action/popover-mouse-design branch from b2ff781 to 8a714a0 Compare April 11, 2019 12:01
@ChristophWurst
ChristophWurst merged commit 7eb4f1e into master Apr 11, 2019
@ChristophWurst
ChristophWurst deleted the fix/action/popover-mouse-design branch April 11, 2019 12:34
@skjnldsv skjnldsv added 4. to release Ready to be released and/or waiting for tests to finish and removed 2. developing Work in progress labels Apr 11, 2019
@skjnldsv skjnldsv modified the milestones: next, 0.10.0 May 7, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

4. to release Ready to be released and/or waiting for tests to finish feature: actions Related to the actions components feature: popover Related to the popovermenu component

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants