From e66e04dd8fbd160d6d124394e38c34a60de2b464 Mon Sep 17 00:00:00 2001
From: Mayank <9084735+mayank99@users.noreply.github.com>
Date: Mon, 12 Feb 2024 19:09:59 -0500
Subject: [PATCH 01/14] expose `Skeleton` publicly

---
 .changeset/empty-laws-chew.md                 |  5 ++
 .../src/core/Typography/Skeleton.test.tsx     | 14 +++++
 .../src/core/Typography/Skeleton.tsx          | 62 +++++++++++++++++++
 .../src/core/Typography/Text.tsx              |  2 +
 packages/itwinui-react/src/index.ts           |  2 +
 5 files changed, 85 insertions(+)
 create mode 100644 .changeset/empty-laws-chew.md
 create mode 100644 packages/itwinui-react/src/core/Typography/Skeleton.test.tsx
 create mode 100644 packages/itwinui-react/src/core/Typography/Skeleton.tsx

diff --git a/.changeset/empty-laws-chew.md b/.changeset/empty-laws-chew.md
new file mode 100644
index 00000000000..b51c30b08ea
--- /dev/null
+++ b/.changeset/empty-laws-chew.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': minor
+---
+
+Added a new `Skeleton` component.
diff --git a/packages/itwinui-react/src/core/Typography/Skeleton.test.tsx b/packages/itwinui-react/src/core/Typography/Skeleton.test.tsx
new file mode 100644
index 00000000000..443a3be93e4
--- /dev/null
+++ b/packages/itwinui-react/src/core/Typography/Skeleton.test.tsx
@@ -0,0 +1,14 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { render } from '@testing-library/react';
+
+import { Skeleton } from './Skeleton.js';
+
+it('should work', () => {
+  const { container } = render(<Skeleton />);
+  const skeleton = container.querySelector('div') as HTMLElement;
+  expect(skeleton).toHaveClass('iui-skeleton');
+});
diff --git a/packages/itwinui-react/src/core/Typography/Skeleton.tsx b/packages/itwinui-react/src/core/Typography/Skeleton.tsx
new file mode 100644
index 00000000000..237d3a47b3f
--- /dev/null
+++ b/packages/itwinui-react/src/core/Typography/Skeleton.tsx
@@ -0,0 +1,62 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import cx from 'classnames';
+import { Box, ShadowRoot } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
+
+// ----------------------------------------------------------------------------
+
+const SkeletonContext = React.createContext<boolean | undefined>(undefined);
+
+// ----------------------------------------------------------------------------
+
+const SkeletonComponent = React.forwardRef((props, forwardedRef) => {
+  const isGrouped = React.useContext(SkeletonContext);
+
+  return (
+    <Box
+      as='div'
+      ref={forwardedRef}
+      {...props}
+      className={cx('iui-skeleton', props?.className)}
+    >
+      <ShadowRoot>
+        <div aria-hidden {...{ inert: '' }}>
+          <slot />
+        </div>
+        <slot name='visually-hidden' />
+      </ShadowRoot>
+
+      {props.children}
+      {!isGrouped && (
+        <VisuallyHidden slot='visually-hidden'>Loading</VisuallyHidden>
+      )}
+    </Box>
+  );
+}) as PolymorphicForwardRefComponent<'div'>;
+
+// ----------------------------------------------------------------------------
+
+const SkeletonGroup = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <SkeletonContext.Provider value={true}>
+      {children}
+      <VisuallyHidden>Loading</VisuallyHidden>
+    </SkeletonContext.Provider>
+  );
+};
+SkeletonGroup.displayName = 'Skeleton.Group';
+
+// ----------------------------------------------------------------------------
+
+/**
+ * A placeholder displayed while the content is loading.
+ */
+export const Skeleton = Object.assign(SkeletonComponent, {
+  Group: SkeletonGroup,
+});
+Skeleton.displayName = 'Skeleton';
diff --git a/packages/itwinui-react/src/core/Typography/Text.tsx b/packages/itwinui-react/src/core/Typography/Text.tsx
index b9afea697af..c6fa78d2f55 100644
--- a/packages/itwinui-react/src/core/Typography/Text.tsx
+++ b/packages/itwinui-react/src/core/Typography/Text.tsx
@@ -29,6 +29,8 @@ type TextProps = {
   /**
    * Use it if you are still loading the content.
    * @default false
+   *
+   * @deprecated Use the `Skeleton` component instead
    */
   isSkeleton?: boolean;
 };
