CODAP-572: Improve accessibility of custom select dropdown menus by kswenson · Pull Request #2436 · concord-consortium/codap

kswenson · 2026-02-26T06:55:42Z

Summary

Improves keyboard navigation, screen reader support, and focus visibility across all Chakra UI dropdown menus in CODAP, addressing Allyant audit item #57.

Graph axis/legend menus

Add aria-label to menu buttons describing orientation and current attribute
Add visible focus indicator and dropdown arrow affordance on axis labels
Add keyboard navigation for collection submenus (ArrowRight opens, ArrowLeft/Escape closes)
Add aria-haspopup/aria-expanded, aria-hidden on decorative elements
Scroll focused menu items into view for magnification/zoom users

Case table/card attribute header menus

Add aria-label to attribute menu buttons and inline rename inputs
Fix duplicate VisuallyHidden IDs by including attributeId
Add dropdown arrow affordance on hover/focus-within (table and card views)
Add Up/Down arrow keyboard navigation between card attribute headers
Standardize focus outline colors

Toolbar button menus (Tables, Tiles, Guide, Plugins)

Add aria-label and scroll-into-view on focus to all toolbar menus
Plugins menu: full keyboard submenu navigation, aria-haspopup/aria-expanded on group items

Inspector panel menus

Apply scroll-into-view on focus to all 11 inspector MenuLists
Add aria-label to slider palette dropdown MenuButtons
Wrap decorative emoji in aria-hidden spans

Shared hooks (new)

useMenuItemScrollIntoView — scrolls focused menu items into view (12 consumers)
useSubmenuOpenOnArrowRight / useSubmenuCloseOnArrowLeft — keyboard submenu navigation

Other

Fix arrow SVG fills to use currentColor for CSS inheritance
Fix MobX warning in use-key-states.ts
Add missing datePrecision translation key

Fixes CODAP-572

Test plan

Graph axis/legend: Tab to label, Enter opens menu, arrow keys navigate, ArrowRight opens collection submenu, Escape closes
Case table: Tab to column header, Enter opens menu, arrow keys navigate, dropdown arrow visible on hover/focus
Case card: Tab to attribute name, Up/Down arrows navigate between attributes, Enter opens menu
Toolbar: Tab to Tables/Tiles/Guide/Plugins buttons, Enter opens menu, Plugins submenu keyboard nav works
Inspector panel: Open any inspector palette menu, arrow keys navigate, focused items scroll into view
Screen reader: Menu buttons announce descriptive labels (not just attribute names)
`npm test -- axis-or-legend-attribute-menu` — 9 tests pass
`npm test -- std-menu-list` — 8 tests pass

🤖 Generated with Claude Code

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Add aria-label to MenuButton describing axis orientation and current attribute. Add visible focus indicator and dropdown arrow affordance on axis labels. Scroll focused menu items into view for magnification/zoom users. Add keyboard navigation for collection submenus (ArrowRight opens, ArrowLeft/Escape closes). Handle ArrowRight at MenuList level since Chakra MenuItem with as="div" does not forward onKeyDown to user handlers. Add tests for aria-label, focus scroll, menu rendering, and item selection. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Add aria-haspopup and aria-expanded to collection submenu items. Add aria-hidden to RightArrow SVG and hidden MenuButton. Add tabIndex={-1} to hidden MenuButton to remove from tab order. Add fill="currentColor" fallback to arrow-right.svg. Wrap focus() in act() to fix React test warning. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

… SVG fill Wire onClick on collection items to immediate open handler instead of the 150ms-delayed hover handler, so Enter/Space opens submenus without delay. Change arrow.svg fill from hardcoded #0592af to currentColor for CSS inheritance and theming, consistent with arrow-right.svg. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

codecov · 2026-02-26T06:59:29Z

Codecov Report

❌ Patch coverage is 74.10714% with 29 lines in your changes missing coverage. Please review.
✅ Project coverage is 69.31%. Comparing base (e18ca30) to head (9687fb4).
⚠️ Report is 3 commits behind head on main.

