From ab98c4a8c036304dbf06c826393a4c3da4ecc326 Mon Sep 17 00:00:00 2001
From: Kirk Swenson <kswenson@users.noreply.github.com>
Date: Tue, 24 Feb 2026 16:09:46 -0800
Subject: [PATCH 1/3] CODAP-575: add aria-label to tool shelf and inspector
 panel buttons

Add aria-label attributes to all toolbar buttons (Tables, Graph, Map,
Slider, Calc, Text, Plugins, Undo, Redo, Tiles, Guide) and all
inspector panel buttons (InspectorButton and InspectorMenu) across
all tile types. For icon-only buttons (e.g. text inspector), the
tooltip is used as the aria-label with parenthetical keyboard shortcuts
stripped to keep screen reader announcements clean.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/case-table/case-table-tool-shelf-button.tsx | 1 +
 v3/src/components/inspector-panel.tsx                      | 7 ++++++-
 v3/src/components/tool-shelf/guide-button.tsx              | 1 +
 v3/src/components/tool-shelf/plugins-button.tsx            | 1 +
 v3/src/components/tool-shelf/tiles-list-button.tsx         | 1 +
 v3/src/components/tool-shelf/tool-shelf-button.tsx         | 1 +
 6 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/v3/src/components/case-table/case-table-tool-shelf-button.tsx b/v3/src/components/case-table/case-table-tool-shelf-button.tsx
