@itwin/itwinui-react 3.0.0-dev.12 → 3.0.0-dev.14

package/cjs/core/ThemeProvider/ThemeProvider.js

@@ -55,7 +55,9 @@ exports.ThemeProvider = React.forwardRef((props, forwardedRef) => {
   const shouldApplyBackground = themeOptions?.applyBackground ?? !parentTheme;
   const contextValue = React.useMemo(
     () => ({ theme, themeOptions, portalContainer }),
-    [theme, themeOptions, portalContainer],
+    // we do include all dependencies below, but we want to stringify the objects as they could be different on each render
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [theme, JSON.stringify(themeOptions), portalContainer],
   );
   return React.createElement(
     ThemeContext_js_1.ThemeContext.Provider,

package/cjs/core/Tile/Tile.js

@@ -324,16 +324,17 @@ const TileComponent = React.forwardRef((props, forwardedRef) => {
           : name,
       ),
     ),
-    React.createElement(
-      TileThumbnailArea,
-      null,
-      typeof thumbnail !== 'string'
-        ? React.createElement(TileThumbnailPicture, null, thumbnail)
-        : React.createElement(TileThumbnailPicture, { url: thumbnail }),
-      badge && React.createElement(TileBadgeContainer, null, badge),
-      leftIcon && React.createElement(TileTypeIndicator, null, leftIcon),
-      rightIcon && React.createElement(TileQuickAction, null, rightIcon),
-    ),
+    thumbnail &&
+      React.createElement(
+        TileThumbnailArea,
+        null,
+        typeof thumbnail !== 'string'
+          ? React.createElement(TileThumbnailPicture, null, thumbnail)
+          : React.createElement(TileThumbnailPicture, { url: thumbnail }),
+        badge && React.createElement(TileBadgeContainer, null, badge),
+        leftIcon && React.createElement(TileTypeIndicator, null, leftIcon),
+        rightIcon && React.createElement(TileQuickAction, null, rightIcon),
+      ),
     React.createElement(
       TileContentArea,
       null,

package/cjs/core/utils/hooks/useOverflow.js

@@ -73,7 +73,9 @@ const useOverflow = (items, disabled = false, orientation = 'horizontal') => {
     if (availableSize < requiredSize) {
       const avgItemSize = requiredSize / visibleCount;
       const visibleItems = Math.floor(availableSize / avgItemSize);
-      setVisibleCount(visibleItems);
+      /* When first item is larger than the container - visibleItems count is 0,
+            We can assume that at least some part of the first item is visible and return 1. */
+      setVisibleCount(visibleItems > 0 ? visibleItems : 1);
     } else if (needsFullRerender.current) {
       const childrenSize = Array.from(containerRef.current.children).reduce(
         (sum, child) => sum + child[`offset${dimension}`],

package/cjs/index.d.ts

@@ -39,8 +39,7 @@ export { HeaderLogo } from './core/Header/HeaderLogo.js';
 export { List } from './core/List/List.js';
 export { ListItem } from './core/List/ListItem.js';
 export { TransferList } from './core/TransferList/TransferList.js';
-export { Tabs } from './core/Tabs/Tabs.js';
-export { Tab } from './core/Tabs/Tab.js';
+export { Tabs, Tab } from './core/Tabs/Tabs.js';
 export { InformationPanel } from './core/InformationPanel/InformationPanel.js';
 export { InformationPanelWrapper } from './core/InformationPanel/InformationPanelWrapper.js';
 export { InformationPanelHeader } from './core/InformationPanel/InformationPanelHeader.js';

package/cjs/index.js

@@ -420,11 +420,10 @@ Object.defineProperty(exports, 'Tabs', {
     return Tabs_js_1.Tabs;
   },
 });
-var Tab_js_1 = require('./core/Tabs/Tab.js');
 Object.defineProperty(exports, 'Tab', {
   enumerable: true,
   get: function () {
-    return Tab_js_1.Tab;
+    return Tabs_js_1.Tab;
   },
 });
 var InformationPanel_js_1 = require('./core/InformationPanel/InformationPanel.js');

package/cjs/styles.js

@@ -72,9 +72,7 @@ const styles = {
   'iui-color-selection-wrapper': '_iui3-color-selection-wrapper',
   'iui-color-field': '_iui3-color-field',
   'iui-hue-slider': '_iui3-hue-slider',
-  'iui-slider-container': '_iui3-slider-container',
-  'iui-slider-rail': '_iui3-slider-rail',
-  'iui-slider-thumb': '_iui3-slider-thumb',
+  'iui-slider': '_iui3-slider',
   'iui-opacity-slider': '_iui3-opacity-slider',
   'iui-color-dot': '_iui3-color-dot',
   'iui-date-picker': '_iui3-date-picker',
@@ -215,10 +213,10 @@ const styles = {
   'iui-overlay-exiting': '_iui3-overlay-exiting',
   closeAnimation,
   'iui-progress-indicator-radial': '_iui3-progress-indicator-radial',
-  'iui-usy2q6d': '_iui3-usy2q6d',
+  'iui-ua1bwgp': '_iui3-ua1bwgp',
   'iui-progress-indicator-linear-label':
     '_iui3-progress-indicator-linear-label',
-  'iui-usy2q6u': '_iui3-usy2q6u',
+  'iui-ua1bwhh': '_iui3-ua1bwhh',
   'iui-radio': '_iui3-radio',
   'iui-radio-tile': '_iui3-radio-tile',
   'iui-radio-tile-icon': '_iui3-radio-tile-icon',
@@ -230,6 +228,7 @@ const styles = {
   'iui-expandable-searchbox': '_iui3-expandable-searchbox',
   'iui-searchbox-open-button': '_iui3-searchbox-open-button',
   'iui-search-icon': '_iui3-search-icon',
+  'iui-search-input': '_iui3-search-input',
   'iui-placeholder': '_iui3-placeholder',
   'iui-select-tag': '_iui3-select-tag',
   'iui-select-tag-label': '_iui3-select-tag-label',
@@ -257,15 +256,14 @@ const styles = {
     '_iui3-side-navigation-submenu-header-actions',
   'iui-side-navigation-wrapper': '_iui3-side-navigation-wrapper',
   'iui-skip-to-content-link': '_iui3-skip-to-content-link',
-  'iui-slider-component-container': '_iui3-slider-component-container',
-  'iui-slider-track': '_iui3-slider-track',
+  'iui-slider-container': '_iui3-slider-container',
   'iui-slider-min': '_iui3-slider-min',
   'iui-slider-max': '_iui3-slider-max',
+  'iui-slider-ticks': '_iui3-slider-ticks',
   'iui-slider-tick': '_iui3-slider-tick',
+  'iui-slider-track': '_iui3-slider-track',
+  'iui-slider-thumb': '_iui3-slider-thumb',
   'iui-grabbing': '_iui3-grabbing',
-  'iui-slider-ticks': '_iui3-slider-ticks',
-  'iui-slider-horizontal': '_iui3-slider-horizontal',
-  'iui-slider-vertical': '_iui3-slider-vertical',
   'iui-stepper': '_iui3-stepper',
   'iui-stepper-step': '_iui3-stepper-step',
   'iui-current': '_iui3-current',
@@ -326,9 +324,11 @@ const styles = {
   'iui-tabs-wrapper': '_iui3-tabs-wrapper',
   'iui-horizontal': '_iui3-horizontal',
   'iui-tabs': '_iui3-tabs',
+  'scroll-shadow-inset-horizontal': '_iui3-scroll-shadow-inset-horizontal',
   'iui-borderless': '_iui3-borderless',
   'iui-tab': '_iui3-tab',
   'iui-vertical': '_iui3-vertical',
+  'scroll-shadow-inset-vertical': '_iui3-scroll-shadow-inset-vertical',
   'iui-tabs-content': '_iui3-tabs-content',
   'iui-tabs-actions-wrapper': '_iui3-tabs-actions-wrapper',
   'iui-default': '_iui3-default',

package/esm/core/Carousel/Carousel.d.ts

@@ -14,7 +14,8 @@ type CarouselProps = {
 };
 /**
  * The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is
- * located below the slides, consisting of "dots" and "previous"/"next" buttons, used for changing slides.
+ * shown below the slides, consisting of "dots" and "previous"/"next" buttons, used for changing slides; this navigation
+ * section must be present _before_ the slides in DOM order, even though it is visually shown below the slides.
  *
  * The currently shown slide can also be changed using the left/right arrow keys or by dragging on a touch device.
  *
@@ -22,20 +23,23 @@ type CarouselProps = {
  *
  * @example
  * <Carousel>
+ *   <Carousel.Navigation />
  *   <Carousel.Slider>
  *     <Carousel.Slide>...</Carousel.Slide>
  *     <Carousel.Slide>...</Carousel.Slide>
  *     <Carousel.Slide>...</Carousel.Slide>
  *   </Carousel.Slider>
- *   <Carousel.Navigation />
  * </Carousel>
  */
 export declare const Carousel: PolymorphicForwardRefComponent<"section", CarouselProps> & {
-    Slider: PolymorphicForwardRefComponent<"ol", {}>;
-    Slide: PolymorphicForwardRefComponent<"li", {
+    Slider: PolymorphicForwardRefComponent<"div", {}>;
+    Slide: PolymorphicForwardRefComponent<"div", {
         index?: number | undefined;
     }>;
-    Navigation: PolymorphicForwardRefComponent<"nav", {}> & {
+    /**
+     * Contains the dots and previous/next buttons for navigating the slides. Must be present _before_ the slides in DOM.
+     */
+    Navigation: 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"> & {
@@ -55,6 +59,9 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
             as?: "button" | undefined;
         }>;
     };
+    /**
+     * Contains the dots for activating the slides. Must be present _before_ the slides in DOM.
+     */
     DotsList: PolymorphicForwardRefComponent<"div", {
         length?: number | undefined;
         currentIndex?: number | undefined;

package/esm/core/Carousel/Carousel.js

@@ -39,42 +39,9 @@ const CarouselComponent = React.forwardRef((props, ref) => {
     scrollToSlide.current(userActiveIndex, {
       instant: justMounted.current,
     });
-    // re-focus the carousel for keyboard nav, but not on first mount
-    // because it shows outline and might interfere with other components
-    if (!justMounted.current) {
-      carouselRef.current?.focus({ preventScroll: true });
-    }
     justMounted.current = false;
   }, [userActiveIndex]);
   const [slideCount, setSlideCount] = React.useState(0);
-  const [keysPressed, setKeysPressed] = React.useState({});
-  const handleKeyDown = (event) => {
-    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
-      return;
-    }
-    const key = event.key;
-    if (key === 'ArrowLeft' || key === 'ArrowRight') {
-      setKeysPressed((old) => ({ ...old, [key]: true }));
-    }
-  };
-  const handleKeyUp = (event) => {
-    switch (event.key) {
-      case 'ArrowLeft': {
-        setKeysPressed((old) => ({ ...old, ArrowLeft: false }));
-        const prevIndex = (slideCount + currentIndex - 1) % slideCount;
-        scrollToSlide.current(prevIndex);
-        setCurrentIndex(prevIndex);
-        break;
-      }
-      case 'ArrowRight': {
-        setKeysPressed((old) => ({ ...old, ArrowRight: false }));
-        const nextIndex = (slideCount + currentIndex + 1) % slideCount;
-        scrollToSlide.current(nextIndex);
-        setCurrentIndex(nextIndex);
-        break;
-      }
-    }
-  };
   const userOnSlideChange = useLatestRef(onSlideChange);
   React.useEffect(() => {
     userOnSlideChange.current?.(currentIndex);
@@ -84,9 +51,6 @@ const CarouselComponent = React.forwardRef((props, ref) => {
     {
       as: 'section',
       'aria-roledescription': 'carousel',
-      tabIndex: 0,
-      onKeyDown: handleKeyDown,
-      onKeyUp: handleKeyUp,
       ref: refs,
       className: cx('iui-carousel', className),
       ...rest,
@@ -100,7 +64,6 @@ const CarouselComponent = React.forwardRef((props, ref) => {
           setCurrentIndex,
           slideCount,
           setSlideCount,
-          keysPressed,
           idPrefix: id,
           isManuallyUpdating,
           scrollToSlide,
@@ -112,7 +75,8 @@ const CarouselComponent = React.forwardRef((props, ref) => {
 });
 /**
  * The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is
- * located below the slides, consisting of "dots" and "previous"/"next" buttons, used for changing slides.
+ * shown below the slides, consisting of "dots" and "previous"/"next" buttons, used for changing slides; this navigation
+ * section must be present _before_ the slides in DOM order, even though it is visually shown below the slides.
  *
  * The currently shown slide can also be changed using the left/right arrow keys or by dragging on a touch device.
  *
@@ -120,18 +84,24 @@ const CarouselComponent = React.forwardRef((props, ref) => {
  *
  * @example
  * <Carousel>
+ *   <Carousel.Navigation />
  *   <Carousel.Slider>
  *     <Carousel.Slide>...</Carousel.Slide>
  *     <Carousel.Slide>...</Carousel.Slide>
  *     <Carousel.Slide>...</Carousel.Slide>
  *   </Carousel.Slider>
- *   <Carousel.Navigation />
  * </Carousel>
  */
 export const Carousel = Object.assign(CarouselComponent, {
   Slider: CarouselSlider,
   Slide: CarouselSlide,
+  /**
+   * Contains the dots and previous/next buttons for navigating the slides. Must be present _before_ the slides in DOM.
+   */
   Navigation: CarouselNavigation,
+  /**
+   * Contains the dots for activating the slides. Must be present _before_ the slides in DOM.
+   */
   DotsList: CarouselDotsList,
   Dot: CarouselDot,
 });

package/esm/core/Carousel/CarouselContext.d.ts

@@ -16,10 +16,6 @@ export declare const CarouselContext: React.Context<{
      * State updater for slideCount.
      */
     setSlideCount: (length: number | ((old: number) => void)) => void;
-    /**
-     * Stateful value of the left/right arrow keys currently pressed.
-     */
-    keysPressed: Record<string, boolean>;
     /**
      * Prefix used for setting id for internal carousel components.
      */

package/esm/core/Carousel/CarouselDot.js

@@ -13,7 +13,7 @@ export const CarouselDot = React.forwardRef((props, ref) => {
   const { isActive, isSmaller, isSmall, className, ...rest } = props;
   return React.createElement(ButtonBase, {
     role: 'tab',
-    tabIndex: -1,
+    tabIndex: isActive ? 0 : -1,
     className: cx(
       'iui-carousel-navigation-dot',
       {

package/esm/core/Carousel/CarouselDotsList.js

@@ -55,6 +55,7 @@ export const 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 @@ export const CarouselDotsList = React.forwardRef((props, ref) => {
           index < firstVisibleDotIndex || index > lastVisibleDotIndex;
         return React.createElement(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 @@ export const 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,
@@ -148,6 +169,9 @@ export const CarouselDotsList = React.forwardRef((props, ref) => {
         role: 'tablist',
         'aria-label': 'Slides',
         ref: refs,
+        onKeyDown: handleKeyDown,
+        onKeyUp: handleKeyUp,
+        tabIndex: -1,
         ...rest,
       },
       children ?? dots,

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

@@ -6,7 +6,7 @@ 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"> & {

package/esm/core/Carousel/CarouselNavigation.js

@@ -12,12 +12,7 @@ const CarouselNavigationComponent = React.forwardRef((props, ref) => {
   const { className, children, ...rest } = props;
   return React.createElement(
     Box,
-    {
-      as: 'nav',
-      className: cx('iui-carousel-navigation', className),
-      ref: ref,
-      ...rest,
-    },
+    { className: cx('iui-carousel-navigation', className), ref: ref, ...rest },
     children ??
       React.createElement(
         React.Fragment,
@@ -42,20 +37,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(
     IconButton,
     {
       styleType: 'borderless',
       size: 'small',
       tabIndex: -1,
-      'data-pressed': keysPressed['ArrowLeft'] || undefined,
+      'aria-label': 'Previous',
       ref: ref,
       ...props,
       onClick: (e) => {
@@ -74,20 +63,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(
     IconButton,
     {
       styleType: 'borderless',
       size: 'small',
       tabIndex: -1,
-      'data-pressed': keysPressed['ArrowRight'] || undefined,
+      'aria-label': 'Next',
       ref: ref,
       ...props,
       onClick: (e) => {

package/esm/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/esm/core/Carousel/CarouselSlide.js

@@ -4,7 +4,12 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Box, useIntersection, useMergedRefs } from '../utils/index.js';
+import {
+  Box,
+  mergeEventHandlers,
+  useIntersection,
+  useMergedRefs,
+} from '../utils/index.js';
 import { CarouselContext } from './CarouselContext.js';
 /**
  * `CarouselSlide` is used for the actual slide content. The content can be specified through `children`.
@@ -18,7 +23,7 @@ export const 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) {
@@ -34,12 +39,19 @@ export const CarouselSlide = React.forwardRef((props, ref) => {
   return React.createElement(
     Box,
     {
-      as: 'li',
       className: cx('iui-carousel-slider-item', className),
       role: 'tabpanel',
       'aria-roledescription': 'slide',
+      tabIndex: index === currentIndex ? 0 : undefined,
       ref: refs,
+      inert: index !== currentIndex ? '' : undefined,
       ...rest,
+      onKeyDown: 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/esm/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/esm/core/Carousel/CarouselSlider.js

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

package/esm/core/ColorPicker/ColorBuilder.js

@@ -273,6 +273,7 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
       },
       min: 0,
       max: 359,
+      thumbProps: () => ({ 'aria-label': 'Hue' }),
     }),
     showAlpha &&
       React.createElement(Slider, {
@@ -294,6 +295,7 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
         style: {
           '--iui-color-picker-selected-color': hueColorString,
         },
+        thumbProps: () => ({ 'aria-label': 'Opacity' }),
       }),
   );
 });

package/esm/core/ColorPicker/ColorInputPanel.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 import cx from 'classnames';
 import { IconButton } from '../Buttons/IconButton.js';
 import { Input } from '../Input/Input.js';
-import { ColorValue, SvgSwap, Box } from '../utils/index.js';
+import { ColorValue, SvgSwap, Box, useId } from '../utils/index.js';
 import { useColorPickerContext } from './ColorPickerContext.js';
 /**
  * `ColorInputPanel` shows input fields to enter precise color values in the specified format.
@@ -140,6 +140,7 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
     maxLength: showAlpha ? 9 : 7,
     minLength: 1,
     placeholder: 'HEX',
+    'aria-label': 'Hex',
     value: input[0],
     onChange: (event) => {
       const value = event.target.value.startsWith('#')
@@ -169,6 +170,7 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
       max: '359',
       step: '.1',
       placeholder: 'H',
+      'aria-label': 'Hue',
       value: input[0] ?? '',
       onChange: (event) => {
         setInput([event.target.value, input[1], input[2], input[3]]);
@@ -195,6 +197,7 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
       max: '100',
       step: '.1',
       placeholder: 'S',
+      'aria-label': 'Saturation',
       value: input[1] ?? '',
       onChange: (event) => {
         setInput([input[0], event.target.value, input[2], input[3]]);
@@ -221,6 +224,7 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
       max: '100',
       step: '.1',
       placeholder: 'L',
+      'aria-label': 'Lightness',
       value: input[2] ?? '',
       onChange: (event) => {
         setInput([input[0], input[1], event.target.value, input[3]]);
@@ -248,6 +252,7 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
         max: '1',
         step: '.01',
         placeholder: 'A',
+        'aria-label': 'Alpha',
         value: input[3] ?? '',
         onChange: (event) => {
           setInput([input[0], input[1], input[2], event.target.value]);
@@ -277,6 +282,7 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
       min: '0',
       max: '255',
       placeholder: 'R',
+      'aria-label': 'Red',
       value: input[0] ?? '',
       onChange: (event) => {
         setInput([event.target.value, input[1], input[2], input[3]]);
@@ -302,6 +308,7 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
       min: '0',
       max: '255',
       placeholder: 'G',
+      'aria-label': 'Green',
       value: input[1] ?? '',
       onChange: (event) => {
         setInput([input[0], event.target.value, input[2], input[3]]);
@@ -327,6 +334,7 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
       min: '0',
       max: '255',
       placeholder: 'B',
+      'aria-label': 'Blue',
       value: input[2] ?? '',
       onChange: (event) => {
         setInput([input[0], input[1], event.target.value, input[3]]);
@@ -354,6 +362,7 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
         max: '1',
         step: '.01',
         placeholder: 'A',
+        'aria-label': 'Alpha',
         value: input[3] ?? '',
         onChange: (event) => {
           setInput([input[0], input[1], input[2], event.target.value]);
@@ -374,13 +383,14 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
           Number(input[3]) < 0 || Number(input[3]) > 1 ? 'negative' : undefined,
       }),
   );
+  const labelId = useId();
   return React.createElement(
     Box,
     { className: cx('iui-color-input-wrapper', className), ref: ref, ...rest },
     React.createElement(
       Box,
-      { className: 'iui-color-picker-section-label' },
-      showAlpha && currentFormat != 'hex'
+      { className: 'iui-color-picker-section-label', id: labelId },
+      showAlpha && currentFormat !== 'hex'
         ? currentFormat.toUpperCase() + 'A'
         : currentFormat.toUpperCase(),
     ),
@@ -390,12 +400,22 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
       allowedColorFormats.length > 1 &&
         React.createElement(
           IconButton,
-          { styleType: 'borderless', onClick: swapColorFormat, size: 'small' },
+          {
+            styleType: 'borderless',
+            onClick: swapColorFormat,
+            size: 'small',
+            label: 'Switch format',
+          },
           React.createElement(SvgSwap, null),
         ),
       React.createElement(
         Box,
-        { ref: inputsContainerRef, className: 'iui-color-input-fields' },
+        {
+          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,