fix: improve aria markup for toolboxes (#9398)

* fix: set activedescendant correctly on toolbox

* fix: dont manually set posinset for toolbox categories

* fix: dont set activedescendant on toolbox at all
This commit is contained in:
Maribeth Moffatt
2025-10-03 10:54:14 -07:00
committed by GitHub
parent 3cf834a6a6
commit bf576d5bc3
2 changed files with 0 additions and 50 deletions

View File

@@ -137,18 +137,6 @@ export class CollapsibleToolboxCategory
aria.setState(this.htmlDiv_ as HTMLDivElement, aria.State.EXPANDED, false);
aria.setRole(this.htmlDiv_!, aria.Role.TREEITEM);
// Ensure this group has properly set children.
const selectableChildren =
this.getChildToolboxItems().filter((item) => item.isSelectable()) ?? null;
const focusableChildIds = selectableChildren.map(
(selectable) => selectable.getFocusableElement().id,
);
aria.setState(
this.htmlDiv_!,
aria.State.OWNS,
[...new Set(focusableChildIds)].join(' '),
);
return this.htmlDiv_!;
}

View File

@@ -369,7 +369,6 @@ export class Toolbox
this.renderContents_(toolboxDef['contents']);
this.position();
this.handleToolboxItemResize();
this.recomputeAriaOwners();
}
/**
@@ -446,7 +445,6 @@ export class Toolbox
this.addToolboxItem_(child);
}
}
this.recomputeAriaOwners();
}
/**
@@ -881,11 +879,6 @@ export class Toolbox
this.selectedItem_ = null;
this.previouslySelectedItem_ = item;
item.setSelected(false);
aria.setState(
this.contentsDiv_ as Element,
aria.State.ACTIVEDESCENDANT,
'',
);
}
/**
@@ -901,11 +894,6 @@ export class Toolbox
this.selectedItem_ = newItem;
this.previouslySelectedItem_ = oldItem;
newItem.setSelected(true);
aria.setState(
this.contentsDiv_ as Element,
aria.State.ACTIVEDESCENDANT,
newItem.getId(),
);
}
/**
@@ -1155,32 +1143,6 @@ export class Toolbox
this.autoHide(false);
}
}
/**
* Recomputes ARIA tree ownership relationships for all of this toolbox's
* categories and items.
*
* This should only be done when the toolbox's contents have changed.
*/
recomputeAriaOwners() {
const focusable = this.getFocusableElement();
const selectableChildren =
this.getToolboxItems().filter((item) => item.isSelectable()) ?? null;
const focusableChildElems = selectableChildren.map((selectable) =>
selectable.getFocusableElement(),
);
const focusableChildIds = focusableChildElems.map((elem) => elem.id);
aria.setState(
focusable,
aria.State.OWNS,
[...new Set(focusableChildIds)].join(' '),
);
// Ensure children have the correct position set.
// TODO: Fix collapsible subcategories. Their groups aren't set up correctly yet, and they aren't getting a correct accounting in top-level toolbox tree.
focusableChildElems.forEach((elem, index) =>
aria.setState(elem, aria.State.POSINSET, index + 1),
);
}
}
/** CSS for Toolbox. See css.js for use. */