Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

[terra-folder-tree] Fix incorrect screenreader announcement of indexes #2106

Merged
merged 4 commits into from
Mar 28, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
3 changes: 3 additions & 0 deletions packages/terra-folder-tree/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@

## Unreleased

* Fixed
* Fixed screenreader reading the wrong indexes for subfolder items.

## 1.0.0-alpha.10 - (March 14, 2024)

* Changed
Expand Down
20 changes: 18 additions & 2 deletions packages/terra-folder-tree/src/subcomponents/FolderTreeItem.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,16 @@ const propTypes = {
* Level of nesting for this item.
*/
level: PropTypes.number,
/**
* @private
* The position of the item among its sibling items in the same group (subfolder).
*/
ariaPosInSet: PropTypes.number,
/**
* @private
* Number of sibling items in the same group (subfolder).
*/
ariaSetSize: PropTypes.number,
/**
* @private
* Ref to the parent folder of the current item.
Expand Down Expand Up @@ -83,6 +93,8 @@ const FolderTreeItem = ({
level,
onSelect,
onToggle,
ariaPosInSet,
ariaSetSize,
subfolderItems,
parentRef,
intl,
Expand All @@ -103,11 +115,13 @@ const FolderTreeItem = ({
hidden={!isExpanded}
ref={subFolderNode}
>
{subfolderItems.map((item) => (
{subfolderItems.map((item, index) => (
<FolderTreeItem
{...item.props}
intl={intl}
level={level + 1}
ariaSetSize={subfolderItems.length}
ariaPosInSet={index + 1}
parentRef={itemNode}
/>
))}
Expand Down Expand Up @@ -201,6 +215,8 @@ const FolderTreeItem = ({
aria-expanded={isFolder ? isExpanded : null}
aria-selected={isSelectable && isSelected}
onClick={isFolder ? handleToggle : handleSelect}
aria-posinset={ariaPosInSet}
aria-setsize={ariaSetSize}
onKeyDown={handleKeyDown}
data-item-show-focus
tabIndex={-1}
Expand Down Expand Up @@ -231,7 +247,7 @@ const FolderTreeItem = ({
text={`, ${selectableAnnouncement}`}
/>
</span>
)}
)}
alignFitStart="center"
/>
</span>
Expand Down
6 changes: 6 additions & 0 deletions packages/terra-folder-tree/tests/jest/FolderTree.test.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,14 @@ describe('basic folder tree', () => {

expect(subfolder.find('span.fill.fill-block').length).toBe(3);
expect(subfolder.find('span.fill.fill-block').at(0).text()).toBe('item 1, Terra.folder-tree.item.selectable-announcement');
expect(subfolder.find('li[role="treeitem"]').at(0).prop('aria-setsize')).toBe(3);
expect(subfolder.find('li[role="treeitem"]').at(0).prop('aria-posinset')).toBe(1);
expect(subfolder.find('span.fill.fill-block').at(1).text()).toBe('item 2, Terra.folder-tree.item.selectable-announcement');
expect(subfolder.find('li[role="treeitem"]').at(1).prop('aria-setsize')).toBe(3);
expect(subfolder.find('li[role="treeitem"]').at(1).prop('aria-posinset')).toBe(2);
expect(subfolder.find('span.fill.fill-block').at(2).text()).toBe('item 3, Terra.folder-tree.item.selectable-announcement');
expect(subfolder.find('li[role="treeitem"]').at(2).prop('aria-setsize')).toBe(3);
expect(subfolder.find('li[role="treeitem"]').at(2).prop('aria-posinset')).toBe(3);
});

it('hides folder items when enclosing folder is collapsed', () => {
Expand Down
1 change: 1 addition & 0 deletions packages/terra-framework-docs/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

* Changed
* Updated the `terra-data-grid` and `terra-table` focusable cell examples to remove confusion caused by column header names.
* Updated `terra-folder-tree` expand/collapse examples to be consistent with screenreader announcements.

## 1.77.0 - (March 25, 2024)

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,19 +13,19 @@ const data = {
items: [
{
id: 'item-1-level-1',
label: 'Projects - Level 1',
label: 'Projects - Level 0',
items: [
{
id: 'item-1-level-2',
label: 'Projects - Level 2',
label: 'Projects - Level 1',
items: [
{
id: 'item-1-level-3',
label: 'Projects - Level 3',
label: 'Projects - Level 2',
items: [
{
id: 'item-1-level-4',
label: 'Projects - Level 4',
label: 'Projects - Level 3',
items: [
{ id: 'item-1-level-5', label: 'Nested Document', icon: <IconDocuments /> },
],
Expand Down
Loading