Files with missing lines	Patch %	Lines
v3/src/hooks/use-submenu-keyboard-nav.ts	48.00%	13 Missing ⚠️
v3/src/components/case-card/case-attr-view.tsx	12.50%	7 Missing ⚠️
.../axis/components/axis-or-legend-attribute-menu.tsx	86.95%	3 Missing ⚠️
...c/components/case-tile-common/attribute-header.tsx	80.00%	1 Missing ⚠️
...components/inspector-panel/hide-show-menu-list.tsx	50.00%	1 Missing ⚠️
...omponents/inspector-panel/save-image-menu-list.tsx	50.00%	1 Missing ⚠️
...nts/slider/inspector-panel/slider-scales-panel.tsx	50.00%	1 Missing ⚠️
...s/slider/inspector-panel/slider-settings-panel.tsx	50.00%	1 Missing ⚠️
v3/src/components/tool-shelf/plugins-button.tsx	93.33%	1 Missing ⚠️

❗ There is a different number of reports uploaded between BASE (e18ca30) and HEAD (9687fb4). Click for more details.

HEAD has 15 uploads less than BASE

Flag BASE (e18ca30) HEAD (9687fb4)

cypress 16 1

Additional details and impacted files

@@             Coverage Diff             @@
##             main    #2436       +/-   ##
===========================================
- Coverage   85.53%   69.31%   -16.23%     
===========================================
  Files         758      760        +2     
  Lines       42172    42275      +103     
  Branches    10049    10467      +418     
===========================================
- Hits        36070    29301     -6769     
- Misses       6090    12949     +6859     
- Partials       12       25       +13

Flag	Coverage Δ
cypress	`39.32% <65.88%> (-29.89%)`	⬇️
jest	`57.54% <59.82%> (+0.22%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

cypress · 2026-02-26T06:59:47Z

codap-v3 Run #10464

Run Properties: Passed #10464 • 9687fb4bfe: CODAP-572: address Copilot review feedback

Project	`codap-v3`
Branch Review	`CODAP-572-accessible-axis-dropdowns`
Run status	`Passed #10464`
Run duration	`02m 05s`
Commit	`9687fb4bfe: CODAP-572: address Copilot review feedback`
Committer	`Kirk Swenson`
View all properties for this run ↗︎

Test results
Failures	`0`
Flaky	`0`
Pending	`0`
Skipped	`0`
Passing	`4`
View all changes introduced in this branch ↗︎

Copilot

Pull request overview

This PR improves accessibility and keyboard usability of the graph axis/legend attribute menus, including better screen reader labeling, focus visibility, and submenu navigation.

Changes:

Adds axis/legend-specific aria-labels and decorative aria-hidden attributes; scrolls focused menuitems into view.
Implements keyboard navigation for multi-collection submenus (ArrowRight opens; ArrowLeft/Escape closes + focus management) and adds a dropdown-arrow affordance + focus ring styling.
Updates arrow SVGs to use currentColor, adds unit tests for key accessibility behaviors, and fixes a MobX warning in use-key-states.

Reviewed changes

Copilot reviewed 5 out of 7 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
v3/src/utilities/translation/lang/en-US.json5	Adds new localized strings for axis/legend aria-labels.
v3/src/hooks/use-key-states.ts	Wraps observable set mutations in `runInAction` to address MobX warnings.
v3/src/components/axis/components/axis-or-legend-attribute-menu.tsx	Adds aria-label computation, focus/scroll behavior, and keyboard submenu handling.
v3/src/components/axis/components/axis-or-legend-attribute-menu.test.tsx	Introduces tests for aria-label and focus/scroll behavior (with mocks).
v3/src/components/axis/components/axis-or-legend-attribute-menu.scss	Adds focus-visible outline and dropdown-arrow positioning/visibility.
v3/src/assets/icons/arrow.svg	Switches arrow fill to `currentColor`.
v3/src/assets/icons/arrow-right.svg	Switches arrow-right fill to `currentColor`.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

v3/src/utilities/translation/lang/en-US.json5

v3/src/hooks/use-key-states.ts

v3/src/components/axis/components/axis-or-legend-attribute-menu.tsx