diff --git a/packages/itwinui-react/src/index.ts b/packages/itwinui-react/src/index.ts
index c69cdc3bc16..33d7a862583 100644
--- a/packages/itwinui-react/src/index.ts
+++ b/packages/itwinui-react/src/index.ts
@@ -213,3 +213,5 @@ export { Flex } from './core/Flex/Flex.js';
 export { Popover } from './core/Popover/Popover.js';
 
 export { Divider } from './core/Divider/Divider.js';
+
+export { Skeleton } from './core/Typography/Skeleton.js';

From 97ec76bea13ca1d8f0da3a44584bda0fa1d0627d Mon Sep 17 00:00:00 2001
From: Mayank <9084735+mayank99@users.noreply.github.com>
Date: Thu, 15 Feb 2024 10:50:26 -0500
Subject: [PATCH 02/14] remove SkeletonGroup

---
 .../src/core/Typography/Skeleton.tsx          | 37 +++----------------
 1 file changed, 5 insertions(+), 32 deletions(-)

diff --git a/packages/itwinui-react/src/core/Typography/Skeleton.tsx b/packages/itwinui-react/src/core/Typography/Skeleton.tsx
index 237d3a47b3f..82ae4dac518 100644
--- a/packages/itwinui-react/src/core/Typography/Skeleton.tsx
+++ b/packages/itwinui-react/src/core/Typography/Skeleton.tsx
@@ -10,13 +10,10 @@ import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 
 // ----------------------------------------------------------------------------
 
