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

feat(Tree): add behaviors with list/listitem roles #1928

Merged
merged 16 commits into from
Sep 19, 2019

Conversation

silviuaavram
Copy link
Collaborator

@silviuaavram silviuaavram commented Sep 12, 2019

Needed in order to make VO navigation possible. It will read the tree as a list, but it will calculate the list item accordingly, based on the level, setsize, posinset.

Feedback on how to name these behaviors?

Also added missing tests for tree behaviors.

@silviuaavram silviuaavram added accessibility All the Accessibility tasks and bugs should be tagged with this. 🚀 ready for review labels Sep 12, 2019
@codecov
Copy link

codecov bot commented Sep 12, 2019

Codecov Report

Merging #1928 into master will increase coverage by <.01%.
The diff coverage is 80%.

Impacted file tree graph

@@            Coverage Diff            @@
##           master   #1928      +/-   ##
=========================================
+ Coverage   70.39%   70.4%   +<.01%     
=========================================
  Files         889     892       +3     
  Lines        7851    7867      +16     
  Branches     2264    2271       +7     
=========================================
+ Hits         5527    5539      +12     
- Misses       2313    2315       +2     
- Partials       11      13       +2
Impacted Files Coverage Δ
...s/HierarchicalTree/hierarchicalTreeItemBehavior.ts 100% <ø> (ø) ⬆️
...c/lib/accessibility/Behaviors/Tree/treeBehavior.ts 100% <ø> (ø) ⬆️
packages/react/test/specs/behaviors/testHelper.tsx 77.19% <ø> (ø) ⬆️
...b/accessibility/Behaviors/Tree/treeItemBehavior.ts 100% <ø> (ø) ⬆️
...Behaviors/Tree/treeTitleAsListItemTitleBehavior.ts 100% <100%> (ø)
...ility/Behaviors/Tree/treeItemAsListItemBehavior.ts 100% <100%> (ø)
packages/react/src/components/Tree/TreeTitle.tsx 70% <100%> (ø) ⬆️
...accessibility/Behaviors/Tree/treeAsListBehavior.ts 100% <100%> (ø)
packages/react/src/components/Tree/Tree.tsx 70.47% <57.14%> (-1.1%) ⬇️
packages/react/src/components/Tree/TreeItem.tsx 69.56% <66.66%> (-2.53%) ⬇️
... and 3 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 90d3719...cec972a. Read the comment docs.

}

export type TreeItemBehaviorProps = {
/** Indicated if tree title has a subtree */
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
/** Indicated if tree title has a subtree */
/** Indicates whether `TreeTitle` has a subtree */

@@ -20,7 +20,7 @@ const treeItemBehavior: Accessibility<TreeItemBehaviorProps> = props => ({
root: {
role: 'none',
...(props.hasSubtree && {
'aria-expanded': props.open,
'aria-expanded': props.open ? 'true' : 'false',
Copy link
Contributor

Choose a reason for hiding this comment

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

There are a few instances in Stardust where we pass a boolean to aria-expanded. Let's report it as an issue?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

hmm let me take a look

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

for consistency I made this one boolean as well. what do you think?

Copy link
Contributor

Choose a reason for hiding this comment

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

Looks good to me

export default treeTitleAsListItemTitleBehavior

type TreeTitleBehavior = {
/** Indicated if tree title has a subtree */
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
/** Indicated if tree title has a subtree */
/** Indicates whether `TreeTitle` has a subtree */


describe('TreeItemAsListItemBehavior', () => {
describe('role', () => {
test(`is 'none' if not a leaf`, () => {
Copy link
Contributor

Choose a reason for hiding this comment

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

How about adding a test where its a leaf?

expect(expectedResult.attributes.root.role).toEqual('treeitem')
})

test(`is 'treeitem' if not a leaf`, () => {
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
test(`is 'treeitem' if not a leaf`, () => {
test(`is 'treeitem' if a leaf`, () => {

})
}

type TreeBehaviorProps = {} & Pick<AccessibilityAttributes, 'aria-labelledby'>
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
type TreeBehaviorProps = {} & Pick<AccessibilityAttributes, 'aria-labelledby'>
type TreeBehaviorProps = Pick<AccessibilityAttributes, 'aria-labelledby'>

nit, currently looks a bit strange

@vercel vercel bot temporarily deployed to staging September 17, 2019 13:25 Inactive
Copy link
Contributor

@jurokapsiar jurokapsiar left a comment

Choose a reason for hiding this comment

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

Looks good to me and I think it is as good as it currently can be.

Can you please add an example? It's quite complex to put all the behaviors on the right place

@jurokapsiar
Copy link
Contributor

pls add changelog before merging

@vercel vercel bot temporarily deployed to staging September 19, 2019 09:47 Inactive
@lucivpav lucivpav changed the title chore(Tree): add behaviors with list/listitem roles feat(Tree): add behaviors with list/listitem roles Sep 19, 2019
@silviuaavram silviuaavram merged commit 47453b9 into master Sep 19, 2019
@silviuaavram silviuaavram deleted the chore/tree-as-list-behaviors branch September 19, 2019 10:14
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
accessibility All the Accessibility tasks and bugs should be tagged with this. 🚀 ready for review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants