From 8f151a84e141e59d8349159973de35bb029f947e Mon Sep 17 00:00:00 2001
From: Xander Leatherwood <44583237+xman343@users.noreply.github.com>
Date: Wed, 2 Aug 2023 16:42:50 -0400
Subject: [PATCH 01/18] initial push


From cbffb4ecb20134f29b35b3db56d992bc691ad05e Mon Sep 17 00:00:00 2001
From: Xander Leatherwood <44583237+xman343@users.noreply.github.com>
Date: Thu, 3 Aug 2023 16:57:46 -0400
Subject: [PATCH 02/18] ColorPallete labels & roles

---
 packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx b/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx
index ac696a93ee7..741de3936ea 100644
--- a/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx
+++ b/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx
@@ -140,6 +140,8 @@ export const ColorPalette = React.forwardRef((props, ref) => {
     >
       {label && <Box className='iui-color-picker-section-label'>{label}</Box>}
       <Box
+        role='listbox'
+        aria-label='Color palette'
         className='iui-color-palette'
         onKeyDown={handleKeyDown}
         ref={paletteRefs}
@@ -148,8 +150,11 @@ export const ColorPalette = React.forwardRef((props, ref) => {
         {colors &&
           colors.map((_color, index) => {
             const color = getColorValue(_color);
+            const swatchLabel = getColorValue(color).toHslString(true);
             return (
               <ColorSwatch
+                role='option'
+                aria-label={swatchLabel}
                 key={index}
                 color={color}
                 onClick={(event) => {

From 00f21c31bcb3b2fb7f66e5c066136a037a416aa3 Mon Sep 17 00:00:00 2001
From: Xander Leatherwood <44583237+xman343@users.noreply.github.com>
Date: Fri, 4 Aug 2023 13:35:39 -0400
Subject: [PATCH 03/18] working fixes

---
 examples/ColorPicker.advancedPopover.tsx                     | 5 ++++-
 packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx | 3 +++
 .../itwinui-react/src/core/ColorPicker/ColorInputPanel.tsx   | 1 +
 packages/itwinui-react/src/core/Slider/Thumb.tsx             | 1 +
 4 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/examples/ColorPicker.advancedPopover.tsx b/examples/ColorPicker.advancedPopover.tsx
index 294c81b5cf7..529bca2eaf3 100644
--- a/examples/ColorPicker.advancedPopover.tsx
+++ b/examples/ColorPicker.advancedPopover.tsx
@@ -69,7 +69,10 @@ export default () => {
           visible={isOpen}
           placement='bottom-start'
         >
-          <IconButton onClick={() => setIsOpen((open) => !open)}>
+          <IconButton
+            label='Color Picker Toggle'
+            onClick={() => setIsOpen((open) => !open)}
+          >
             <ColorSwatch
               style={{ pointerEvents: 'none', margin: 0 }}
               color={selectedColor}
diff --git a/packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx b/packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx
index 11e163e89fa..597eccdc37d 100644
--- a/packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx
+++ b/packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx
@@ -287,6 +287,8 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
       </Box>
 
       <Slider
+        aria-label='Hue slider'
+        id='Slider'
         minLabel=''
         maxLabel=''
         values={[sliderValue]}
@@ -305,6 +307,7 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
 
       {showAlpha && (
         <Slider
+          aria-label='Opacity slider'
           minLabel=''
           maxLabel=''
           values={[alphaValue]}
diff --git a/packages/itwinui-react/src/core/ColorPicker/ColorInputPanel.tsx b/packages/itwinui-react/src/core/ColorPicker/ColorInputPanel.tsx
index 48396898eb3..7c69eca3536 100644
--- a/packages/itwinui-react/src/core/ColorPicker/ColorInputPanel.tsx
+++ b/packages/itwinui-react/src/core/ColorPicker/ColorInputPanel.tsx
@@ -477,6 +477,7 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
       <Box className='iui-color-input'>
         {allowedColorFormats.length > 1 && (
           <IconButton
+            label='Color input'
             styleType='borderless'
             onClick={swapColorFormat}
             size='small'
diff --git a/packages/itwinui-react/src/core/Slider/Thumb.tsx b/packages/itwinui-react/src/core/Slider/Thumb.tsx
index 83023b0a029..a471dcbb358 100644
--- a/packages/itwinui-react/src/core/Slider/Thumb.tsx
+++ b/packages/itwinui-react/src/core/Slider/Thumb.tsx
@@ -154,6 +154,7 @@ export const Thumb = (props: ThumbProps) => {
       {...tooltipProps}
     >
       <Box
+        aria-labelledby='Slider'
         {...rest}
         data-index={index}
         ref={thumbRef}

From 4fc5acf049c0a717e75b1b1c8fdeacb329a672f0 Mon Sep 17 00:00:00 2001
From: Xander Leatherwood <44583237+xman343@users.noreply.github.com>
Date: Fri, 4 Aug 2023 13:38:24 -0400
Subject: [PATCH 04/18] case fix

---
 examples/ColorPicker.advancedPopover.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/ColorPicker.advancedPopover.tsx b/examples/ColorPicker.advancedPopover.tsx
index 529bca2eaf3..a6a65e3f036 100644
--- a/examples/ColorPicker.advancedPopover.tsx
+++ b/examples/ColorPicker.advancedPopover.tsx
@@ -70,7 +70,7 @@ export default () => {
           placement='bottom-start'
         >
           <IconButton
-            label='Color Picker Toggle'
+            label='Color Picker toggle'
             onClick={() => setIsOpen((open) => !open)}
           >
             <ColorSwatch

From 630a2a2f2693c658dd0cbaeda68cc3fe1b5686a5 Mon Sep 17 00:00:00 2001
From: Xander Leatherwood <44583237+xman343@users.noreply.github.com>
Date: Tue, 8 Aug 2023 15:27:07 -0400
Subject: [PATCH 05/18] labels removed & thumbProps implemented

---
 .../src/core/ColorPicker/ColorBuilder.tsx           | 13 ++++++++++---
 packages/itwinui-react/src/core/Slider/Thumb.tsx    |  1 -
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx b/packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx
index 597eccdc37d..26294094bb1 100644
--- a/packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx
+++ b/packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx
@@ -287,8 +287,11 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
       </Box>
 
       <Slider
-        aria-label='Hue slider'
-        id='Slider'
+        thumbProps={() => {
+          return {
+            'aria-label': `Hue slider`,
+          };
+        }}
         minLabel=''
         maxLabel=''
         values={[sliderValue]}
@@ -307,7 +310,11 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
 
       {showAlpha && (
         <Slider
-          aria-label='Opacity slider'
+          thumbProps={() => {
+            return {
+              'aria-label': `Opacity slider`,
+            };
+          }}
           minLabel=''
           maxLabel=''
           values={[alphaValue]}
diff --git a/packages/itwinui-react/src/core/Slider/Thumb.tsx b/packages/itwinui-react/src/core/Slider/Thumb.tsx
index a471dcbb358..83023b0a029 100644
--- a/packages/itwinui-react/src/core/Slider/Thumb.tsx
+++ b/packages/itwinui-react/src/core/Slider/Thumb.tsx
@@ -154,7 +154,6 @@ export const Thumb = (props: ThumbProps) => {
       {...tooltipProps}
     >
       <Box
-        aria-labelledby='Slider'
         {...rest}
         data-index={index}
         ref={thumbRef}

From 38654b3db4eab4888b76be12453b60e912038887 Mon Sep 17 00:00:00 2001
From: Xander Leatherwood <44583237+xman343@users.noreply.github.com>
Date: Tue, 8 Aug 2023 15:42:13 -0400
Subject: [PATCH 06/18] advanced popover toggle vis label update

---
 examples/ColorPicker.advancedPopover.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/ColorPicker.advancedPopover.tsx b/examples/ColorPicker.advancedPopover.tsx
index a6a65e3f036..dceda7af3f6 100644
--- a/examples/ColorPicker.advancedPopover.tsx
+++ b/examples/ColorPicker.advancedPopover.tsx
@@ -70,7 +70,7 @@ export default () => {
           placement='bottom-start'
         >
           <IconButton
-            label='Color Picker toggle'
+            label='Color Picker Toggle Visibility'
             onClick={() => setIsOpen((open) => !open)}
           >
             <ColorSwatch

From 499364165352bac847e1f67e610e61986f70d533 Mon Sep 17 00:00:00 2001
From: Xander Leatherwood <44583237+xman343@users.noreply.github.com>
Date: Tue, 8 Aug 2023 16:47:02 -0400
Subject: [PATCH 07/18] aria-labelledby added

---
 packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx b/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx
index 741de3936ea..b9187f7b140 100644
--- a/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx
+++ b/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx
@@ -134,6 +134,7 @@ export const ColorPalette = React.forwardRef((props, ref) => {
 
   return (
     <Box
+      id='wrapper'
       className={cx('iui-color-palette-wrapper', className)}
       ref={ref}
       {...rest}
@@ -141,7 +142,8 @@ export const ColorPalette = React.forwardRef((props, ref) => {
       {label && <Box className='iui-color-picker-section-label'>{label}</Box>}
       <Box
         role='listbox'
-        aria-label='Color palette'
+        aria-labelledby={label ? 'wrapper' : undefined}
+        aria-label={!label ? 'Color palette' : undefined}
         className='iui-color-palette'
         onKeyDown={handleKeyDown}
         ref={paletteRefs}

From f7d6feb41bcb2a53d73e6f1fac48814278c026c1 Mon Sep 17 00:00:00 2001
From: Xander Leatherwood <44583237+xman343@users.noreply.github.com>
Date: Wed, 9 Aug 2023 13:49:30 -0400
Subject: [PATCH 08/18] color string capitalized

---
 packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx b/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx
index b9187f7b140..d297aff6d38 100644
--- a/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx
+++ b/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx
@@ -152,7 +152,9 @@ export const ColorPalette = React.forwardRef((props, ref) => {
         {colors &&
           colors.map((_color, index) => {
             const color = getColorValue(_color);
-            const swatchLabel = getColorValue(color).toHslString(true);
+            const swatchLabel = getColorValue(color)
+              .toHslString(true)
+              .toUpperCase();
             return (
               <ColorSwatch
                 role='option'

From 925324877018f2205acee9eeecce9d89de1bdaa2 Mon Sep 17 00:00:00 2001
From: Xander Leatherwood <44583237+xman343@users.noreply.github.com>
Date: Wed, 9 Aug 2023 14:20:15 -0400
Subject: [PATCH 09/18] useId implemented

---
 .../itwinui-react/src/core/ColorPicker/ColorPalette.tsx  | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx b/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx
index d297aff6d38..c90a811a11c 100644
--- a/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx
+++ b/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx
@@ -17,7 +17,7 @@ import type {
 import { getColorValue } from './ColorPicker.js';
 import { ColorSwatch } from './ColorSwatch.js';
 import { useColorPickerContext } from './ColorPickerContext.js';
-
+import { useId } from '../utils/index.js';
 export type ColorPaletteProps = {
   /**
    * Label shown above the palette.
@@ -45,7 +45,8 @@ export type ColorPaletteProps = {
  * </ColorPalette>
  */
 export const ColorPalette = React.forwardRef((props, ref) => {
-  const { colors, label, className, children, ...rest } = props;
+  const uid = useId();
+  const { colors, label, className, children, id = uid, ...rest } = props;
 
   const { activeColor, setActiveColor, onChangeComplete } =
     useColorPickerContext();
@@ -134,15 +135,15 @@ export const ColorPalette = React.forwardRef((props, ref) => {
 
   return (
     <Box
-      id='wrapper'
       className={cx('iui-color-palette-wrapper', className)}
       ref={ref}
+      id={id}
       {...rest}
     >
       {label && <Box className='iui-color-picker-section-label'>{label}</Box>}
       <Box
         role='listbox'
-        aria-labelledby={label ? 'wrapper' : undefined}
+        aria-labelledby={label ? id : undefined}
         aria-label={!label ? 'Color palette' : undefined}
         className='iui-color-palette'
         onKeyDown={handleKeyDown}

From db46b62eb517f9453bea7a319e41baf4ba55fbe2 Mon Sep 17 00:00:00 2001
From: Xander Leatherwood <44583237+xman343@users.noreply.github.com>
Date: Wed, 9 Aug 2023 14:28:02 -0400
Subject: [PATCH 10/18] hsl to hex

---
 packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx b/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx
index c90a811a11c..737038ae0bf 100644
--- a/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx
+++ b/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx
@@ -154,7 +154,7 @@ export const ColorPalette = React.forwardRef((props, ref) => {
           colors.map((_color, index) => {
             const color = getColorValue(_color);
             const swatchLabel = getColorValue(color)
-              .toHslString(true)
+              .toHexString(true)
               .toUpperCase();
             return (
               <ColorSwatch

From 4dd6396556033b38a5a52ce685ce6da994bfe0b4 Mon Sep 17 00:00:00 2001
From: Xander Leatherwood <44583237+xman343@users.noreply.github.com>
Date: Wed, 9 Aug 2023 14:31:21 -0400
Subject: [PATCH 11/18] useId consolidated w/ other imports

---
 packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx b/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx
index 737038ae0bf..ba50f59554f 100644
--- a/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx
+++ b/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx
@@ -9,6 +9,7 @@ import {
   getFocusableElements,
   useMergedRefs,
   Box,
+  useId,
 } from '../utils/index.js';
 import type {
   ColorType,
@@ -17,7 +18,6 @@ import type {
 import { getColorValue } from './ColorPicker.js';
 import { ColorSwatch } from './ColorSwatch.js';
 import { useColorPickerContext } from './ColorPickerContext.js';
-import { useId } from '../utils/index.js';
 export type ColorPaletteProps = {
   /**
    * Label shown above the palette.

From 7119c9ef7b7ed6358859b3c363cad6c79094bdd2 Mon Sep 17 00:00:00 2001
From: Xander Leatherwood <44583237+xman343@users.noreply.github.com>
Date: Wed, 9 Aug 2023 15:05:06 -0400
Subject: [PATCH 12/18] useId update

---
 packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx b/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx
index ba50f59554f..8121334f9c7 100644
--- a/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx
+++ b/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx
@@ -45,8 +45,8 @@ export type ColorPaletteProps = {
  * </ColorPalette>
  */
 export const ColorPalette = React.forwardRef((props, ref) => {
-  const uid = useId();
-  const { colors, label, className, children, id = uid, ...rest } = props;
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const { colors, label, className, children, id = useId(), ...rest } = props;
 
   const { activeColor, setActiveColor, onChangeComplete } =
     useColorPickerContext();

From 3de5c17de9c18281c256c4823e55fc7c097198ee Mon Sep 17 00:00:00 2001
From: Xander Leatherwood <44583237+xman343@users.noreply.github.com>
Date: Wed, 9 Aug 2023 15:06:50 -0400
Subject: [PATCH 13/18] Update
 packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx

Co-authored-by: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
---
 packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx b/packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx
index 26294094bb1..2bcde21e404 100644
--- a/packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx
+++ b/packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx
@@ -289,7 +289,7 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
       <Slider
         thumbProps={() => {
           return {
-            'aria-label': `Hue slider`,
+            'aria-label': `Hue`,
           };
         }}
         minLabel=''

From 6a1fafb7637d987ff427bc247ff01371779e3619 Mon Sep 17 00:00:00 2001
From: Xander Leatherwood <44583237+xman343@users.noreply.github.com>
Date: Wed, 9 Aug 2023 15:07:00 -0400
Subject: [PATCH 14/18] Update
 packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx

Co-authored-by: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
---
 packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx b/packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx
index 2bcde21e404..5160cbd8a90 100644
--- a/packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx
+++ b/packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx
@@ -312,7 +312,7 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
         <Slider
           thumbProps={() => {
             return {
-              'aria-label': `Opacity slider`,
+              'aria-label': `Opacity`,
             };
           }}
           minLabel=''

From ee5f503bd343f4dae297e401dde8137a72076a2f Mon Sep 17 00:00:00 2001
From: Xander Leatherwood <44583237+xman343@users.noreply.github.com>
Date: Wed, 9 Aug 2023 15:19:46 -0400
Subject: [PATCH 15/18] blank line restored

---
 packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx b/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx
index 8121334f9c7..2c54ecd559f 100644
--- a/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx
+++ b/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx
@@ -18,6 +18,7 @@ import type {
 import { getColorValue } from './ColorPicker.js';
 import { ColorSwatch } from './ColorSwatch.js';
 import { useColorPickerContext } from './ColorPickerContext.js';
+
 export type ColorPaletteProps = {
   /**
    * Label shown above the palette.

From 5600955c90422066794a0ca83ed975ccb17cc5ac Mon Sep 17 00:00:00 2001
From: Xander Leatherwood <44583237+xman343@users.noreply.github.com>
Date: Wed, 9 Aug 2023 15:26:44 -0400
Subject: [PATCH 16/18] aria-label replaced with aria-hidden

---
 .../itwinui-react/src/core/ColorPicker/ColorPalette.tsx   | 8 ++++----
 .../itwinui-react/src/core/ColorPicker/ColorSwatch.tsx    | 7 ++++---
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx b/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx
index 2c54ecd559f..78ac7107851 100644
--- a/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx
+++ b/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx
@@ -154,13 +154,13 @@ export const ColorPalette = React.forwardRef((props, ref) => {
         {colors &&
           colors.map((_color, index) => {
             const color = getColorValue(_color);
-            const swatchLabel = getColorValue(color)
-              .toHexString(true)
-              .toUpperCase();
+            // const swatchLabel = getColorValue(color)
+            //   .toHexString(true)
+            //   .toUpperCase();
             return (
               <ColorSwatch
                 role='option'
-                aria-label={swatchLabel}
+                // aria-label={swatchLabel}
                 key={index}
                 color={color}
                 onClick={(event) => {
diff --git a/packages/itwinui-react/src/core/ColorPicker/ColorSwatch.tsx b/packages/itwinui-react/src/core/ColorPicker/ColorSwatch.tsx
index b7ec02d8823..3b90dc821ca 100644
--- a/packages/itwinui-react/src/core/ColorPicker/ColorSwatch.tsx
+++ b/packages/itwinui-react/src/core/ColorPicker/ColorSwatch.tsx
@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { ColorValue, Box } from '../utils/index.js';
+import { ColorValue, Box, VisuallyHidden } from '../utils/index.js';
 import type {
   ColorType,
   PolymorphicForwardRefComponent,
@@ -50,10 +50,11 @@ export const ColorSwatch = React.forwardRef((props, ref) => {
       }
       onClick={onClick}
       tabIndex={isActive ? 0 : -1}
-      aria-selected={isActive}
       ref={ref}
       {...rest}
-    />
+    >
+      <VisuallyHidden>{colorString.toUpperCase()}</VisuallyHidden>
+    </Box>
   );
 }) as PolymorphicForwardRefComponent<'div', ColorSwatchProps>;
 

From 943fc1516fc8e7b4c2749508c46d538a06ce9b7f Mon Sep 17 00:00:00 2001
From: Xander Leatherwood <44583237+xman343@users.noreply.github.com>
Date: Wed, 9 Aug 2023 15:45:46 -0400
Subject: [PATCH 17/18] commented out code removed

---
 packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx b/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx
index 78ac7107851..7a455d7210e 100644
--- a/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx
+++ b/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx
@@ -154,13 +154,9 @@ export const ColorPalette = React.forwardRef((props, ref) => {
         {colors &&
           colors.map((_color, index) => {
             const color = getColorValue(_color);
-            // const swatchLabel = getColorValue(color)
-            //   .toHexString(true)
-            //   .toUpperCase();
             return (
               <ColorSwatch
                 role='option'
-                // aria-label={swatchLabel}
                 key={index}
                 color={color}
                 onClick={(event) => {

From 4a481aca0b34d9608ef8178b2f140077554b5bd4 Mon Sep 17 00:00:00 2001
From: Xander Leatherwood <44583237+xman343@users.noreply.github.com>
Date: Wed, 9 Aug 2023 15:59:46 -0400
Subject: [PATCH 18/18] changeset added

---
 .changeset/yellow-bobcats-guess.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/yellow-bobcats-guess.md

diff --git a/.changeset/yellow-bobcats-guess.md b/.changeset/yellow-bobcats-guess.md
new file mode 100644
index 00000000000..967a4973f01
--- /dev/null
+++ b/.changeset/yellow-bobcats-guess.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+ColorPicker now has proper labelling to meet accessibility guidelines.