@itwin/itwinui-react 3.0.0-dev.9 → 3.0.1

package/cjs/core/Carousel/CarouselDotsList.js

@@ -53,6 +53,7 @@ exports.CarouselDotsList = React.forwardRef((props, ref) => {
         context.setCurrentIndex(index);
         context.scrollToSlide.current(index);
       }
+      listRef.current?.children[index]?.focus();
       onSlideChange?.(index);
     },
     [context, onSlideChange],
@@ -105,13 +106,12 @@ exports.CarouselDotsList = React.forwardRef((props, ref) => {
           index < firstVisibleDotIndex || index > lastVisibleDotIndex;
         return React.createElement(CarouselDot_js_1.CarouselDot, {
           key: index,
-          'aria-label': `Slide ${index}`,
+          'aria-label': `Slide ${index + 1}`,
           isActive: index === currentIndex,
           onClick: () => handleSlideChange(index),
           isSmall: isSecondSmallDot,
           isSmaller: isFirstSmallDot || isClipped,
           id: idPrefix && `${idPrefix}--dot-${index}`,
-          'aria-controls': idPrefix && `${idPrefix}--slide-${index}`,
         });
       });
   }, [
@@ -138,6 +138,27 @@ exports.CarouselDotsList = React.forwardRef((props, ref) => {
       justMounted.current = false;
     }
   }, [currentIndex, firstVisibleDotIndex, slideCount, visibleCount, width]);
+  const handleKeyDown = (event) => {
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+      return;
+    }
+    const key = event.key;
+    if (key === 'ArrowLeft' || key === 'ArrowRight') {
+      event.preventDefault();
+    }
+  };
+  const handleKeyUp = (event) => {
+    switch (event.key) {
+      case 'ArrowLeft': {
+        handleSlideChange((slideCount + currentIndex - 1) % slideCount);
+        break;
+      }
+      case 'ArrowRight': {
+        handleSlideChange((slideCount + currentIndex + 1) % slideCount);
+        break;
+      }
+    }
+  };
   return React.createElement(
     React.Fragment,
     null,
@@ -151,6 +172,9 @@ exports.CarouselDotsList = React.forwardRef((props, ref) => {
         role: 'tablist',
         'aria-label': 'Slides',
         ref: refs,
+        onKeyDown: handleKeyDown,
+        onKeyUp: handleKeyUp,
+        tabIndex: -1,
         ...rest,
       },
       children ?? dots,

package/cjs/core/Carousel/CarouselNavigation.d.ts

@@ -6,14 +6,14 @@ import type { PolymorphicForwardRefComponent } from '../utils/index.js';
  *
  * `children` can be specified to override what is shown in this navigation section.
  */
-export declare const CarouselNavigation: PolymorphicForwardRefComponent<"nav", {}> & {
+export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {}> & {
     PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
     }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "isActive" | "iconProps"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
         iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
-    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+    } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }>;
     NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
@@ -22,7 +22,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"nav", {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
         iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
-    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+    } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }>;
 };

package/cjs/core/Carousel/CarouselNavigation.js

@@ -9,15 +9,14 @@ const tslib_1 = require('tslib');
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const CarouselContext_js_1 = require('./CarouselContext.js');
-const index_js_1 = require('../Buttons/index.js');
+const IconButton_js_1 = require('../Buttons/IconButton.js');
 const CarouselDotsList_js_1 = require('./CarouselDotsList.js');
