-
Notifications
You must be signed in to change notification settings - Fork 520
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
Add TreeView.LeadingAction
sub-component
#4546
Changes from 1 commit
a5ccd2d
66c876d
c982c1d
61b2e50
bba15da
1794aa5
5d54533
069b72a
dd39abb
f5e3dde
a8a3069
1f63a8b
f2442b7
920ea88
770e321
f9b880d
3771156
c8b1086
b438d27
29348d6
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -45,6 +45,7 @@ const ItemContext = React.createContext<{ | |
setIsExpanded: (isExpanded: boolean) => void | ||
leadingVisualId: string | ||
trailingVisualId: string | ||
leadingActionId: string | ||
}>({ | ||
itemId: '', | ||
level: 1, | ||
|
@@ -54,6 +55,7 @@ const ItemContext = React.createContext<{ | |
setIsExpanded: () => {}, | ||
leadingVisualId: '', | ||
trailingVisualId: '', | ||
leadingActionId: '', | ||
}) | ||
|
||
// ---------------------------------------------------------------------------- | ||
|
@@ -374,6 +376,7 @@ const Item = React.forwardRef<HTMLElement, TreeViewItemProps>( | |
const labelId = useId() | ||
const leadingVisualId = useId() | ||
const trailingVisualId = useId() | ||
const leadingActionId = useId() | ||
const [isExpanded, setIsExpanded] = useControllableState({ | ||
name: itemId, | ||
// If the item was previously mounted, it's expanded state might be cached. | ||
|
@@ -449,6 +452,7 @@ const Item = React.forwardRef<HTMLElement, TreeViewItemProps>( | |
setIsExpanded: setIsExpandedWithCache, | ||
leadingVisualId, | ||
trailingVisualId, | ||
leadingActionId, | ||
}} | ||
> | ||
{/* @ts-ignore Box doesn't have type support for `ref` used in combination with `as` */} | ||
|
@@ -459,7 +463,7 @@ const Item = React.forwardRef<HTMLElement, TreeViewItemProps>( | |
id={itemId} | ||
role="treeitem" | ||
aria-labelledby={labelId} | ||
aria-describedby={`${leadingVisualId} ${trailingVisualId}`} | ||
aria-describedby={`${leadingActionId} ${leadingVisualId} ${trailingVisualId}`} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Don't think the action should be used to describe the item, especially when the action itself is not accessible (aria-hidden + tab-index=-1) 🤔 cc @ericwbailey for confirmation There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
We'll likely want to include a hint down the line in the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @ayy-bc Final thing for you to look at :) There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @siddharthkp I was just following what There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I can remove it or you can do so, whatever you prefer (lmk). There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Yes please, I think actions have to be treated differently than visuals
Makes sense, but be careful about keyboard navigation. For example, the toggle element (picture below) is not accessible by keyboard and hence does not have a label and is aria-hidden ![]() There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @siddharthkp pushed the changes |
||
aria-level={level} | ||
aria-expanded={isSubTreeEmpty ? undefined : isExpanded} | ||
aria-current={isCurrentItem ? 'true' : undefined} | ||
|
@@ -850,14 +854,16 @@ TrailingVisual.displayName = 'TreeView.TrailingVisual' | |
// TreeView.LeadingAction | ||
|
||
const LeadingAction: React.FC<TreeViewVisualProps> = props => { | ||
const {isExpanded, leadingVisualId} = React.useContext(ItemContext) | ||
const {isExpanded, leadingActionId} = React.useContext(ItemContext) | ||
const children = typeof props.children === 'function' ? props.children({isExpanded}) : props.children | ||
return ( | ||
<> | ||
<div className="PRIVATE_VisuallyHidden" aria-hidden={true} id={leadingVisualId}> | ||
<div className="PRIVATE_VisuallyHidden" aria-hidden={true} id={leadingActionId}> | ||
{props.label} | ||
</div> | ||
<div className="PRIVATE_TreeView-item-leading-action">{children}</div> | ||
<div className="PRIVATE_TreeView-item-leading-action" aria-hidden={true}> | ||
{children} | ||
</div> | ||
</> | ||
) | ||
} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@ayy-bc Don't think we need this anymore either, removed it :)