Skip to content
This repository has been archived by the owner on Mar 4, 2020. It is now read-only.

feat(List): behavior, example and prototype for navigable list #1904

Merged
merged 6 commits into from
Sep 12, 2019
Merged

feat(List): behavior, example and prototype for navigable list #1904

merged 6 commits into from
Sep 12, 2019

Conversation

jurokapsiar
Copy link
Contributor

@jurokapsiar jurokapsiar commented Sep 9, 2019 •
edited

After discussions with screen reader vendors, the behavior should be:

  • right/down arrow move focus to the next item
  • left/up arrow move focus to the previous item
  • use menu and menuitem roles

Prototype shows how to attach context menu to the list items. This PR includes necessary fixes to make it work correctly.

@jurokapsiar jurokapsiar added accessibility All the Accessibility tasks and bugs should be tagged with this. 🚀 ready for review labels Sep 9, 2019
@jurokapsiar jurokapsiar changed the title Accessibility(List): behavior, example and prototype for horizontal list Accessibility(List): behavior, example and prototype for navigable list Sep 9, 2019
@codecov
Copy link

codecov bot commented Sep 9, 2019

Codecov Report

Merging #1904 into master will increase coverage by 0.07%.
The diff coverage is 88.88%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #1904      +/-   ##
==========================================
+ Coverage   69.87%   69.94%   +0.07%     
==========================================
  Files         890      892       +2     
  Lines        7783     7788       +5     
  Branches     2275     2254      -21     
==========================================
+ Hits         5438     5447       +9     
+ Misses       2335     2331       -4     
  Partials       10       10
Impacted Files Coverage Δ
packages/react/src/components/List/ListItem.tsx 100% <ø> (ø) ⬆️
...src/themes/teams/components/List/listItemStyles.ts 21.73% <0%> (ø) ⬆️
...bility/Behaviors/List/navigableListItemBehavior.ts 100% <100%> (ø)
...essibility/Behaviors/List/navigableListBehavior.ts 100% <100%> (ø)
...ges/react/src/components/MenuButton/MenuButton.tsx 52.94% <100%> (ø) ⬆️
...c/lib/accessibility/Behaviors/List/listBehavior.ts 100% <100%> (ø) ⬆️
...b/accessibility/Behaviors/List/listItemBehavior.ts 100% <100%> (ø) ⬆️
...ibility/Behaviors/MenuButton/menuButtonBehavior.ts 100% <100%> (ø) ⬆️
packages/react/src/components/List/List.tsx 100% <100%> (+14.28%) ⬆️
... and 1 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ed2d996...48115b5. Read the comment docs.

@codecov
Copy link

codecov bot commented Sep 9, 2019 •
edited

Codecov Report

Merging #1904 into master will decrease coverage by 0.02%.
The diff coverage is 88.88%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #1904      +/-   ##
==========================================
- Coverage   70.43%   70.41%   -0.03%     
==========================================
  Files         881      879       -2     
  Lines        7790     7743      -47     
  Branches     2275     2271       -4     
==========================================
- Hits         5487     5452      -35     
+ Misses       2293     2281      -12     
  Partials       10       10
Impacted Files Coverage Δ
packages/react/src/components/List/ListItem.tsx 100% <ø> (ø) ⬆️
...src/themes/teams/components/List/listItemStyles.ts 21.73% <0%> (ø) ⬆️
...bility/Behaviors/List/navigableListItemBehavior.ts 100% <100%> (ø)
...essibility/Behaviors/List/navigableListBehavior.ts 100% <100%> (ø)
...c/lib/accessibility/Behaviors/List/listBehavior.ts 100% <100%> (ø) ⬆️
...b/accessibility/Behaviors/List/listItemBehavior.ts 100% <100%> (ø) ⬆️
...ibility/Behaviors/MenuButton/menuButtonBehavior.ts 100% <100%> (ø) ⬆️
packages/react/src/components/List/List.tsx 100% <100%> (+14.28%) ⬆️
...ges/react/src/components/MenuButton/MenuButton.tsx 52.94% <100%> (-12.78%) ⬇️
... and 9 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e7a59c0...0067889. Read the comment docs.

@jurokapsiar jurokapsiar changed the title Accessibility(List): behavior, example and prototype for navigable list feat(List): behavior, example and prototype for navigable list Sep 12, 2019
@jurokapsiar jurokapsiar merged commit 7ca52d9 into master Sep 12, 2019
@jurokapsiar jurokapsiar deleted the acc/horizontal-list-acc branch September 12, 2019 17:02
layershifter pushed a commit that referenced this pull request Sep 13, 2019
@jurokapsiar @layershifter
feat(List): behavior, example and prototype for navigable list (#1904)
93cdff7 
* accessibility for horizontal list

* better prop types, add steps test

* changelog

* fix steps test

(cherry picked from commit 7ca52d9)
@layershifter layershifter mentioned this pull request Sep 13, 2019
Closed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@miroslavstastny miroslavstastny miroslavstastny approved these changes

@dvdzkwsk dvdzkwsk Awaiting requested review from dvdzkwsk

@kuzhelov kuzhelov Awaiting requested review from kuzhelov

@layershifter layershifter Awaiting requested review from layershifter layershifter is a code owner

@levithomason levithomason Awaiting requested review from levithomason levithomason is a code owner

@mnajdova mnajdova Awaiting requested review from mnajdova

Assignees
No one assigned
Labels
accessibility All the Accessibility tasks and bugs should be tagged with this. 🚀 ready for review
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@jurokapsiar @miroslavstastny