-const index_js_2 = require('../utils/index.js');
+const index_js_1 = require('../utils/index.js');
 const CarouselNavigationComponent = React.forwardRef((props, ref) => {
   const { className, children, ...rest } = props;
   return React.createElement(
-    index_js_2.Box,
+    index_js_1.Box,
     {
-      as: 'nav',
       className: (0, classnames_1.default)(
         'iui-carousel-navigation',
         className,
@@ -30,13 +29,13 @@ const CarouselNavigationComponent = React.forwardRef((props, ref) => {
         React.Fragment,
         null,
         React.createElement(
-          index_js_2.Box,
+          index_js_1.Box,
           { className: 'iui-carousel-navigation-left' },
           React.createElement(PreviousButton, null),
         ),
         React.createElement(CarouselDotsList_js_1.CarouselDotsList, null),
         React.createElement(
-          index_js_2.Box,
+          index_js_1.Box,
           { className: 'iui-carousel-navigation-right' },
           React.createElement(NextButton, null),
         ),
@@ -49,20 +48,14 @@ const PreviousButton = React.forwardRef((props, ref) => {
   if (!context) {
     throw new Error('CarouselNavigation should be used inside Carousel');
   }
-  const {
-    slideCount,
-    currentIndex,
-    setCurrentIndex,
-    keysPressed,
-    scrollToSlide,
-  } = context;
+  const { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
   return React.createElement(
-    index_js_1.IconButton,
+    IconButton_js_1.IconButton,
     {
       styleType: 'borderless',
       size: 'small',
       tabIndex: -1,
-      'data-pressed': keysPressed['ArrowLeft'] || undefined,
+      'aria-label': 'Previous',
       ref: ref,
       ...props,
       onClick: (e) => {
@@ -72,7 +65,7 @@ const PreviousButton = React.forwardRef((props, ref) => {
         props?.onClick?.(e);
       },
     },
-    React.createElement(index_js_2.SvgChevronLeft, null),
+    React.createElement(index_js_1.SvgChevronLeft, null),
   );
 });
 /** Button for switching to next slide */
@@ -81,20 +74,14 @@ const NextButton = React.forwardRef((props, ref) => {
   if (!context) {
     throw new Error('CarouselNavigation should be used inside Carousel');
   }
-  const {
-    slideCount,
-    currentIndex,
-    setCurrentIndex,
-    keysPressed,
-    scrollToSlide,
-  } = context;
+  const { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
   return React.createElement(
-    index_js_1.IconButton,
+    IconButton_js_1.IconButton,
     {
       styleType: 'borderless',
       size: 'small',
       tabIndex: -1,
-      'data-pressed': keysPressed['ArrowRight'] || undefined,
+      'aria-label': 'Next',
       ref: ref,
       ...props,
       onClick: (e) => {
@@ -104,7 +91,7 @@ const NextButton = React.forwardRef((props, ref) => {
         props?.onClick?.(e);
       },
     },
-    React.createElement(index_js_2.SvgChevronRight, null),
+    React.createElement(index_js_1.SvgChevronRight, null),
   );
 });
 /**

package/cjs/core/Carousel/CarouselSlide.d.ts

@@ -12,5 +12,5 @@ type CarouselSlideProps = {
  * It is recommended that the slide content bring its own dimensions (esp. height) and that
  * the dimensions should be the same for all slides.
  */
-export declare const CarouselSlide: PolymorphicForwardRefComponent<"li", CarouselSlideProps>;
+export declare const CarouselSlide: PolymorphicForwardRefComponent<"div", CarouselSlideProps>;
 export {};

package/cjs/core/Carousel/CarouselSlide.js

@@ -22,7 +22,7 @@ exports.CarouselSlide = React.forwardRef((props, ref) => {
   if (!context || index == null) {
     throw new Error('CarouselSlide must be used within Carousel');
   }
-  const { isManuallyUpdating, setCurrentIndex } = context;
+  const { isManuallyUpdating, currentIndex, setCurrentIndex } = context;
   const updateActiveIndexOnScroll = React.useCallback(() => {
     // only update index if scroll was triggered by browser
     if (!isManuallyUpdating.current) {
@@ -38,15 +38,25 @@ exports.CarouselSlide = React.forwardRef((props, ref) => {
   return React.createElement(
     index_js_1.Box,
     {
-      as: 'li',
       className: (0, classnames_1.default)(
         'iui-carousel-slider-item',
         className,
       ),
       role: 'tabpanel',
       'aria-roledescription': 'slide',
+      tabIndex: index === currentIndex ? 0 : undefined,
       ref: refs,
+      inert: index !== currentIndex ? '' : undefined,
       ...rest,
+      onKeyDown: (0, index_js_1.mergeEventHandlers)(
+        props.onKeyDown,
+        (event) => {
+          // prevent default browser scrolling on arrow keys because focus will get lost when slide switches
+          if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+            event.preventDefault();
+          }
+        },
+      ),
     },
     children,
   );

package/cjs/core/Carousel/CarouselSlider.d.ts

@@ -2,4 +2,4 @@ import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 /**
  * `CarouselSlider` is the scrollable list that should consist of `CarouselSlide` components.
  */
-export declare const CarouselSlider: PolymorphicForwardRefComponent<"ol", {}>;
+export declare const CarouselSlider: PolymorphicForwardRefComponent<"div", {}>;

package/cjs/core/Carousel/CarouselSlider.js

@@ -27,6 +27,7 @@ exports.CarouselSlider = React.forwardRef((props, ref) => {
         React.isValidElement(child)
           ? React.cloneElement(child, {
               id: `${idPrefix}--slide-${index}`,
+              'aria-labelledby': `${idPrefix}--dot-${index}`,
               index,
             })
           : child,
@@ -65,11 +66,10 @@ exports.CarouselSlider = React.forwardRef((props, ref) => {
   return React.createElement(
     index_js_1.Box,
     {
-      as: 'ol',
-      'aria-live': 'polite',
       className: (0, classnames_1.default)('iui-carousel-slider', className),
       ref: refs,
       onScroll: handleOnScroll,
+      tabIndex: -1,
       ...rest,
     },
     items,

package/cjs/core/Checkbox/Checkbox.js

@@ -8,8 +8,8 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../ProgressIndicators/index.js');
-const index_js_2 = require('../utils/index.js');
+const ProgressRadial_js_1 = require('../ProgressIndicators/ProgressRadial.js');
+const index_js_1 = require('../utils/index.js');
 /**
  * Simple input checkbox
  * @example
@@ -37,7 +37,7 @@ exports.Checkbox = React.forwardRef((props, ref) => {
     ...rest
   } = props;
   const inputElementRef = React.useRef(null);
-  const refs = (0, index_js_2.useMergedRefs)(inputElementRef, ref);
+  const refs = (0, index_js_1.useMergedRefs)(inputElementRef, ref);
   React.useEffect(() => {
     if (inputElementRef.current) {
       inputElementRef.current.indeterminate = indeterminate;
@@ -49,7 +49,7 @@ exports.Checkbox = React.forwardRef((props, ref) => {
   const checkbox = React.createElement(
     React.Fragment,
     null,
-    React.createElement(index_js_2.Box, {
+    React.createElement(index_js_1.Box, {
       as: 'input',
       className: (0, classnames_1.default)(
         'iui-checkbox',
@@ -66,7 +66,7 @@ exports.Checkbox = React.forwardRef((props, ref) => {
       ...rest,
     }),
     isLoading &&
-      React.createElement(index_js_1.ProgressRadial, {
+      React.createElement(ProgressRadial_js_1.ProgressRadial, {
         size: 'x-small',
         indeterminate: true,
       }),
@@ -76,7 +76,7 @@ exports.Checkbox = React.forwardRef((props, ref) => {
   return !label
     ? checkbox
     : React.createElement(
-        index_js_2.Box,
+        index_js_1.Box,
         {
           as: 'label',
           className: (0, classnames_1.default)(
@@ -93,7 +93,7 @@ exports.Checkbox = React.forwardRef((props, ref) => {
         checkbox,
         label &&
           React.createElement(
-            index_js_2.Box,
+            index_js_1.Box,
             {
               as: 'span',
               className: (0, classnames_1.default)(

package/cjs/core/ColorPicker/ColorBuilder.js

@@ -9,7 +9,7 @@ const tslib_1 = require('tslib');
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const index_js_1 = require('../utils/index.js');
-const index_js_2 = require('../Slider/index.js');
+const Slider_js_1 = require('../Slider/Slider.js');
 const ColorPickerContext_js_1 = require('./ColorPickerContext.js');
 const getVerticalPercentageOfRectangle = (rect, pointer) => {
   const position = (0, index_js_1.getBoundedValue)(
@@ -267,7 +267,7 @@ exports.ColorBuilder = React.forwardRef((props, ref) => {
         ref: colorDotRef,
       }),
     ),
-    React.createElement(index_js_2.Slider, {
+    React.createElement(Slider_js_1.Slider, {
       minLabel: '',
       maxLabel: '',
       values: [sliderValue],
@@ -282,9 +282,10 @@ exports.ColorBuilder = React.forwardRef((props, ref) => {
       },
       min: 0,
       max: 359,
+      thumbProps: () => ({ 'aria-label': 'Hue' }),
     }),
     showAlpha &&
-      React.createElement(index_js_2.Slider, {
+      React.createElement(Slider_js_1.Slider, {
         minLabel: '',
         maxLabel: '',
         values: [alphaValue],
@@ -303,6 +304,7 @@ exports.ColorBuilder = React.forwardRef((props, ref) => {
         style: {
           '--iui-color-picker-selected-color': hueColorString,
         },
+        thumbProps: () => ({ 'aria-label': 'Opacity' }),
       }),
   );
 });

package/cjs/core/ColorPicker/ColorInputPanel.js

@@ -8,9 +8,9 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../Buttons/index.js');
-const index_js_2 = require('../Input/index.js');
-const index_js_3 = require('../utils/index.js');
+const IconButton_js_1 = require('../Buttons/IconButton.js');
+const Input_js_1 = require('../Input/Input.js');
+const index_js_1 = require('../utils/index.js');
 const ColorPickerContext_js_1 = require('./ColorPickerContext.js');
 /**
  * `ColorInputPanel` shows input fields to enter precise color values in the specified format.
@@ -41,10 +41,10 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
     if (currentFormat === 'hsl') {
       const hsl = activeColor.toHslColor();
       setInput([
-        index_js_3.ColorValue.getFormattedColorNumber(hsvColor.h),
-        index_js_3.ColorValue.getFormattedColorNumber(hsl.s),
-        index_js_3.ColorValue.getFormattedColorNumber(hsl.l),
-        index_js_3.ColorValue.getFormattedColorNumber(
+        index_js_1.ColorValue.getFormattedColorNumber(hsvColor.h),
+        index_js_1.ColorValue.getFormattedColorNumber(hsl.s),
+        index_js_1.ColorValue.getFormattedColorNumber(hsl.l),
+        index_js_1.ColorValue.getFormattedColorNumber(
           hsl.a ?? activeColor.getAlpha() / 255,
           2,
         ),
@@ -55,7 +55,7 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
         rgb.r.toString(),
         rgb.g.toString(),
         rgb.b.toString(),
-        index_js_3.ColorValue.getFormattedColorNumber(
+        index_js_1.ColorValue.getFormattedColorNumber(
           rgb.a ?? activeColor.getAlpha() / 255,
           2,
         ),
@@ -85,7 +85,7 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
     if (currentFormat === 'hex') {
       try {
         const value = input[0].replace(/ /g, '').toLowerCase(); // remove white space from input
-        color = index_js_3.ColorValue.create(value);
+        color = index_js_1.ColorValue.create(value);
         setValidHexInput(true);
         if (activeColor.toHexString(showAlpha).toLowerCase() === value) {
           return;
@@ -113,7 +113,7 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
       if (hsl.h === h && hsl.s === s && hsl.l === l && hsl.a === a) {
         return;
       }
-      color = index_js_3.ColorValue.create({ h, s, l, a });
+      color = index_js_1.ColorValue.create({ h, s, l, a });
     }
     if (currentFormat === 'rgb') {
       const [r, g, b, a] = input.map(Number);
@@ -133,17 +133,18 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
       if (rgb.r === r && rgb.g === g && rgb.b === b && rgb.a === a) {
         return;
       }
-      color = index_js_3.ColorValue.create({ r, g, b, a });
+      color = index_js_1.ColorValue.create({ r, g, b, a });
     }
     if (color) {
       applyHsvColorChange(color.toHsvColor(), true, color);
     }
   };
-  const hexInputField = React.createElement(index_js_2.Input, {
+  const hexInputField = React.createElement(Input_js_1.Input, {
     size: 'small',
     maxLength: showAlpha ? 9 : 7,
     minLength: 1,
     placeholder: 'HEX',
+    'aria-label': 'Hex',
     value: input[0],
     onChange: (event) => {
       const value = event.target.value.startsWith('#')
@@ -166,13 +167,14 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
   const hslInputs = React.createElement(
     React.Fragment,
     null,
-    React.createElement(index_js_2.Input, {
+    React.createElement(Input_js_1.Input, {
       size: 'small',
       type: 'number',
       min: '0',
       max: '359',
       step: '.1',
       placeholder: 'H',
+      'aria-label': 'Hue',
       value: input[0] ?? '',
       onChange: (event) => {
         setInput([event.target.value, input[1], input[2], input[3]]);
@@ -192,13 +194,14 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
       status:
         Number(input[0]) < 0 || Number(input[0]) > 360 ? 'negative' : undefined,
     }),
-    React.createElement(index_js_2.Input, {
+    React.createElement(Input_js_1.Input, {
       size: 'small',
       type: 'number',
       min: '0',
       max: '100',
       step: '.1',
       placeholder: 'S',
+      'aria-label': 'Saturation',
       value: input[1] ?? '',
       onChange: (event) => {
         setInput([input[0], event.target.value, input[2], input[3]]);
@@ -218,13 +221,14 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
       status:
         Number(input[1]) < 0 || Number(input[1]) > 100 ? 'negative' : undefined,
     }),
-    React.createElement(index_js_2.Input, {
+    React.createElement(Input_js_1.Input, {
       size: 'small',
       type: 'number',
       min: '0',
       max: '100',
       step: '.1',
       placeholder: 'L',
+      'aria-label': 'Lightness',
       value: input[2] ?? '',
       onChange: (event) => {
         setInput([input[0], input[1], event.target.value, input[3]]);
@@ -245,13 +249,14 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
         Number(input[2]) < 0 || Number(input[2]) > 100 ? 'negative' : undefined,
     }),
     showAlpha &&
-      React.createElement(index_js_2.Input, {
+      React.createElement(Input_js_1.Input, {
         size: 'small',
         type: 'number',
         min: '0',
         max: '1',
         step: '.01',
         placeholder: 'A',
+        'aria-label': 'Alpha',
         value: input[3] ?? '',
         onChange: (event) => {
           setInput([input[0], input[1], input[2], event.target.value]);
@@ -275,12 +280,13 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
   const rgbInputs = React.createElement(
     React.Fragment,
     null,
-    React.createElement(index_js_2.Input, {
+    React.createElement(Input_js_1.Input, {
       size: 'small',
       type: 'number',
       min: '0',
       max: '255',
       placeholder: 'R',
+      'aria-label': 'Red',
       value: input[0] ?? '',
       onChange: (event) => {
         setInput([event.target.value, input[1], input[2], input[3]]);
@@ -300,12 +306,13 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
       status:
         Number(input[0]) < 0 || Number(input[0]) > 255 ? 'negative' : undefined,
     }),
-    React.createElement(index_js_2.Input, {
+    React.createElement(Input_js_1.Input, {
       size: 'small',
       type: 'number',
       min: '0',
       max: '255',
       placeholder: 'G',
+      'aria-label': 'Green',
       value: input[1] ?? '',
       onChange: (event) => {
         setInput([input[0], event.target.value, input[2], input[3]]);
@@ -325,12 +332,13 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
       status:
         Number(input[1]) < 0 || Number(input[1]) > 255 ? 'negative' : undefined,
     }),
-    React.createElement(index_js_2.Input, {
+    React.createElement(Input_js_1.Input, {
       size: 'small',
       type: 'number',
       min: '0',
       max: '255',
       placeholder: 'B',
+      'aria-label': 'Blue',
       value: input[2] ?? '',
       onChange: (event) => {
         setInput([input[0], input[1], event.target.value, input[3]]);
@@ -351,13 +359,14 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
         Number(input[2]) < 0 || Number(input[2]) > 255 ? 'negative' : undefined,
     }),
     showAlpha &&
-      React.createElement(index_js_2.Input, {
+      React.createElement(Input_js_1.Input, {
         size: 'small',
         type: 'number',
         min: '0',
         max: '1',
         step: '.01',
         placeholder: 'A',
+        'aria-label': 'Alpha',
         value: input[3] ?? '',
         onChange: (event) => {
           setInput([input[0], input[1], input[2], event.target.value]);
@@ -378,8 +387,9 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
           Number(input[3]) < 0 || Number(input[3]) > 1 ? 'negative' : undefined,
       }),
   );
+  const labelId = (0, index_js_1.useId)();
   return React.createElement(
-    index_js_3.Box,
+    index_js_1.Box,
     {
       className: (0, classnames_1.default)(
         'iui-color-input-wrapper',
@@ -389,24 +399,34 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
       ...rest,
     },
     React.createElement(
-      index_js_3.Box,
-      { className: 'iui-color-picker-section-label' },
-      showAlpha && currentFormat != 'hex'
+      index_js_1.Box,
+      { className: 'iui-color-picker-section-label', id: labelId },
+      showAlpha && currentFormat !== 'hex'
         ? currentFormat.toUpperCase() + 'A'
         : currentFormat.toUpperCase(),
     ),
     React.createElement(
-      index_js_3.Box,
+      index_js_1.Box,
       { className: 'iui-color-input' },
       allowedColorFormats.length > 1 &&
         React.createElement(
-          index_js_1.IconButton,
-          { styleType: 'borderless', onClick: swapColorFormat, size: 'small' },
-          React.createElement(index_js_3.SvgSwap, null),
+          IconButton_js_1.IconButton,
+          {
+            styleType: 'borderless',
+            onClick: swapColorFormat,
+            size: 'small',
+            label: 'Switch format',
+          },
+          React.createElement(index_js_1.SvgSwap, null),
         ),
       React.createElement(
-        index_js_3.Box,
-        { ref: inputsContainerRef, className: 'iui-color-input-fields' },
+        index_js_1.Box,
+        {
+          ref: inputsContainerRef,
+          className: 'iui-color-input-fields',
+          role: currentFormat !== 'hex' ? 'group' : undefined,
+          'aria-labelledby': currentFormat !== 'hex' ? labelId : undefined,
+        },
         currentFormat === 'hex' && hexInputField,
         currentFormat === 'rgb' && rgbInputs,
         currentFormat === 'hsl' && hslInputs,