index 90f46c75f9..ea06b80e7d 100644
--- a/v3/src/components/case-table/case-table-tool-shelf-button.tsx
+++ b/v3/src/components/case-table/case-table-tool-shelf-button.tsx
@@ -132,6 +132,7 @@ export const CaseTableToolShelfButton = observer(function CaseTableToolShelfButt
   return (
     <Menu isLazy autoSelect={false} isOpen={isOpen} onOpen={onOpen} onClose={onClose} placement={placement}>
       <MenuButton className={clsx("tool-shelf-button tool-shelf-menu table first", langClass, {"menu-open": isOpen})}
+          aria-label={t("DG.ToolButtonData.tableButton.title")}
           title={`${t("DG.ToolButtonData.tableButton.toolTip")}`}
           data-testid={"tool-shelf-button-table"}>
         <TableIcon className="menu-icon case-table-icon" />
diff --git a/v3/src/components/inspector-panel.tsx b/v3/src/components/inspector-panel.tsx
index c2fc920ef4..0c25ec4ba6 100644
--- a/v3/src/components/inspector-panel.tsx
+++ b/v3/src/components/inspector-panel.tsx
@@ -47,8 +47,12 @@ export const InspectorButton = forwardRef(function InspectorButton({
   bottom, children, isActive, isDisabled, label, onButtonClick, onPointerDown, testId, tooltip, top
 }: IInspectorButtonProps, ref) {
   const className = clsx("inspector-tool-button", { active: isActive, bottom, top })
+  // Strip parenthetical keyboard shortcuts from tooltips (e.g. "bold (⌘-b)" → "bold")
+  // so screen readers announce a clean name rather than reading out the shortcut syntax.
+  const ariaLabel = label || tooltip.replace(/\s*\(.*\)$/, "")
   return (
     <Button
+      aria-label={ariaLabel}
       className={className}
       isDisabled={isDisabled}
       data-testid={testId}
@@ -81,7 +85,8 @@ export const InspectorMenu = ({
   const classes = clsx("inspector-tool-button", "inspector-tool-menu", { bottom, top })
   return (
     <Menu isLazy onOpen={onOpen}>
-      <MenuButton className={classes} title={tooltip} data-testid={testId} onClick={onButtonClick}>
+      <MenuButton aria-label={label || tooltip} className={classes} title={tooltip} data-testid={testId}
+          onClick={onButtonClick}>
         {icon}
         {label && <span className="inspector-button-label">{label}</span>}
       </MenuButton>
diff --git a/v3/src/components/tool-shelf/guide-button.tsx b/v3/src/components/tool-shelf/guide-button.tsx
index 21fa924b22..596a0106f3 100644
--- a/v3/src/components/tool-shelf/guide-button.tsx
+++ b/v3/src/components/tool-shelf/guide-button.tsx
@@ -42,6 +42,7 @@ export const GuideButton = observer(function GuideButton(props: IProps) {
     <>
       <Menu isLazy autoSelect={false} isOpen={isOpen} onOpen={onOpen} onClose={onClose} placement={placement}>
         <MenuButton
+          aria-label={t("DG.ToolButtonData.guideMenu.title")}
           className={clsx("tool-shelf-button", "tool-shelf-menu", langClass, {"menu-open": isOpen})}
           title={t("DG.ToolButtonData.guideMenu.toolTip")}
           data-testid="tool-shelf-button-guide"
diff --git a/v3/src/components/tool-shelf/plugins-button.tsx b/v3/src/components/tool-shelf/plugins-button.tsx
index ca20090da5..21d599e494 100644
--- a/v3/src/components/tool-shelf/plugins-button.tsx
+++ b/v3/src/components/tool-shelf/plugins-button.tsx
@@ -166,6 +166,7 @@ export const PluginsButton = observer(function PluginsButton() {
           return (
             <>
               <MenuButton
+                aria-label={t("DG.ToolButtonData.pluginMenu.title")}
                 className={className}
                 title={t("DG.ToolButtonData.optionMenu.toolTip")}
                 data-testid="tool-shelf-button-plugins"
diff --git a/v3/src/components/tool-shelf/tiles-list-button.tsx b/v3/src/components/tool-shelf/tiles-list-button.tsx
index a73468a919..b1eb950b63 100644
--- a/v3/src/components/tool-shelf/tiles-list-button.tsx
+++ b/v3/src/components/tool-shelf/tiles-list-button.tsx
@@ -45,6 +45,7 @@ export const TilesListShelfButton = observer(function TilesListShelfButton() {
     <>
       <Menu isLazy autoSelect={false} isOpen={isOpen} onOpen={onOpen} onClose={onClose} placement={placement}>
         <MenuButton
+          aria-label={t("DG.ToolButtonData.tileListMenu.title")}
           className={clsx("tool-shelf-button", "tool-shelf-menu", "tiles-list-menu", langClass, {"menu-open": isOpen})}
           title={t("DG.ToolButtonData.tileListMenu.toolTip")}
           data-testid="tool-shelf-button-tiles"
diff --git a/v3/src/components/tool-shelf/tool-shelf-button.tsx b/v3/src/components/tool-shelf/tool-shelf-button.tsx
index 638deee1ae..9542036db8 100644
--- a/v3/src/components/tool-shelf/tool-shelf-button.tsx
+++ b/v3/src/components/tool-shelf/tool-shelf-button.tsx
@@ -26,6 +26,7 @@ export const ToolShelfButton = ({
   return (
     <Box
       as='button'
+      aria-label={t(label)}
       title={t(hint)}
       disabled={disabled}
       onClick={onClick}

From b27cef252eb9d7438ba523e1bc23bcf1039b26fe Mon Sep 17 00:00:00 2001
From: Kirk Swenson <kswenson@users.noreply.github.com>
Date: Tue, 24 Feb 2026 16:18:37 -0800
Subject: [PATCH 2/3] CODAP-575: fix plugins button tooltip to use correct
 translation key

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 v3/src/components/tool-shelf/plugins-button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/v3/src/components/tool-shelf/plugins-button.tsx b/v3/src/components/tool-shelf/plugins-button.tsx
index 21d599e494..cd6942ee7a 100644
--- a/v3/src/components/tool-shelf/plugins-button.tsx
+++ b/v3/src/components/tool-shelf/plugins-button.tsx
@@ -168,7 +168,7 @@ export const PluginsButton = observer(function PluginsButton() {
               <MenuButton
                 aria-label={t("DG.ToolButtonData.pluginMenu.title")}
                 className={className}
-                title={t("DG.ToolButtonData.optionMenu.toolTip")}
+                title={t("DG.ToolButtonData.pluginMenu.toolTip")}
                 data-testid="tool-shelf-button-plugins"
               >
                 <PluginsIcon />

From 4f9786d4871a71cec45f96b276318e8f1ef0bcad Mon Sep 17 00:00:00 2001
From: Kirk Swenson <kswenson@users.noreply.github.com>
Date: Wed, 25 Feb 2026 14:33:44 -0800
Subject: [PATCH 3/3] CODAP-575: remove redundant aria-labels from tool shelf
 buttons; refactor inspector aria-label logic

Tool shelf buttons already have visible text labels that screen readers
can compute as accessible names, so explicit aria-labels are unnecessary.
Inspector panel buttons use a shared ariaLabel() helper that returns
undefined for labeled buttons and a shortcut-stripped tooltip for
icon-only buttons.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../case-table/case-table-tool-shelf-button.tsx  |  1 -
 v3/src/components/inspector-panel.tsx            | 16 +++++++++++-----
 v3/src/components/tool-shelf/guide-button.tsx    |  1 -
 v3/src/components/tool-shelf/plugins-button.tsx  |  1 -
 .../components/tool-shelf/tiles-list-button.tsx  |  1 -
 .../components/tool-shelf/tool-shelf-button.tsx  |  1 -
 6 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/v3/src/components/case-table/case-table-tool-shelf-button.tsx b/v3/src/components/case-table/case-table-tool-shelf-button.tsx
index ea06b80e7d..90f46c75f9 100644
--- a/v3/src/components/case-table/case-table-tool-shelf-button.tsx
+++ b/v3/src/components/case-table/case-table-tool-shelf-button.tsx
@@ -132,7 +132,6 @@ export const CaseTableToolShelfButton = observer(function CaseTableToolShelfButt
   return (
     <Menu isLazy autoSelect={false} isOpen={isOpen} onOpen={onOpen} onClose={onClose} placement={placement}>
       <MenuButton className={clsx("tool-shelf-button tool-shelf-menu table first", langClass, {"menu-open": isOpen})}
-          aria-label={t("DG.ToolButtonData.tableButton.title")}
           title={`${t("DG.ToolButtonData.tableButton.toolTip")}`}
           data-testid={"tool-shelf-button-table"}>
         <TableIcon className="menu-icon case-table-icon" />
diff --git a/v3/src/components/inspector-panel.tsx b/v3/src/components/inspector-panel.tsx
index 0c25ec4ba6..f65d0e638b 100644
--- a/v3/src/components/inspector-panel.tsx
+++ b/v3/src/components/inspector-panel.tsx
@@ -6,6 +6,15 @@ import { isWithinBounds, getPaletteTopPosition } from "../utilities/view-utils"
 
 import "./inspector-panel.scss"
 
+// Returns an aria-label for icon-only inspector buttons/menus.
+// When a visible text label exists, returns undefined (the label provides the accessible name).
+// When no label exists, returns the tooltip with parenthetical keyboard shortcuts stripped
+// (e.g. "bold (⌘-b)" → "bold") so screen readers announce a clean name.
+function ariaLabel(label?: string, tooltip?: string) {
+  if (label) return undefined
+  return tooltip?.replace(/\s*\(.*\)$/, "")
+}
+
 interface IProps {
   component?: string
   show?: boolean
@@ -47,12 +56,9 @@ export const InspectorButton = forwardRef(function InspectorButton({
   bottom, children, isActive, isDisabled, label, onButtonClick, onPointerDown, testId, tooltip, top
 }: IInspectorButtonProps, ref) {
   const className = clsx("inspector-tool-button", { active: isActive, bottom, top })
-  // Strip parenthetical keyboard shortcuts from tooltips (e.g. "bold (⌘-b)" → "bold")
-  // so screen readers announce a clean name rather than reading out the shortcut syntax.
-  const ariaLabel = label || tooltip.replace(/\s*\(.*\)$/, "")
   return (
     <Button
-      aria-label={ariaLabel}
+      aria-label={ariaLabel(label, tooltip)}
       className={className}
       isDisabled={isDisabled}
       data-testid={testId}
@@ -85,7 +91,7 @@ export const InspectorMenu = ({
   const classes = clsx("inspector-tool-button", "inspector-tool-menu", { bottom, top })
   return (
     <Menu isLazy onOpen={onOpen}>
-      <MenuButton aria-label={label || tooltip} className={classes} title={tooltip} data-testid={testId}
+      <MenuButton aria-label={ariaLabel(label, tooltip)} className={classes} title={tooltip} data-testid={testId}
           onClick={onButtonClick}>
         {icon}
         {label && <span className="inspector-button-label">{label}</span>}
diff --git a/v3/src/components/tool-shelf/guide-button.tsx b/v3/src/components/tool-shelf/guide-button.tsx
index 596a0106f3..21fa924b22 100644
--- a/v3/src/components/tool-shelf/guide-button.tsx
+++ b/v3/src/components/tool-shelf/guide-button.tsx
@@ -42,7 +42,6 @@ export const GuideButton = observer(function GuideButton(props: IProps) {
     <>
       <Menu isLazy autoSelect={false} isOpen={isOpen} onOpen={onOpen} onClose={onClose} placement={placement}>
         <MenuButton
-          aria-label={t("DG.ToolButtonData.guideMenu.title")}
           className={clsx("tool-shelf-button", "tool-shelf-menu", langClass, {"menu-open": isOpen})}
           title={t("DG.ToolButtonData.guideMenu.toolTip")}
           data-testid="tool-shelf-button-guide"
diff --git a/v3/src/components/tool-shelf/plugins-button.tsx b/v3/src/components/tool-shelf/plugins-button.tsx
index cd6942ee7a..3ee029741e 100644
--- a/v3/src/components/tool-shelf/plugins-button.tsx
+++ b/v3/src/components/tool-shelf/plugins-button.tsx
@@ -166,7 +166,6 @@ export const PluginsButton = observer(function PluginsButton() {
           return (
             <>
               <MenuButton
-                aria-label={t("DG.ToolButtonData.pluginMenu.title")}
                 className={className}
                 title={t("DG.ToolButtonData.pluginMenu.toolTip")}
                 data-testid="tool-shelf-button-plugins"
diff --git a/v3/src/components/tool-shelf/tiles-list-button.tsx b/v3/src/components/tool-shelf/tiles-list-button.tsx
index b1eb950b63..a73468a919 100644
--- a/v3/src/components/tool-shelf/tiles-list-button.tsx
+++ b/v3/src/components/tool-shelf/tiles-list-button.tsx
@@ -45,7 +45,6 @@ export const TilesListShelfButton = observer(function TilesListShelfButton() {
     <>
       <Menu isLazy autoSelect={false} isOpen={isOpen} onOpen={onOpen} onClose={onClose} placement={placement}>
         <MenuButton
-          aria-label={t("DG.ToolButtonData.tileListMenu.title")}
           className={clsx("tool-shelf-button", "tool-shelf-menu", "tiles-list-menu", langClass, {"menu-open": isOpen})}
           title={t("DG.ToolButtonData.tileListMenu.toolTip")}
           data-testid="tool-shelf-button-tiles"
diff --git a/v3/src/components/tool-shelf/tool-shelf-button.tsx b/v3/src/components/tool-shelf/tool-shelf-button.tsx
index 9542036db8..638deee1ae 100644
--- a/v3/src/components/tool-shelf/tool-shelf-button.tsx
+++ b/v3/src/components/tool-shelf/tool-shelf-button.tsx
@@ -26,7 +26,6 @@ export const ToolShelfButton = ({
   return (
     <Box
       as='button'
-      aria-label={t(label)}
       title={t(hint)}
       disabled={disabled}
       onClick={onClick}