…menus - Add aria-label to MenuButton ("Attribute [name], open menu") and inline rename input ("Rename attribute [name]") - Fix duplicate VisuallyHidden IDs by including attributeId - Make VisuallyHidden drag instructions translatable - Add dropdown arrow affordance on hover/focus-within (table and card) - Add scrollIntoView on focused menu items for magnification users - Override RDG selection color on header cells to standard focus color and suppress button-level outline to avoid double focus highlight - Add Up/Down arrow keyboard navigation between card attribute headers via new onButtonKeyDown prop (analogous to Left/Right in table via RDG) - Standardize card view focus outline color to #0957d0 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Extract shared hooks (useMenuItemScrollIntoView, useSubmenuOpenOnArrowRight, useSubmenuCloseOnArrowLeft) from axis menu inline code and apply to all toolbar menus (Tables, Plugins, Tiles, Guide). Add aria-labels, scroll- into-view on menu item focus, and full keyboard submenu navigation (ArrowRight/ArrowLeft/Escape) to the Plugins hierarchical menu. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Apply useMenuItemScrollIntoView to all inspector MenuLists (case table, graph, map, slider) so focused items scroll into view during keyboard nav - Add aria-label to slider palette dropdown MenuButtons (direction, mode, scale type, date unit) so screen readers announce the setting name - Wrap decorative 🚧 emoji on unimplemented items with aria-hidden to prevent screen readers from announcing "construction" Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Address Copilot review suggestion to use consistent %@ placeholder notation in the axisAriaLabel translation comment. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Copilot

Pull request overview

Copilot reviewed 25 out of 27 changed files in this pull request and generated 4 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

v3/src/components/axis/components/axis-or-legend-attribute-menu.test.tsx

v3/src/components/slider/inspector-panel/slider-settings-panel.tsx

v3/src/hooks/use-submenu-keyboard-nav.ts

v3/src/components/axis/components/axis-or-legend-attribute-menu.test.tsx

- Reset mock defaults in beforeEach for test independence - Add missing datePrecision translation key for slider aria-label - Remove unused containerDiv setup/teardown from tests Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

kswenson and others added 4 commits February 25, 2026 22:48

fix MobX warning by wrapping observable mutations in runInAction

927fe5a

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

kswenson added the v3 CODAP v3 label Feb 26, 2026

kswenson requested a review from Copilot February 26, 2026 06:56

Copilot started reviewing on behalf of kswenson February 26, 2026 06:56 View session

github-actions bot temporarily deployed to development February 26, 2026 06:59 Inactive

Copilot AI reviewed Feb 26, 2026

View reviewed changes

kswenson and others added 5 commits February 27, 2026 11:25

CODAP-572: add unit tests for StdMenuList accessibility

19f690b

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

CODAP-572: fix translation placeholder comment to use %@ syntax

8b8bfbd

Address Copilot review suggestion to use consistent %@ placeholder notation in the axisAriaLabel translation comment. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

kswenson requested a review from Copilot February 27, 2026 21:39

Copilot started reviewing on behalf of kswenson February 27, 2026 21:40 View session

github-actions bot temporarily deployed to development February 27, 2026 21:43 Inactive

Copilot AI reviewed Feb 27, 2026

View reviewed changes

CODAP-572: address Copilot review feedback

9687fb4

- Reset mock defaults in beforeEach for test independence - Add missing datePrecision translation key for slider aria-label - Remove unused containerDiv setup/teardown from tests Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

kswenson changed the title ~~CODAP-572: Accessible graph axis/legend attribute menus~~ CODAP-572: Improve accessibility of custom select dropdown menus Feb 27, 2026

github-actions bot deployed to development February 27, 2026 22:26 View deployment

kswenson marked this pull request as ready for review February 27, 2026 22:28

kswenson requested a review from tealefristoe February 27, 2026 22:29

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CODAP-572: Improve accessibility of custom select dropdown menus#2436

CODAP-572: Improve accessibility of custom select dropdown menus#2436
kswenson wants to merge 10 commits intomainfrom
CODAP-572-accessible-axis-dropdowns

kswenson commented Feb 26, 2026 •

edited

Loading

Uh oh!

codecov bot commented Feb 26, 2026 •

edited

Loading

Uh oh!

cypress bot commented Feb 26, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

kswenson commented Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Graph axis/legend menus

Case table/card attribute header menus

Toolbar button menus (Tables, Tiles, Guide, Plugins)

Inspector panel menus

Shared hooks (new)

Other

Test plan

Uh oh!

codecov bot commented Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

cypress bot commented Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

codap-v3 Run #10464

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

kswenson commented Feb 26, 2026 •

edited

Loading

codecov bot commented Feb 26, 2026 •

edited

Loading

cypress bot commented Feb 26, 2026 •

edited

Loading