fix(ui-color-picker): add hex to aria-label

INSTUI-4273
instructure · Feb 10, 2025 · 98adf34 · 98adf34
1 parent 4dacbf8
commit 98adf34
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 8 deletions.
diff --git a/packages/ui-color-picker/src/ColorPreset/__new-tests__/ColorPreset.test.tsx b/packages/ui-color-picker/src/ColorPreset/__new-tests__/ColorPreset.test.tsx
@@ -110,11 +110,7 @@ describe('<ColorPreset />', () => {
 
       testColors.forEach((testColor, index) => {
         const tooltip = tooltips[index]
-        const indicator = indicators[index]
 
-        expect(tooltip.getAttribute('id')).toBe(
-          indicator.getAttribute('aria-describedby')
-        )
         expect(tooltip).toHaveTextContent(testColor)
       })
     })

diff --git a/packages/ui-color-picker/src/ColorPreset/index.tsx b/packages/ui-color-picker/src/ColorPreset/index.tsx
@@ -266,7 +266,11 @@ class ColorPreset extends Component<ColorPresetProps, ColorPresetState> {
       cursor={this.props.disabled ? 'not-allowed' : 'auto'}
       as="button"
       {...(selectOnClick ? { onClick: () => this.props.onSelect(color) } : {})}
-      {...(this.isSelectedColor(color) ? { 'aria-label': 'selected' } : {})}
+      {...{
+        'aria-label': `${color}${
+          this.isSelectedColor(color) ? ' selected' : ''
+        }`
+      }}
     >
       <div>
         <ColorIndicator color={color} shape="rectangle" role="presentation" />
@@ -282,9 +286,25 @@ class ColorPreset extends Component<ColorPresetProps, ColorPresetState> {
     </View>
   )
 
-  renderIndicatorTooltip = (child: React.ReactElement, color: string) => (
-    <Tooltip renderTip={<div>{color}</div>}>{child}</Tooltip>
-  )
+  renderIndicatorTooltip = (child: React.ReactElement, color: string) => {
+    return (
+      <Tooltip
+        renderTip={<div>{color}</div>}
+        elementRef={(element) => {
+          if (
+            element &&
+            element.firstElementChild instanceof HTMLButtonElement
+          ) {
+            // The tooltip and the button's aria-label has the same text content. This is redundant for screenreaders.
+            // Aria-describedby is removed to bypass reading the tooltip twice
+            element.firstElementChild.removeAttribute('aria-describedby')
+          }
+        }}
+      >
+        {child}
+      </Tooltip>
+    )
+  }
 
   renderSettingsMenu = (color: string, index: number) => (
     <Drilldown