BEST PRACTICE Vs IMPLE
Best Practice vs Implementation Analysis
- DATA STORAGE
┌───────────────┬────────────────────────┬────────────────────────────────────────────────────────┬─────────────┐ │ Best Practice │ Recommendation │ Implementation │ Verdict │ ├───────────────┼────────────────────────┼────────────────────────────────────────────────────────┼─────────────┤ │ Adjacency │ Simple but slow │ Used. org_chart_people.manager_id references parent. │ Appropriate │ │ List │ recursive queries │ Tree built at runtime in frontend. │ │ ├───────────────┼────────────────────────┼────────────────────────────────────────────────────────┼─────────────┤ │ Path │ Recommended for scale │ Not used. No materialized path column. │ Not needed │ │ Enumeration │ │ │ │ ├───────────────┼────────────────────────┼────────────────────────────────────────────────────────┼─────────────┤ │ Nested Sets │ Best for read-heavy │ Not used. │ Not needed │ ├───────────────┼────────────────────────┼────────────────────────────────────────────────────────┼─────────────┤ │ Graph DB │ For enterprise scale │ Not used. Supabase/Postgres. │ Not needed │ │ (Neo4j) │ │ │ │ └───────────────┴────────────────────────┴────────────────────────────────────────────────────────┴─────────────┘
Assessment: The adjacency list is the right choice here. This app generates static HTML exports from relatively small datasets (templates cap at 50–250 people). There’s no need for recursive CTEs or path enumeration — the entire people list is fetched once and the tree is built in-memory in the frontend (OrgDataTable.tsx:54-87) and in the template renderer. The org_chart_relationships table also supports dotted-line/matrix relationships as a separate concern, which is a good design.
- PRESENTATION & LAYOUT
┌───────────────────────┬──────────────────┬────────────────────────────────────────────────────────────────────┐ │ Best Practice │ Recommendation │ Status │ ├───────────────────────┼──────────────────┼────────────────────────────────────────────────────────────────────┤ │ Hybrid Layout │ │ Partially. The top-down-tree template is purely vertical. The │ │ (horizontal top, │ Recommended │ horizontal-tree template is purely horizontal (left-to-right). No │ │ vertical lower) │ │ single template combines both. │ ├───────────────────────┼──────────────────┼────────────────────────────────────────────────────────────────────┤ │ Progressive │ │ Yes. The interactive-collapsible template uses
│
│ Disclosure │ Essential │ with JS-enhanced expand/collapse. The indented-list template also │
│ (expand/collapse) │ │ uses /. │
├───────────────────────┼──────────────────┼────────────────────────────────────────────────────────────────────┤
│ │ │ Partially. The interactive-collapsible template has real-time │
│ │ │ search with debounce (200ms), auto-expands ancestor nodes of │
│ Search and Center │ Recommended │ matches, and shows match count via aria-live. However there is no │
│ │ │ “fly to” or visual centering — it highlights matches with │
│ │ │ tags. │
├───────────────────────┼──────────────────┼────────────────────────────────────────────────────────────────────┤
│ “Me” View │ Recommended │ Not implemented. No concept of “current user” within the generated │
│ │ │ HTML. │
├───────────────────────┼──────────────────┼────────────────────────────────────────────────────────────────────┤
│ │ │ Partially. The database supports relationship types (dotted_line, │
│ │ Use dotted for │ advisory, committee, project, mentor), and photo-cards uses dashed │
│ Dotted vs Solid Lines │ matrix reporting │ lines. But the main tree templates only render solid-line direct │
│ │ │ reports — secondary relationships aren’t visually rendered in most │
│ │ │ templates. │
├───────────────────────┼──────────────────┼────────────────────────────────────────────────────────────────────┤
│ │ │ Yes. Cards show name, title, department badge. Contact details are │
│ Minimal Card Design │ Keep cards clean │ in expandable (indented-list, interactive-collapsible) │
│ (Name, Title, Photo) │ │ or hidden until hover/focus (compact-cards). Photo cards support │
│ │ │ photos with initial-based avatar fallback. │
├───────────────────────┼──────────────────┼────────────────────────────────────────────────────────────────────┤
│ │ │ Not applicable. These are static HTML exports — all data is baked │
│ Lazy Loading (fetch │ For performance │ in at generation time. The interactive-collapsible template uses │
│ children on expand) │ │ progressive disclosure to hide content visually, but all data is │
│ │ │ present in the DOM. │
└───────────────────────┴──────────────────┴────────────────────────────────────────────────────────────────────┘
- WCAG / ACCESSIBILITY
┌────────────────────┬────────────────────────┬─────────────────────────────────────────────────────────────────┐
│ Best Practice │ Recommendation │ Status │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ Nested
/- │ Foundation for screen │ Yes. Top-down-tree, horizontal-tree, and │
│ structure │ readers │ interactive-collapsible all use nested
/- . │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ role=“tree” / │ │ Yes. Top-down-tree, horizontal-tree, interactive-collapsible │
│ role=“treeitem” │ ARIA tree widget │ all use role=“tree” on root
and role=“treeitem” on - │
│ │ │ elements. │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ aria-expanded │ Toggle state for │ Yes. Set on treeitems with children. The WCAG validator has a │
│ │ expand/collapse │ dedicated rule (aria-expanded-required) checking this. │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ aria-controls │ Link toggle to │ Yes. Interactive-collapsible links summary to children group. │
│ │ sub-list │ Top-down-tree uses aria-owns. │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ Keyboard: Tab to │ Sequential navigation │ Yes. All interactive elements are focusable. │
│ cards │ │ │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ Keyboard: Arrow │ Up/Down siblings, │ Yes in interactive-collapsible template (full arrow key │
│ keys │ Right expand, Left │ navigation). Yes in OrgDataTable editor (Up/Down/Home/End). No │
│ │ collapse │ in the static tree templates (they’re non-interactive HTML). │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ Keyboard: │ Expand/collapse nodes │ Yes. Interactive-collapsible handles Enter/Space. │
│ Enter/Space toggle │ │ /
also handles this natively. │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ Focus Visible │ High-contrast outline │ Yes. All templates include 3px solid outline with 2px offset. │
│ │ │ Global CSS has :focus-visible styles. │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ aria-live │ Notify screen readers │ Yes. Interactive-collapsible announces match count. Editor uses │
│ announcements │ of changes │ aria-live=“polite” for edit confirmations. │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ Color contrast ≥ │ │ Validated. The WCAG validator checks inline color contrast. │
│ 4.5:1 │ WCAG AA │ Five color schemes are provided, each designed for sufficient │
│ │ │ contrast. │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ Text resizing to │ Flexible layout │ Yes. Templates use rem/em units and responsive CSS with media │
│ 200% │ │ queries at 640px. │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ No canvas/SVG for │ Keep text in DOM │ Yes. All text is standard HTML. Lines are CSS pseudo-elements │
│ text │ │ (::before/::after), not SVG/canvas. │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ Skip navigation │ Required │ Yes. Every template includes a skip link. The WCAG validator │
│ link │ │ has a dedicated skip-link rule. │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ Alternative flat │ Fallback for complex │ Yes. The indented-list and condensed-text templates serve as │
│ view │ charts │ accessible alternative views alongside the visual tree │
│ │ │ templates. │
└────────────────────┴────────────────────────┴─────────────────────────────────────────────────────────────────┘
- WCAG VALIDATOR COVERAGE
The custom validator checks 14 rules, plus axe-core integration. Two rules are org-chart-specific
(aria-tree-items, aria-expanded-required), which is good. However, the validator does not check:
- Keyboard operability (can’t test without a browser)
- Arrow key navigation functionality
- Dynamic aria-expanded toggling (only checks static HTML)
- Zoom/reflow at 200% (requires rendering)
- Color contrast from CSS stylesheets (only checks inline styles)
These are inherent limitations of static HTML analysis — a real WCAG audit would need browser-based testing
(e.g., Playwright + axe).
Summary
Category: Data Storage
Grade: A
Notes: Adjacency list is the right fit. Relationship types table adds matrix support.
────────────────────────────────────────
Category: Semantic HTML
Grade: A
Notes: Nested lists, ARIA tree roles, proper landmarks throughout.
────────────────────────────────────────
Category: Keyboard Navigation
Grade: A-
Notes: Full arrow-key support in interactive template; static templates rely on native HTML.
────────────────────────────────────────
Category: Progressive Disclosure
Grade: A
Notes:
/ with JS enhancement. Multiple templates offer different levels.
────────────────────────────────────────
Category: Search
Grade: B+
Notes: Present in interactive template with highlighting and ancestor expansion; no “center on result” or “Me”
view.
────────────────────────────────────────
Category: Visual Layout
Grade: B
Notes: No true hybrid layout (horizontal top + vertical bottom). Each template is one direction only.
────────────────────────────────────────
Category: Dotted-Line Relationships
Grade: B-
Notes: Database supports them, but most templates don’t render secondary relationships visually.
────────────────────────────────────────
Category: WCAG Validation
Grade: A-
Notes: 14 custom rules + axe-core. Limited by static analysis (can’t test keyboard/zoom).
────────────────────────────────────────
Category: Template Variety
Grade: A
Notes: 8 templates covering tree, list, card, grid, and text views — exactly the “alternative views” WCAG
recommends.
The biggest gaps are the lack of a hybrid layout template and underutilization of the relationship types data in
visual rendering. The strengths are in semantic HTML, ARIA tree implementation, keyboard navigation, and having
multiple accessible alternative views.
. │
├───────────────────────┼──────────────────┼────────────────────────────────────────────────────────────────────┤
│ │ │ Partially. The interactive-collapsible template has real-time │
│ │ │ search with debounce (200ms), auto-expands ancestor nodes of │
│ Search and Center │ Recommended │ matches, and shows match count via aria-live. However there is no │
│ │ │ “fly to” or visual centering — it highlights matches with │
│ │ │ tags. │
├───────────────────────┼──────────────────┼────────────────────────────────────────────────────────────────────┤
│ “Me” View │ Recommended │ Not implemented. No concept of “current user” within the generated │
│ │ │ HTML. │
├───────────────────────┼──────────────────┼────────────────────────────────────────────────────────────────────┤
│ │ │ Partially. The database supports relationship types (dotted_line, │
│ │ Use dotted for │ advisory, committee, project, mentor), and photo-cards uses dashed │
│ Dotted vs Solid Lines │ matrix reporting │ lines. But the main tree templates only render solid-line direct │
│ │ │ reports — secondary relationships aren’t visually rendered in most │
│ │ │ templates. │
├───────────────────────┼──────────────────┼────────────────────────────────────────────────────────────────────┤
│ │ │ Yes. Cards show name, title, department badge. Contact details are │
│ Minimal Card Design │ Keep cards clean │ in expandable (indented-list, interactive-collapsible) │
│ (Name, Title, Photo) │ │ or hidden until hover/focus (compact-cards). Photo cards support │
│ │ │ photos with initial-based avatar fallback. │
├───────────────────────┼──────────────────┼────────────────────────────────────────────────────────────────────┤
│ │ │ Not applicable. These are static HTML exports — all data is baked │
│ Lazy Loading (fetch │ For performance │ in at generation time. The interactive-collapsible template uses │
│ children on expand) │ │ progressive disclosure to hide content visually, but all data is │
│ │ │ present in the DOM. │
└───────────────────────┴──────────────────┴────────────────────────────────────────────────────────────────────┘
- WCAG / ACCESSIBILITY
┌────────────────────┬────────────────────────┬─────────────────────────────────────────────────────────────────┐
│ Best Practice │ Recommendation │ Status │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ Nested
/- │ Foundation for screen │ Yes. Top-down-tree, horizontal-tree, and │
│ structure │ readers │ interactive-collapsible all use nested
/- . │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ role=“tree” / │ │ Yes. Top-down-tree, horizontal-tree, interactive-collapsible │
│ role=“treeitem” │ ARIA tree widget │ all use role=“tree” on root
and role=“treeitem” on - │
│ │ │ elements. │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ aria-expanded │ Toggle state for │ Yes. Set on treeitems with children. The WCAG validator has a │
│ │ expand/collapse │ dedicated rule (aria-expanded-required) checking this. │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ aria-controls │ Link toggle to │ Yes. Interactive-collapsible links summary to children group. │
│ │ sub-list │ Top-down-tree uses aria-owns. │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ Keyboard: Tab to │ Sequential navigation │ Yes. All interactive elements are focusable. │
│ cards │ │ │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ Keyboard: Arrow │ Up/Down siblings, │ Yes in interactive-collapsible template (full arrow key │
│ keys │ Right expand, Left │ navigation). Yes in OrgDataTable editor (Up/Down/Home/End). No │
│ │ collapse │ in the static tree templates (they’re non-interactive HTML). │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ Keyboard: │ Expand/collapse nodes │ Yes. Interactive-collapsible handles Enter/Space. │
│ Enter/Space toggle │ │ /
also handles this natively. │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ Focus Visible │ High-contrast outline │ Yes. All templates include 3px solid outline with 2px offset. │
│ │ │ Global CSS has :focus-visible styles. │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ aria-live │ Notify screen readers │ Yes. Interactive-collapsible announces match count. Editor uses │
│ announcements │ of changes │ aria-live=“polite” for edit confirmations. │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ Color contrast ≥ │ │ Validated. The WCAG validator checks inline color contrast. │
│ 4.5:1 │ WCAG AA │ Five color schemes are provided, each designed for sufficient │
│ │ │ contrast. │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ Text resizing to │ Flexible layout │ Yes. Templates use rem/em units and responsive CSS with media │
│ 200% │ │ queries at 640px. │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ No canvas/SVG for │ Keep text in DOM │ Yes. All text is standard HTML. Lines are CSS pseudo-elements │
│ text │ │ (::before/::after), not SVG/canvas. │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ Skip navigation │ Required │ Yes. Every template includes a skip link. The WCAG validator │
│ link │ │ has a dedicated skip-link rule. │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ Alternative flat │ Fallback for complex │ Yes. The indented-list and condensed-text templates serve as │
│ view │ charts │ accessible alternative views alongside the visual tree │
│ │ │ templates. │
└────────────────────┴────────────────────────┴─────────────────────────────────────────────────────────────────┘
- WCAG VALIDATOR COVERAGE
The custom validator checks 14 rules, plus axe-core integration. Two rules are org-chart-specific
(aria-tree-items, aria-expanded-required), which is good. However, the validator does not check:
- Keyboard operability (can’t test without a browser)
- Arrow key navigation functionality
- Dynamic aria-expanded toggling (only checks static HTML)
- Zoom/reflow at 200% (requires rendering)
- Color contrast from CSS stylesheets (only checks inline styles)
These are inherent limitations of static HTML analysis — a real WCAG audit would need browser-based testing
(e.g., Playwright + axe).
Summary
Category: Data Storage
Grade: A
Notes: Adjacency list is the right fit. Relationship types table adds matrix support.
────────────────────────────────────────
Category: Semantic HTML
Grade: A
Notes: Nested lists, ARIA tree roles, proper landmarks throughout.
────────────────────────────────────────
Category: Keyboard Navigation
Grade: A-
Notes: Full arrow-key support in interactive template; static templates rely on native HTML.
────────────────────────────────────────
Category: Progressive Disclosure
Grade: A
Notes:
/ with JS enhancement. Multiple templates offer different levels.
────────────────────────────────────────
Category: Search
Grade: B+
Notes: Present in interactive template with highlighting and ancestor expansion; no “center on result” or “Me”
view.
────────────────────────────────────────
Category: Visual Layout
Grade: B
Notes: No true hybrid layout (horizontal top + vertical bottom). Each template is one direction only.
────────────────────────────────────────
Category: Dotted-Line Relationships
Grade: B-
Notes: Database supports them, but most templates don’t render secondary relationships visually.
────────────────────────────────────────
Category: WCAG Validation
Grade: A-
Notes: 14 custom rules + axe-core. Limited by static analysis (can’t test keyboard/zoom).
────────────────────────────────────────
Category: Template Variety
Grade: A
Notes: 8 templates covering tree, list, card, grid, and text views — exactly the “alternative views” WCAG
recommends.
The biggest gaps are the lack of a hybrid layout template and underutilization of the relationship types data in
visual rendering. The strengths are in semantic HTML, ARIA tree implementation, keyboard navigation, and having
multiple accessible alternative views.
- WCAG / ACCESSIBILITY
┌────────────────────┬────────────────────────┬─────────────────────────────────────────────────────────────────┐ │ Best Practice │ Recommendation │ Status │ ├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤ │ Nested
- /
- │ Foundation for screen │ Yes. Top-down-tree, horizontal-tree, and │
│ structure │ readers │ interactive-collapsible all use nested
- /
- . │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ role=“tree” / │ │ Yes. Top-down-tree, horizontal-tree, interactive-collapsible │
│ role=“treeitem” │ ARIA tree widget │ all use role=“tree” on root
- and role=“treeitem” on
- │
│ │ │ elements. │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ aria-expanded │ Toggle state for │ Yes. Set on treeitems with children. The WCAG validator has a │
│ │ expand/collapse │ dedicated rule (aria-expanded-required) checking this. │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ aria-controls │ Link toggle to │ Yes. Interactive-collapsible links summary to children group. │
│ │ sub-list │ Top-down-tree uses aria-owns. │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ Keyboard: Tab to │ Sequential navigation │ Yes. All interactive elements are focusable. │
│ cards │ │ │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ Keyboard: Arrow │ Up/Down siblings, │ Yes in interactive-collapsible template (full arrow key │
│ keys │ Right expand, Left │ navigation). Yes in OrgDataTable editor (Up/Down/Home/End). No │
│ │ collapse │ in the static tree templates (they’re non-interactive HTML). │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ Keyboard: │ Expand/collapse nodes │ Yes. Interactive-collapsible handles Enter/Space. │
│ Enter/Space toggle │ │ /
also handles this natively. │ ├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤ │ Focus Visible │ High-contrast outline │ Yes. All templates include 3px solid outline with 2px offset. │ │ │ │ Global CSS has :focus-visible styles. │ ├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤ │ aria-live │ Notify screen readers │ Yes. Interactive-collapsible announces match count. Editor uses │ │ announcements │ of changes │ aria-live=“polite” for edit confirmations. │ ├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤ │ Color contrast ≥ │ │ Validated. The WCAG validator checks inline color contrast. │ │ 4.5:1 │ WCAG AA │ Five color schemes are provided, each designed for sufficient │ │ │ │ contrast. │ ├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤ │ Text resizing to │ Flexible layout │ Yes. Templates use rem/em units and responsive CSS with media │ │ 200% │ │ queries at 640px. │ ├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤ │ No canvas/SVG for │ Keep text in DOM │ Yes. All text is standard HTML. Lines are CSS pseudo-elements │ │ text │ │ (::before/::after), not SVG/canvas. │ ├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤ │ Skip navigation │ Required │ Yes. Every template includes a skip link. The WCAG validator │ │ link │ │ has a dedicated skip-link rule. │ ├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤ │ Alternative flat │ Fallback for complex │ Yes. The indented-list and condensed-text templates serve as │ │ view │ charts │ accessible alternative views alongside the visual tree │ │ │ │ templates. │ └────────────────────┴────────────────────────┴─────────────────────────────────────────────────────────────────┘
- WCAG VALIDATOR COVERAGE
The custom validator checks 14 rules, plus axe-core integration. Two rules are org-chart-specific (aria-tree-items, aria-expanded-required), which is good. However, the validator does not check:
- Keyboard operability (can’t test without a browser)
- Arrow key navigation functionality
- Dynamic aria-expanded toggling (only checks static HTML)
- Zoom/reflow at 200% (requires rendering)
- Color contrast from CSS stylesheets (only checks inline styles)
These are inherent limitations of static HTML analysis — a real WCAG audit would need browser-based testing (e.g., Playwright + axe).
Summary
Category: Data Storage Grade: A Notes: Adjacency list is the right fit. Relationship types table adds matrix support. ──────────────────────────────────────── Category: Semantic HTML Grade: A Notes: Nested lists, ARIA tree roles, proper landmarks throughout. ──────────────────────────────────────── Category: Keyboard Navigation Grade: A- Notes: Full arrow-key support in interactive template; static templates rely on native HTML. ──────────────────────────────────────── Category: Progressive Disclosure Grade: A Notes:
/with JS enhancement. Multiple templates offer different levels. ──────────────────────────────────────── Category: Search Grade: B+ Notes: Present in interactive template with highlighting and ancestor expansion; no “center on result” or “Me” view. ──────────────────────────────────────── Category: Visual Layout Grade: B Notes: No true hybrid layout (horizontal top + vertical bottom). Each template is one direction only. ──────────────────────────────────────── Category: Dotted-Line Relationships Grade: B- Notes: Database supports them, but most templates don’t render secondary relationships visually. ──────────────────────────────────────── Category: WCAG Validation Grade: A- Notes: 14 custom rules + axe-core. Limited by static analysis (can’t test keyboard/zoom). ──────────────────────────────────────── Category: Template Variety Grade: A Notes: 8 templates covering tree, list, card, grid, and text views — exactly the “alternative views” WCAG recommends.
The biggest gaps are the lack of a hybrid layout template and underutilization of the relationship types data in visual rendering. The strengths are in semantic HTML, ARIA tree implementation, keyboard navigation, and having multiple accessible alternative views.
- │
│ │ │ elements. │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ aria-expanded │ Toggle state for │ Yes. Set on treeitems with children. The WCAG validator has a │
│ │ expand/collapse │ dedicated rule (aria-expanded-required) checking this. │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ aria-controls │ Link toggle to │ Yes. Interactive-collapsible links summary to children group. │
│ │ sub-list │ Top-down-tree uses aria-owns. │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ Keyboard: Tab to │ Sequential navigation │ Yes. All interactive elements are focusable. │
│ cards │ │ │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ Keyboard: Arrow │ Up/Down siblings, │ Yes in interactive-collapsible template (full arrow key │
│ keys │ Right expand, Left │ navigation). Yes in OrgDataTable editor (Up/Down/Home/End). No │
│ │ collapse │ in the static tree templates (they’re non-interactive HTML). │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ Keyboard: │ Expand/collapse nodes │ Yes. Interactive-collapsible handles Enter/Space. │
│ Enter/Space toggle │ │
- . │
├────────────────────┼────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ role=“tree” / │ │ Yes. Top-down-tree, horizontal-tree, interactive-collapsible │
│ role=“treeitem” │ ARIA tree widget │ all use role=“tree” on root