Skip to content
This repository was archived by the owner on Jul 9, 2025. It is now read-only.

a11y: fix project tree roles and aria #9093

Merged
tonyanziano merged 2 commits into from
Apr 4, 2022
Merged

a11y: fix project tree roles and aria #9093

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1a9f51b
a11y: fix project tre roles and aria
OEvgeny Apr 1, 2022
7daff04
Merge branch 'main' into a11y/project-tree-2
OEvgeny Apr 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ export const ExpandableNode = ({
onKeyDown={handleKey}
>
{/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-noninteractive-tabindex */}
<li css={listItemStyle(isActive, isExpanded, children != null)} data-testid={'summaryTag'}>
<li css={listItemStyle(isActive, isExpanded, children != null)} data-testid={'summaryTag'} role="treeitem">
{summary}
</li>
{children != null && isExpanded && <div role="group">{children}</div>}
Expand Down
28 changes: 12 additions & 16 deletions Composer/packages/client/src/components/ProjectTree/treeItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -427,7 +427,7 @@ export const TreeItem: React.FC<ITreeItemProps> = ({
}) => {
const [thisItemSelected, setThisItemSelected] = useState<boolean>(false);

const ariaLabel = `${objectNames[itemType]()} ${link.displayName}`;
const ariaLabel = `${link.displayName} ${objectNames[itemType]()}`;
const dataTestId = `${dialogName ?? '$Root'}_${link.displayName}`;
const isExternal = Boolean(link.href);

Expand Down Expand Up @@ -470,8 +470,18 @@ export const TreeItem: React.FC<ITreeItemProps> = ({
tabIndex={0}
onBlur={item.onBlur}
onFocus={item.onFocus}
onKeyDown={
onSelect
? (e) => {
if (e.key === 'Enter') {
onSelect(link);
e.stopPropagation();
}
}
: undefined
}
>
<div css={projectTreeItem} role="presentation" tabIndex={-1}>
<div css={projectTreeItem} role="presentation">
{item.itemType != null && TreeIcons[item.itemType] != null && (
<Icon
iconName={TreeIcons[item.itemType]}
Expand All @@ -482,7 +492,6 @@ export const TreeItem: React.FC<ITreeItemProps> = ({
outline: 'none',
},
}}
tabIndex={-1}
/>
)}
<span className={'treeItem-text'} css={itemName(maxTextWidth)}>
Expand Down Expand Up @@ -564,28 +573,15 @@ export const TreeItem: React.FC<ITreeItemProps> = ({

return (
<div
aria-label={ariaLabel}
css={navContainer(isMenuOpen, isActive, thisItemSelected, textWidth - overflowIconWidthOnHover, isBroken)}
data-testid={dataTestId}
role={role}
tabIndex={0}
onClick={
onSelect
? () => {
onSelect(link);
}
: undefined
}
onKeyDown={
onSelect
? (e) => {
if (e.key === 'Enter') {
onSelect(link);
e.stopPropagation();
}
}
: undefined
}
>
<OverflowSet
css={overflowSet(isBroken)}
Expand Down