-const SkeletonContext = React.createContext<boolean | undefined>(undefined);
-
-// ----------------------------------------------------------------------------
-
-const SkeletonComponent = React.forwardRef((props, forwardedRef) => {
-  const isGrouped = React.useContext(SkeletonContext);
-
+/**
+ * A placeholder to be displayed while the content is loading.
+ */
+export const SkeletonComponent = React.forwardRef((props, forwardedRef) => {
   return (
     <Box
       as='div'
@@ -32,31 +29,7 @@ const SkeletonComponent = React.forwardRef((props, forwardedRef) => {
       </ShadowRoot>
 
       {props.children}
-      {!isGrouped && (
-        <VisuallyHidden slot='visually-hidden'>Loading</VisuallyHidden>
-      )}
+      <VisuallyHidden slot='visually-hidden'>Loading</VisuallyHidden>
     </Box>
   );
 }) as PolymorphicForwardRefComponent<'div'>;
-
-// ----------------------------------------------------------------------------
-
-const SkeletonGroup = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <SkeletonContext.Provider value={true}>
-      {children}
-      <VisuallyHidden>Loading</VisuallyHidden>
-    </SkeletonContext.Provider>
-  );
-};
-SkeletonGroup.displayName = 'Skeleton.Group';
-
-// ----------------------------------------------------------------------------
-
-/**
- * A placeholder displayed while the content is loading.
- */
-export const Skeleton = Object.assign(SkeletonComponent, {
-  Group: SkeletonGroup,
-});
-Skeleton.displayName = 'Skeleton';

From 655aaf38be0763b468ecc2a41308c184c60aa4eb Mon Sep 17 00:00:00 2001
From: Mayank <9084735+mayank99@users.noreply.github.com>
Date: Thu, 15 Feb 2024 11:34:55 -0500
Subject: [PATCH 03/14] add `css` prop to `ShadowRoot`

---
 .../src/core/utils/components/ShadowRoot.tsx  | 42 ++++++++++++++-----
 1 file changed, 32 insertions(+), 10 deletions(-)

diff --git a/packages/itwinui-react/src/core/utils/components/ShadowRoot.tsx b/packages/itwinui-react/src/core/utils/components/ShadowRoot.tsx
index f4ac9e76e81..8d6e07ebb88 100644
--- a/packages/itwinui-react/src/core/utils/components/ShadowRoot.tsx
+++ b/packages/itwinui-react/src/core/utils/components/ShadowRoot.tsx
@@ -8,6 +8,8 @@ import * as ReactDOM from 'react-dom';
 const isBrowser = typeof document !== 'undefined';
 const supportsDSD =
   isBrowser && 'shadowRootMode' in HTMLTemplateElement.prototype;
+const supportsAdoptedStylesheets =
+  isBrowser && 'adoptedStyleSheets' in Document.prototype;
 
 /**
  * Wrapper around `<template>` element that attaches shadow root to its parent
@@ -15,9 +17,16 @@ const supportsDSD =
  *
  * @private
  */
-export const ShadowRoot = ({ children }: { children: React.ReactNode }) => {
+export const ShadowRoot = ({
+  children,
+  css,
+}: {
+  children: React.ReactNode;
+  css?: string;
+}) => {
   const [shadowRoot, setShadowRoot] = React.useState<ShadowRoot>();
   const isFirstRender = useIsFirstRender();
+  const styleSheet = React.useRef<CSSStyleSheet>();
 
   const attachShadowRef = React.useCallback(
     (template: HTMLTemplateElement | null) => {
@@ -25,19 +34,32 @@ export const ShadowRoot = ({ children }: { children: React.ReactNode }) => {
       if (!template || !parent) {
         return;
       }
-      queueMicrotask(() =>
-        ReactDOM.flushSync(() =>
-          setShadowRoot(
-            parent.shadowRoot || parent.attachShadow({ mode: 'open' }),
-          ),
-        ),
-      );
+      if (parent.shadowRoot) {
+        parent.shadowRoot.replaceChildren(); // Remove previous shadowroot content
+      }
+      queueMicrotask(() => {
+        const shadow =
+          parent.shadowRoot || parent.attachShadow({ mode: 'open' });
+
+        if (css && supportsAdoptedStylesheets) {
+          styleSheet.current ||= new CSSStyleSheet();
+          styleSheet.current.replaceSync(css);
+          shadow.adoptedStyleSheets = [styleSheet.current];
+        }
+
+        ReactDOM.flushSync(() => setShadowRoot(shadow));
+      });
     },
-    [],
+    [css],
   );
 
   if (!isBrowser) {
-    return <template {...{ shadowrootmode: 'open' }}>{children}</template>;
+    return (
+      <template {...{ shadowrootmode: 'open' }}>
+        {css && <style>{css}</style>}
+        {children}
+      </template>
+    );
   }
 
   // In browsers that support DSD, the template will be automatically removed as soon as it's parsed.

From 341c8a152b20f613b668ab44def6b45b0bd62ffb Mon Sep 17 00:00:00 2001
From: Mayank <9084735+mayank99@users.noreply.github.com>
Date: Thu, 15 Feb 2024 12:12:41 -0500
Subject: [PATCH 04/14] support `VisuallyHidden` inside shadow DOM

---
 .../VisuallyHidden/VisuallyHidden.test.tsx    | 13 ++++++-
 .../core/VisuallyHidden/VisuallyHidden.tsx    | 35 ++++++++++++++++---
 2 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/packages/itwinui-react/src/core/VisuallyHidden/VisuallyHidden.test.tsx b/packages/itwinui-react/src/core/VisuallyHidden/VisuallyHidden.test.tsx
index ed25795ac7b..c6fc57e7999 100644
--- a/packages/itwinui-react/src/core/VisuallyHidden/VisuallyHidden.test.tsx
+++ b/packages/itwinui-react/src/core/VisuallyHidden/VisuallyHidden.test.tsx
@@ -3,14 +3,20 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { act, render } from '@testing-library/react';
 import { VisuallyHidden } from './VisuallyHidden.js';
 
 it('should render in its most basic state', () => {
+  vi.useFakeTimers({ toFake: ['queueMicrotask'] });
+
   const { container } = render(<VisuallyHidden>hi</VisuallyHidden>);
+  act(() => vi.runAllTicks());
+
   const visuallyHidden = container.querySelector('span') as HTMLElement;
   expect(visuallyHidden).toHaveClass('iui-visually-hidden');
   expect(visuallyHidden).toHaveAttribute('data-iui-unhide-on-focus');
+
+  expect(visuallyHidden.shadowRoot?.querySelector('slot')).toBeTruthy();
 });
 
 it('should support polymorphic `as` prop', () => {
@@ -26,3 +32,8 @@ it('should respect unhideOnFocus prop', () => {
     'data-iui-unhide-on-focus',
   );
 });
+
+it('should work with elements that do not support attaching shadow roots', () => {
+  const { container } = render(<VisuallyHidden as='label'>hi</VisuallyHidden>);
+  expect(container.querySelector('label')).toHaveClass('iui-visually-hidden');
+});
diff --git a/packages/itwinui-react/src/core/VisuallyHidden/VisuallyHidden.tsx b/packages/itwinui-react/src/core/VisuallyHidden/VisuallyHidden.tsx
index 3e8f449332a..2189fdf0f90 100644
--- a/packages/itwinui-react/src/core/VisuallyHidden/VisuallyHidden.tsx
+++ b/packages/itwinui-react/src/core/VisuallyHidden/VisuallyHidden.tsx
@@ -5,7 +5,7 @@
 import * as React from 'react';
 import cx from 'classnames';
 import type { PolymorphicForwardRefComponent } from '../utils/props.js';
-import { Box } from '../utils/components/Box.js';
+import { Box, ShadowRoot } from '../utils/index.js';
 
 type VisuallyHiddenOwnProps = {
   /**
@@ -28,15 +28,42 @@ type VisuallyHiddenOwnProps = {
  * @see https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
  */
 export const VisuallyHidden = React.forwardRef((props, ref) => {
-  const { className, unhideOnFocus = true, ...rest } = props;
+  const {
+    as: asProp = 'span',
+    className,
+    unhideOnFocus = true,
+    children,
+    ...rest
+  } = props;
 
   return (
     <Box
-      as='span'
+      as={asProp}
       className={cx('iui-visually-hidden', className)}
       data-iui-unhide-on-focus={unhideOnFocus ? true : undefined}
       ref={ref}
       {...rest}
-    />
+    >
+      {['div', 'span'].includes(asProp) && ( // ShadowRoot is not supported on all elements
+        <ShadowRoot css={css}>
+          <slot />
+        </ShadowRoot>
+      )}
+
+      {children}
+    </Box>
   );
 }) as PolymorphicForwardRefComponent<'span', VisuallyHiddenOwnProps>;
+
+// ----------------------------------------------------------------------------
+
+const css = /* css */ `
+  :host(:where(:not([data-iui-unhide-on-focus]:is(:focus-within, :active)))) {
+    clip-path: inset(50%) !important;
+    overflow: hidden !important;
+    position: absolute !important;
+    white-space: nowrap !important;
+    block-size: 1px !important;
+    inline-size: 1px !important;
+  }
+`;

From 4e2d9c0f48a8ceb488d1fb42dcf83047ad5a9432 Mon Sep 17 00:00:00 2001
From: Mayank <9084735+mayank99@users.noreply.github.com>
Date: Thu, 15 Feb 2024 12:41:48 -0500
Subject: [PATCH 05/14] add visually hidden "Loading" text to progress
 indicators

---
 .../src/core/ProgressIndicators/ProgressLinear.tsx        | 8 +++++++-
 .../src/core/ProgressIndicators/ProgressRadial.tsx        | 7 +++++++
 .../src/core/VisuallyHidden/VisuallyHidden.tsx            | 2 +-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/itwinui-react/src/core/ProgressIndicators/ProgressLinear.tsx b/packages/itwinui-react/src/core/ProgressIndicators/ProgressLinear.tsx
index f02dc55c70a..6899d3b5b3d 100644
--- a/packages/itwinui-react/src/core/ProgressIndicators/ProgressLinear.tsx
+++ b/packages/itwinui-react/src/core/ProgressIndicators/ProgressLinear.tsx
@@ -4,8 +4,9 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Box, getBoundedValue } from '../utils/index.js';
+import { Box, ShadowRoot, getBoundedValue } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 
 type ProgressLinearProps = {
   /**
@@ -88,6 +89,11 @@ export const ProgressLinear = React.forwardRef((props, forwardedRef) => {
       }
       {...rest}
     >
+      <ShadowRoot>
+        <VisuallyHidden>Loading.</VisuallyHidden>
+        <slot />
+      </ShadowRoot>
+
       {labels.length > 0 && (
         <Box
           as='div'
diff --git a/packages/itwinui-react/src/core/ProgressIndicators/ProgressRadial.tsx b/packages/itwinui-react/src/core/ProgressIndicators/ProgressRadial.tsx
index 58be2acafd8..af1bae2889d 100644
--- a/packages/itwinui-react/src/core/ProgressIndicators/ProgressRadial.tsx
+++ b/packages/itwinui-react/src/core/ProgressIndicators/ProgressRadial.tsx
@@ -9,8 +9,10 @@ import {
   SvgImportantSmall,
   Box,
   getBoundedValue,
+  ShadowRoot,
 } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 
 type ProgressRadialProps = {
   /**
@@ -87,6 +89,11 @@ export const ProgressRadial = React.forwardRef((props, forwardedRef) => {
       }}
       {...rest}
     >
+      <ShadowRoot>
+        <VisuallyHidden>Loading.</VisuallyHidden>
+        <slot />
+      </ShadowRoot>
+
       {size !== 'x-small'
         ? children ?? (!!status ? statusMap[status] : null)
         : null}
diff --git a/packages/itwinui-react/src/core/VisuallyHidden/VisuallyHidden.tsx b/packages/itwinui-react/src/core/VisuallyHidden/VisuallyHidden.tsx
index 2189fdf0f90..0324385ffbb 100644
--- a/packages/itwinui-react/src/core/VisuallyHidden/VisuallyHidden.tsx
+++ b/packages/itwinui-react/src/core/VisuallyHidden/VisuallyHidden.tsx
@@ -44,7 +44,7 @@ export const VisuallyHidden = React.forwardRef((props, ref) => {
       ref={ref}
       {...rest}
     >
-      {['div', 'span'].includes(asProp) && ( // ShadowRoot is not supported on all elements
+      {['div', 'span', 'p'].includes(asProp) && ( // ShadowRoot is not supported on all elements
         <ShadowRoot css={css}>
           <slot />
         </ShadowRoot>

From 2feea8f59d8b5bd1e6e82ecdaae278fb4e479ae7 Mon Sep 17 00:00:00 2001
From: Mayank <9084735+mayank99@users.noreply.github.com>
Date: Thu, 15 Feb 2024 12:42:51 -0500
Subject: [PATCH 06/14] changeset

---
 .changeset/sour-bears-applaud.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/sour-bears-applaud.md

diff --git a/.changeset/sour-bears-applaud.md b/.changeset/sour-bears-applaud.md
new file mode 100644
index 00000000000..a155168157d
--- /dev/null
+++ b/.changeset/sour-bears-applaud.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': minor
+---
+
+`ProgressRadial` and `ProgressLinear` will now include a visually hidden "Loading" text alternative for non-sighted users.

From b88ecee4522b82a44aa8768c3ef6f2589742183e Mon Sep 17 00:00:00 2001
From: Mayank <9084735+mayank99@users.noreply.github.com>
Date: Thu, 15 Feb 2024 13:10:05 -0500
Subject: [PATCH 07/14] fix `<VisuallyHidden as='input'>`

---
 .../VisuallyHidden/VisuallyHidden.test.tsx    |  9 +++++++++
 .../core/VisuallyHidden/VisuallyHidden.tsx    | 20 ++++++++++++-------
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/packages/itwinui-react/src/core/VisuallyHidden/VisuallyHidden.test.tsx b/packages/itwinui-react/src/core/VisuallyHidden/VisuallyHidden.test.tsx
index c6fc57e7999..cc1e10709e7 100644
--- a/packages/itwinui-react/src/core/VisuallyHidden/VisuallyHidden.test.tsx
+++ b/packages/itwinui-react/src/core/VisuallyHidden/VisuallyHidden.test.tsx
@@ -34,6 +34,15 @@ it('should respect unhideOnFocus prop', () => {
 });
 
 it('should work with elements that do not support attaching shadow roots', () => {
+  vi.useFakeTimers({ toFake: ['queueMicrotask'] });
   const { container } = render(<VisuallyHidden as='label'>hi</VisuallyHidden>);
+  act(() => vi.runAllTicks());
   expect(container.querySelector('label')).toHaveClass('iui-visually-hidden');
 });
+
+it('should work with self-closing elements', () => {
+  vi.useFakeTimers({ toFake: ['queueMicrotask'] });
+  const { container } = render(<VisuallyHidden as='input' />);
+  act(() => vi.runAllTicks());
+  expect(container.querySelector('input')).toHaveClass('iui-visually-hidden');
+});
diff --git a/packages/itwinui-react/src/core/VisuallyHidden/VisuallyHidden.tsx b/packages/itwinui-react/src/core/VisuallyHidden/VisuallyHidden.tsx
index 0324385ffbb..7e173033b3c 100644
--- a/packages/itwinui-react/src/core/VisuallyHidden/VisuallyHidden.tsx
+++ b/packages/itwinui-react/src/core/VisuallyHidden/VisuallyHidden.tsx
@@ -32,10 +32,22 @@ export const VisuallyHidden = React.forwardRef((props, ref) => {
     as: asProp = 'span',
     className,
     unhideOnFocus = true,
-    children,
+    children: childrenProp,
     ...rest
   } = props;
 
+  // ShadowRoot is not supported on all elements, so we only use it for few common ones.
+  const children = !['div', 'span', 'p'].includes(asProp) ? (
+    childrenProp
+  ) : (
+    <>
+      <ShadowRoot css={css}>
+        <slot />
+      </ShadowRoot>
+      {childrenProp}
+    </>
+  );
+
   return (
     <Box
       as={asProp}
@@ -44,12 +56,6 @@ export const VisuallyHidden = React.forwardRef((props, ref) => {
       ref={ref}
       {...rest}
     >
-      {['div', 'span', 'p'].includes(asProp) && ( // ShadowRoot is not supported on all elements
-        <ShadowRoot css={css}>
-          <slot />
-        </ShadowRoot>
-      )}
-
       {children}
     </Box>
   );

From a37b2b63e4795ee928faf5b67fa92eecd5c954b7 Mon Sep 17 00:00:00 2001
From: Mayank <9084735+mayank99@users.noreply.github.com>
Date: Thu, 15 Feb 2024 13:43:05 -0500
Subject: [PATCH 08/14] fix failing tests

---
 packages/itwinui-react/src/core/ComboBox/ComboBox.test.tsx | 2 +-
 packages/itwinui-react/src/core/Select/Select.test.tsx     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/itwinui-react/src/core/ComboBox/ComboBox.test.tsx b/packages/itwinui-react/src/core/ComboBox/ComboBox.test.tsx
index 7ffd974fb8b..167183f537a 100644
--- a/packages/itwinui-react/src/core/ComboBox/ComboBox.test.tsx
+++ b/packages/itwinui-react/src/core/ComboBox/ComboBox.test.tsx
@@ -1015,7 +1015,7 @@ it('should update live region when selection changes', async () => {
   );
 
   const liveRegion = container.querySelector('[aria-live="polite"]');
-  expect(liveRegion).toBeEmptyDOMElement();
+  expect(liveRegion).toHaveTextContent('');
 
   await userEvent.tab();
   const options = document.querySelectorAll('[role="option"]');
diff --git a/packages/itwinui-react/src/core/Select/Select.test.tsx b/packages/itwinui-react/src/core/Select/Select.test.tsx
index d323b1519bd..520623262d6 100644
--- a/packages/itwinui-react/src/core/Select/Select.test.tsx
+++ b/packages/itwinui-react/src/core/Select/Select.test.tsx
@@ -546,7 +546,7 @@ it('should update live region when selection changes', async () => {
   const { container } = render(<MultiSelectTest />);
 
   const liveRegion = container.querySelector('[aria-live="polite"]');
-  expect(liveRegion).toBeEmptyDOMElement();
+  expect(liveRegion).toHaveTextContent('');
   const options = document.querySelectorAll('[role="option"]');
 
   await userEvent.click(options[1]);

From 262bd3a6f4e948dc51554d84932fe7d1a6514d6f Mon Sep 17 00:00:00 2001
From: Mayank <9084735+mayank99@users.noreply.github.com>
Date: Thu, 15 Feb 2024 13:43:53 -0500
Subject: [PATCH 09/14] do not show loading text for 100%

---
 .../src/core/ProgressIndicators/ProgressLinear.tsx              | 2 +-
 .../src/core/ProgressIndicators/ProgressRadial.tsx              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/itwinui-react/src/core/ProgressIndicators/ProgressLinear.tsx b/packages/itwinui-react/src/core/ProgressIndicators/ProgressLinear.tsx
index 6899d3b5b3d..7439f00b74a 100644
--- a/packages/itwinui-react/src/core/ProgressIndicators/ProgressLinear.tsx
+++ b/packages/itwinui-react/src/core/ProgressIndicators/ProgressLinear.tsx
@@ -90,7 +90,7 @@ export const ProgressLinear = React.forwardRef((props, forwardedRef) => {
       {...rest}
     >
       <ShadowRoot>
-        <VisuallyHidden>Loading.</VisuallyHidden>
+        {value !== 100 && <VisuallyHidden>Loading.</VisuallyHidden>}
         <slot />
       </ShadowRoot>
 
diff --git a/packages/itwinui-react/src/core/ProgressIndicators/ProgressRadial.tsx b/packages/itwinui-react/src/core/ProgressIndicators/ProgressRadial.tsx
index af1bae2889d..4ecfc09f1f2 100644
--- a/packages/itwinui-react/src/core/ProgressIndicators/ProgressRadial.tsx
+++ b/packages/itwinui-react/src/core/ProgressIndicators/ProgressRadial.tsx
@@ -90,7 +90,7 @@ export const ProgressRadial = React.forwardRef((props, forwardedRef) => {
       {...rest}
     >
       <ShadowRoot>
-        <VisuallyHidden>Loading.</VisuallyHidden>
+        {value !== 100 && <VisuallyHidden>Loading.</VisuallyHidden>}
         <slot />
       </ShadowRoot>
 

From abc2929f1973a75ee34b81623cc2745dba4ac5f4 Mon Sep 17 00:00:00 2001
From: Mayank <9084735+mayank99@users.noreply.github.com>
Date: Thu, 15 Feb 2024 13:49:00 -0500
Subject: [PATCH 10/14] test

---
 .../ProgressIndicators/ProgressLinear.test.tsx | 18 +++++++++++++++++-
 .../ProgressIndicators/ProgressRadial.test.tsx | 18 +++++++++++++++++-
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/packages/itwinui-react/src/core/ProgressIndicators/ProgressLinear.test.tsx b/packages/itwinui-react/src/core/ProgressIndicators/ProgressLinear.test.tsx
index 934deffca69..14ada51055c 100644
--- a/packages/itwinui-react/src/core/ProgressIndicators/ProgressLinear.test.tsx
+++ b/packages/itwinui-react/src/core/ProgressIndicators/ProgressLinear.test.tsx
@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import { ProgressLinear } from './ProgressLinear.js';
 
 it('renders determinate ProgressLinear', () => {
@@ -102,3 +102,19 @@ it('passes custom props to ProgressLinear parts', () => {
   expect(labelGroup).toBeTruthy;
   expect(labelGroup.style.fontSize).toBe('12px');
 });
+
+it('should include visually-hidden loading message when not at 100%', () => {
+  vi.useFakeTimers({ toFake: ['queueMicrotask'] });
+
+  const { container, rerender } = render(<ProgressLinear />);
+  act(() => vi.runAllTicks());
+
+  const progress = container.querySelector('div') as HTMLElement;
+  expect(progress.shadowRoot).toHaveTextContent('Loading.');
+
+  rerender(<ProgressLinear value={50} />);
+  expect(progress.shadowRoot).toHaveTextContent('Loading.');
+
+  rerender(<ProgressLinear value={100} />);
+  expect(progress.shadowRoot).not.toHaveTextContent('Loading.');
+});
diff --git a/packages/itwinui-react/src/core/ProgressIndicators/ProgressRadial.test.tsx b/packages/itwinui-react/src/core/ProgressIndicators/ProgressRadial.test.tsx
index c913d76497c..428704da49f 100644
--- a/packages/itwinui-react/src/core/ProgressIndicators/ProgressRadial.test.tsx
+++ b/packages/itwinui-react/src/core/ProgressIndicators/ProgressRadial.test.tsx
@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { act, render } from '@testing-library/react';
 
 import { ProgressRadial } from './ProgressRadial.js';
 
@@ -59,3 +59,19 @@ it.each(['small', 'x-small', 'large'] as const)(
     expect(spinner).toHaveAttribute('data-iui-size', size);
   },
 );
+
+it('should include visually-hidden loading message when not at 100%', () => {
+  vi.useFakeTimers({ toFake: ['queueMicrotask'] });
+
+  const { container, rerender } = render(<ProgressRadial />);
+  act(() => vi.runAllTicks());
+
+  const progress = container.querySelector('div') as HTMLElement;
+  expect(progress.shadowRoot).toHaveTextContent('Loading.');
+
+  rerender(<ProgressRadial value={50} />);
+  expect(progress.shadowRoot).toHaveTextContent('Loading.');
+
+  rerender(<ProgressRadial value={100} />);
+  expect(progress.shadowRoot).not.toHaveTextContent('Loading.');
+});

From 7898b6cb64eb212f5e6eb126edfc50604408332d Mon Sep 17 00:00:00 2001
From: Mayank <9084735+mayank99@users.noreply.github.com>
Date: Thu, 15 Feb 2024 14:05:30 -0500
Subject: [PATCH 11/14] docs

---
 apps/website/src/content/docs/progressindicator.mdx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/apps/website/src/content/docs/progressindicator.mdx b/apps/website/src/content/docs/progressindicator.mdx
index 8391270a0ee..4791f472056 100644
--- a/apps/website/src/content/docs/progressindicator.mdx
+++ b/apps/website/src/content/docs/progressindicator.mdx
@@ -26,6 +26,12 @@ thumbnail: ProgressIndicator
   <AllExamples.ProgressRadialMainExample client:load />
 </LiveExample>
 
+## Accessibility
+
+To make the progress indicator accessible to non-sighted users, a visually-hidden "Loading" message will be automatically included when the `value` is not set to 100%.
+
+To further improve the experience, applications should have a mechanism to inform users once the loading process is complete. Depending on the criticality of the content and how long it takes to load, the progress completion can be indicated using a [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions), or by programmatically moving focus to the top of the new content.
+
 ### Props
 
 <PropsTable path={frontmatter.propsPath2} />

From 2e22cb5e4279fc05555be1454eb2eb733519a293 Mon Sep 17 00:00:00 2001
From: Mayank <9084735+mayank99@users.noreply.github.com>
Date: Thu, 15 Feb 2024 17:55:50 -0500
Subject: [PATCH 12/14] remove visually-hidden slot

---
 packages/itwinui-react/src/core/Typography/Skeleton.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/itwinui-react/src/core/Typography/Skeleton.tsx b/packages/itwinui-react/src/core/Typography/Skeleton.tsx
index 82ae4dac518..f5268442699 100644
--- a/packages/itwinui-react/src/core/Typography/Skeleton.tsx
+++ b/packages/itwinui-react/src/core/Typography/Skeleton.tsx
@@ -8,8 +8,6 @@ import { Box, ShadowRoot } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 
-// ----------------------------------------------------------------------------
-
 /**
  * A placeholder to be displayed while the content is loading.
  */
@@ -25,11 +23,10 @@ export const SkeletonComponent = React.forwardRef((props, forwardedRef) => {
         <div aria-hidden {...{ inert: '' }}>
           <slot />
         </div>
-        <slot name='visually-hidden' />
+        <VisuallyHidden>Loading.</VisuallyHidden>
       </ShadowRoot>
 
       {props.children}
-      <VisuallyHidden slot='visually-hidden'>Loading</VisuallyHidden>
     </Box>
   );
 }) as PolymorphicForwardRefComponent<'div'>;

From 22961bb18c6c7b9a7431ca8fea540e3f21364153 Mon Sep 17 00:00:00 2001
From: Mayank <9084735+mayank99@users.noreply.github.com>
Date: Thu, 15 Feb 2024 17:56:01 -0500
Subject: [PATCH 13/14] fix name

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

diff --git a/packages/itwinui-react/src/core/Typography/Skeleton.tsx b/packages/itwinui-react/src/core/Typography/Skeleton.tsx
index f5268442699..a6925872883 100644
--- a/packages/itwinui-react/src/core/Typography/Skeleton.tsx
+++ b/packages/itwinui-react/src/core/Typography/Skeleton.tsx
@@ -11,7 +11,7 @@ import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 /**
  * A placeholder to be displayed while the content is loading.
  */
-export const SkeletonComponent = React.forwardRef((props, forwardedRef) => {
+export const Skeleton = React.forwardRef((props, forwardedRef) => {
   return (
     <Box
       as='div'

From b5c47db50829d325a95df590c6672f4a10f16d51 Mon Sep 17 00:00:00 2001
From: Mayank <9084735+mayank99@users.noreply.github.com>
Date: Thu, 15 Feb 2024 18:04:53 -0500
Subject: [PATCH 14/14] fix css

---
 .changeset/afraid-singers-kick.md           | 5 +++++
 packages/itwinui-css/src/text/skeleton.scss | 6 +++++-
 2 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/afraid-singers-kick.md

diff --git a/.changeset/afraid-singers-kick.md b/.changeset/afraid-singers-kick.md
new file mode 100644
index 00000000000..18b3796f156
--- /dev/null
+++ b/.changeset/afraid-singers-kick.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-css': minor
+---
+
+Added support for `<div class="iui-skeleton"></div>` to be used without the `iui-text-block` class.
diff --git a/packages/itwinui-css/src/text/skeleton.scss b/packages/itwinui-css/src/text/skeleton.scss
index 3ab8e1d182e..482d1f2ddd5 100644
--- a/packages/itwinui-css/src/text/skeleton.scss
+++ b/packages/itwinui-css/src/text/skeleton.scss
@@ -2,7 +2,9 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 
 @mixin iui-text-skeleton {
-  display: inline-block;
+  &.iui-text-block {
+    display: inline-block;
+  }
   user-select: none;
   color: transparent;
   border-radius: var(--iui-border-radius-1);
@@ -16,6 +18,8 @@
     var(--iui-color-icon-muted)
   );
   background-size: 200% 100%;
+  min-block-size: 1em;
+  min-block-size: 1lh;
 
   @media (forced-colors: active) {
     forced-color-adjust: none;