From 7285b0b7e2182573601d6993ef23d0112fd03e26 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Thu, 8 Dec 2022 14:17:31 -0500
Subject: [PATCH 1/9] wip progress state

---
 .../components/Dropdown/DropdownToggleCheckbox.tsx    |  8 +++++++-
 .../src/components/Dropdown/examples/Dropdown.md      | 11 +++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/react-core/src/components/Dropdown/DropdownToggleCheckbox.tsx b/packages/react-core/src/components/Dropdown/DropdownToggleCheckbox.tsx
index e5d97184d5a..5d755055d85 100644
--- a/packages/react-core/src/components/Dropdown/DropdownToggleCheckbox.tsx
+++ b/packages/react-core/src/components/Dropdown/DropdownToggleCheckbox.tsx
@@ -15,6 +15,8 @@ export interface DropdownToggleCheckboxProps
   isDisabled?: boolean;
   /** Flag to show if the checkbox is checked */
   isChecked?: boolean | null;
+  /** Flag to show if the checkbox is in progress */
+  isInProgress?: boolean | null;
   /** Alternate Flag to show if the checkbox is checked */
   checked?: boolean | null;
   /** A callback for when the checkbox selection changes */
@@ -68,6 +70,7 @@ export class DropdownToggleCheckbox extends React.Component<DropdownToggleCheckb
       isValid,
       isDisabled,
       isChecked,
+      isInProgress,
       children,
       ouiaId,
       ouiaSafe,
@@ -83,7 +86,10 @@ export class DropdownToggleCheckbox extends React.Component<DropdownToggleCheckb
       </span>
     );
     return (
-      <label className={css(styles.dropdownToggleCheck, className)} htmlFor={props.id}>
+      <label
+        className={css(styles.dropdownToggleCheck, isInProgress && styles.modifiers.inProgress, className)}
+        htmlFor={props.id}
+      >
         <input
           {...props}
           {...(this.calculateChecked() !== undefined && { onChange: this.handleChange })}
diff --git a/packages/react-core/src/components/Dropdown/examples/Dropdown.md b/packages/react-core/src/components/Dropdown/examples/Dropdown.md
index 9baf9412ef7..39da9d49d2d 100644
--- a/packages/react-core/src/components/Dropdown/examples/Dropdown.md
+++ b/packages/react-core/src/components/Dropdown/examples/Dropdown.md
@@ -116,7 +116,7 @@ You may use a `<BadgeToggle>` to display the number of dropdown menu items.
 ```ts file="./DropdownBadge.tsx"
 ```
 
-### Split button
+### Split button (checkbox)
 
 To combine an action button or other control with a dropdown menu, use a split button. A `<DropdownToggle>` can be rendered as a split button by using the `splitButtonItems` property. Elements to be displayed before the toggle button must be included in `splitButtonItems`.
 
@@ -125,13 +125,20 @@ The following example shows a split button with a `<DropdownToggleCheckbox>`, wh
 ```ts file="./DropdownSplitButton.tsx"
 ```
 
-### Split button text label
+### Split button (checkbox with toggle text)
 
 Text labels may optionally be used alongside actions within split buttons.
 
 ```ts file="./DropdownSplitButtonText.tsx"
 ```
 
+### Split button (progress checkbox)
+
+Text labels may optionally be used alongside actions within split buttons.
+
+```ts isBeta file="./DropdownSplitButtonProgressCheckbox.tsx"
+```
+
 ### Split button toggle variants
 
 Use the `toggleVariant` and `splitButtonVariant` properties to adjust the styling of split button toggles. 

From 74ac50e9ad27abdd56c3ca41595744d9c6b711af Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Thu, 8 Dec 2022 16:48:05 -0500
Subject: [PATCH 2/9] feat(Dropdown): support inProgress variation

---
 .../Dropdown/DropdownToggleCheckbox.tsx       |  10 +-
 .../components/Dropdown/examples/Dropdown.md  |   2 +-
 .../DropdownSplitButtonProgressCheckbox.tsx   | 122 ++++++++++++++++++
 3 files changed, 132 insertions(+), 2 deletions(-)
 create mode 100644 packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx

diff --git a/packages/react-core/src/components/Dropdown/DropdownToggleCheckbox.tsx b/packages/react-core/src/components/Dropdown/DropdownToggleCheckbox.tsx
index 5d755055d85..5bd5019b0a1 100644
--- a/packages/react-core/src/components/Dropdown/DropdownToggleCheckbox.tsx
+++ b/packages/react-core/src/components/Dropdown/DropdownToggleCheckbox.tsx
@@ -3,6 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
 import { css } from '@patternfly/react-styles';
 import { PickOptional } from '../../helpers/typeUtils';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
+import { Spinner } from '../Spinner';
 
 export interface DropdownToggleCheckboxProps
   extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'checked'>,
@@ -27,6 +28,8 @@ export interface DropdownToggleCheckboxProps
   id: string;
   /** Aria-label of the checkbox */
   'aria-label': string;
+  /** Aria-label for the default progress icon */
+  defaultProgressArialabel?: string;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -70,7 +73,8 @@ export class DropdownToggleCheckbox extends React.Component<DropdownToggleCheckb
       isValid,
       isDisabled,
       isChecked,
-      isInProgress,
+      isInProgress = false,
+      defaultProgressArialabel = 'Loading...',
       children,
       ouiaId,
       ouiaSafe,
@@ -80,6 +84,9 @@ export class DropdownToggleCheckbox extends React.Component<DropdownToggleCheckb
       /* eslint-enable @typescript-eslint/no-unused-vars */
       ...props
     } = this.props;
+
+    const spinner = <Spinner diameter="1em" isSVG aria-label={defaultProgressArialabel} />;
+
     const text = children && (
       <span className={css(styles.dropdownToggleText, className)} aria-hidden="true" id={`${props.id}-text`}>
         {children}
@@ -104,6 +111,7 @@ export class DropdownToggleCheckbox extends React.Component<DropdownToggleCheckb
             ouiaSafe
           )}
         />
+        {isInProgress && <span className={css(styles.dropdownToggleProgress, className)}>{spinner}</span>}
         {text}
       </label>
     );
diff --git a/packages/react-core/src/components/Dropdown/examples/Dropdown.md b/packages/react-core/src/components/Dropdown/examples/Dropdown.md
index 39da9d49d2d..d82912e093a 100644
--- a/packages/react-core/src/components/Dropdown/examples/Dropdown.md
+++ b/packages/react-core/src/components/Dropdown/examples/Dropdown.md
@@ -134,7 +134,7 @@ Text labels may optionally be used alongside actions within split buttons.
 
 ### Split button (progress checkbox)
 
-Text labels may optionally be used alongside actions within split buttons.
+The `isInProgress` property can be used to indicate a progress state by rendering a spinner in place of a checkbox.
 
 ```ts isBeta file="./DropdownSplitButtonProgressCheckbox.tsx"
 ```
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx
new file mode 100644
index 00000000000..c84440d7ced
--- /dev/null
+++ b/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx
@@ -0,0 +1,122 @@
+import React from 'react';
+import {
+  Dropdown,
+  DropdownToggle,
+  DropdownToggleCheckbox,
+  DropdownItem,
+  DropdownSeparator
+} from '@patternfly/react-core';
+
+export const DropdownSplitButtonProgressCheckbox: React.FunctionComponent = () => {
+  const [isOpen1, setIsOpen1] = React.useState(false);
+  const [isOpen2, setIsOpen2] = React.useState(false);
+
+  const [isChecked1, setIsChecked1] = React.useState(false);
+  const [isChecked2, setIsChecked2] = React.useState(false);
+
+  const onToggle1 = (isOpen: boolean) => {
+    setIsOpen1(isOpen);
+  };
+
+  const onToggle2 = (isOpen: boolean) => {
+    setIsOpen2(isOpen);
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById('toggle-split-button-text');
+    element.focus();
+  };
+
+  const onChange1 = (checked: boolean) => {
+    setIsChecked1(checked);
+  };
+
+  const onChange2 = (checked: boolean) => {
+    setIsChecked2(checked);
+  };
+
+  const onSelect1 = () => {
+    setIsOpen1(false);
+    onFocus();
+  };
+
+  const onSelect2 = () => {
+    setIsOpen2(false);
+    onFocus();
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled href="www.google.com">
+      Disabled link
+    </DropdownItem>,
+    <DropdownItem
+      key="disabled action"
+      isAriaDisabled
+      component="button"
+      tooltip="Tooltip for disabled item"
+      tooltipProps={{ position: 'top' }}
+    >
+      Disabled action
+    </DropdownItem>,
+    <DropdownSeparator key="separator" />,
+    <DropdownItem key="separated link">Separated link</DropdownItem>,
+    <DropdownItem key="separated action" component="button">
+      Separated action
+    </DropdownItem>
+  ];
+
+  return (
+    <>
+      <Dropdown
+        onSelect={onSelect1}
+        toggle={
+          <DropdownToggle
+            splitButtonItems={[
+              <DropdownToggleCheckbox
+                onChange={onChange1}
+                isChecked={isChecked1}
+                isInProgress={isChecked1}
+                isDisabled={isChecked1}
+                id="split-button-progress-checkbox"
+                key="split-progress-checkbox"
+                aria-label="Select all"
+              />
+            ]}
+            onToggle={onToggle1}
+            id="toggle-split-button-progress"
+          />
+        }
+        isOpen={isOpen1}
+        dropdownItems={dropdownItems}
+      />{' '}
+      <Dropdown
+        onSelect={onSelect2}
+        toggle={
+          <DropdownToggle
+            splitButtonItems={[
+              <DropdownToggleCheckbox
+                onChange={onChange2}
+                isChecked={isChecked2}
+                isInProgress={isChecked2}
+                isDisabled={isChecked2}
+                id="split-button-progress-text-checkbox"
+                key="split-progress-checkbox"
+                aria-label="Select all"
+              >
+                10 selected
+              </DropdownToggleCheckbox>
+            ]}
+            onToggle={onToggle2}
+            id="toggle-split-button-progress-text"
+          />
+        }
+        isOpen={isOpen2}
+        dropdownItems={dropdownItems}
+      />
+    </>
+  );
+};

From 122d69ffaf6dccaf0d9c927dd49a33078d775207 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Thu, 15 Dec 2022 09:33:18 -0500
Subject: [PATCH 3/9] PR feedback from Eric

---
 .../src/components/Dropdown/DropdownToggleCheckbox.tsx      | 6 +++---
 .../components/Dropdown/examples/DropdownSplitButton.tsx    | 2 +-
 .../examples/DropdownSplitButtonProgressCheckbox.tsx        | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react-core/src/components/Dropdown/DropdownToggleCheckbox.tsx b/packages/react-core/src/components/Dropdown/DropdownToggleCheckbox.tsx
index 5bd5019b0a1..8e88000af08 100644
--- a/packages/react-core/src/components/Dropdown/DropdownToggleCheckbox.tsx
+++ b/packages/react-core/src/components/Dropdown/DropdownToggleCheckbox.tsx
@@ -29,7 +29,7 @@ export interface DropdownToggleCheckboxProps
   /** Aria-label of the checkbox */
   'aria-label': string;
   /** Aria-label for the default progress icon */
-  defaultProgressArialabel?: string;
+  defaultProgressAriaLabel?: string;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -74,7 +74,7 @@ export class DropdownToggleCheckbox extends React.Component<DropdownToggleCheckb
       isDisabled,
       isChecked,
       isInProgress = false,
-      defaultProgressArialabel = 'Loading...',
+      defaultProgressAriaLabel = 'Loading...',
       children,
       ouiaId,
       ouiaSafe,
@@ -85,7 +85,7 @@ export class DropdownToggleCheckbox extends React.Component<DropdownToggleCheckb
       ...props
     } = this.props;
 
-    const spinner = <Spinner diameter="1em" isSVG aria-label={defaultProgressArialabel} />;
+    const spinner = <Spinner diameter="1em" isSVG aria-label={defaultProgressAriaLabel} />;
 
     const text = children && (
       <span className={css(styles.dropdownToggleText, className)} aria-hidden="true" id={`${props.id}-text`}>
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownSplitButton.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownSplitButton.tsx
index 99e78aeb668..a82c8c3a3f8 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownSplitButton.tsx
+++ b/packages/react-core/src/components/Dropdown/examples/DropdownSplitButton.tsx
@@ -54,7 +54,7 @@ export const DropdownSplitButton: React.FunctionComponent = () => {
       toggle={
         <DropdownToggle
           splitButtonItems={[
-            <DropdownToggleCheckbox id="split-button-checkbox" key="split-checkbox" aria-label="Select all" />
+            <DropdownToggleCheckbox id="split-button-toggle-checkbox" key="split-checkbox" aria-label="Select all" />
           ]}
           onToggle={onToggle}
           id="toggle-split-button"
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx
index c84440d7ced..9fc73db984f 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx
+++ b/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx
@@ -23,7 +23,7 @@ export const DropdownSplitButtonProgressCheckbox: React.FunctionComponent = () =
   };
 
   const onFocus = () => {
-    const element = document.getElementById('toggle-split-button-text');
+    const element = document.getElementById('toggle-split-button-progress-text');
     element.focus();
   };
 

From 8e7d5369c883dee2a011e1dca1546be74eb19c78 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Thu, 15 Dec 2022 16:14:58 -0500
Subject: [PATCH 4/9] fix a11y id issue

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

diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx
index 9fc73db984f..6a87df92b80 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx
+++ b/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx
@@ -81,7 +81,7 @@ export const DropdownSplitButtonProgressCheckbox: React.FunctionComponent = () =
                 isChecked={isChecked1}
                 isInProgress={isChecked1}
                 isDisabled={isChecked1}
-                id="split-button-progress-checkbox"
+                id="split-button-progress-toggle-checkbox"
                 key="split-progress-checkbox"
                 aria-label="Select all"
               />

From c303fde3c1e6d5a7951a509f45d960cda81601c3 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Mon, 19 Dec 2022 09:09:20 -0500
Subject: [PATCH 5/9] add logic to timeout and show checkbox again

remove comments
---
 .../examples/DropdownSplitButtonProgressCheckbox.tsx  | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx
index 6a87df92b80..ca22979435b 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx
+++ b/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx
@@ -14,6 +14,9 @@ export const DropdownSplitButtonProgressCheckbox: React.FunctionComponent = () =
   const [isChecked1, setIsChecked1] = React.useState(false);
   const [isChecked2, setIsChecked2] = React.useState(false);
 
+  const [isTimedOut1, setIsTimedOut1] = React.useState(false);
+  const [isTimedOut2, setIsTimedOut2] = React.useState(false);
+
   const onToggle1 = (isOpen: boolean) => {
     setIsOpen1(isOpen);
   };
@@ -29,10 +32,12 @@ export const DropdownSplitButtonProgressCheckbox: React.FunctionComponent = () =
 
   const onChange1 = (checked: boolean) => {
     setIsChecked1(checked);
+    checked ? setTimeout(() => setIsTimedOut1(true), 3000) : setIsTimedOut1(false);
   };
 
   const onChange2 = (checked: boolean) => {
     setIsChecked2(checked);
+    checked ? setTimeout(() => setIsTimedOut2(true), 3000) : setIsTimedOut2(false);
   };
 
   const onSelect1 = () => {
@@ -79,8 +84,7 @@ export const DropdownSplitButtonProgressCheckbox: React.FunctionComponent = () =
               <DropdownToggleCheckbox
                 onChange={onChange1}
                 isChecked={isChecked1}
-                isInProgress={isChecked1}
-                isDisabled={isChecked1}
+                isInProgress={isChecked1 && !isTimedOut1}
                 id="split-button-progress-toggle-checkbox"
                 key="split-progress-checkbox"
                 aria-label="Select all"
@@ -101,8 +105,7 @@ export const DropdownSplitButtonProgressCheckbox: React.FunctionComponent = () =
               <DropdownToggleCheckbox
                 onChange={onChange2}
                 isChecked={isChecked2}
-                isInProgress={isChecked2}
-                isDisabled={isChecked2}
+                isInProgress={isChecked2 && !isTimedOut2}
                 id="split-button-progress-text-checkbox"
                 key="split-progress-checkbox"
                 aria-label="Select all"

From 0c5cf4d985ef0f3f262fa81f9d8b22f28ff01726 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Tue, 20 Dec 2022 16:21:00 -0500
Subject: [PATCH 6/9] PR feedback from mcarrano

---
 .../DropdownSplitButtonProgressCheckbox.tsx   | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx
index ca22979435b..c86e49c71ca 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx
+++ b/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx
@@ -14,8 +14,8 @@ export const DropdownSplitButtonProgressCheckbox: React.FunctionComponent = () =
   const [isChecked1, setIsChecked1] = React.useState(false);
   const [isChecked2, setIsChecked2] = React.useState(false);
 
-  const [isTimedOut1, setIsTimedOut1] = React.useState(false);
-  const [isTimedOut2, setIsTimedOut2] = React.useState(false);
+  const [isTimedOut1, setIsTimedOut1] = React.useState(true);
+  const [isTimedOut2, setIsTimedOut2] = React.useState(true);
 
   const onToggle1 = (isOpen: boolean) => {
     setIsOpen1(isOpen);
@@ -25,6 +25,16 @@ export const DropdownSplitButtonProgressCheckbox: React.FunctionComponent = () =
     setIsOpen2(isOpen);
   };
 
+  const showProgressIcon1 = () => {
+    setIsTimedOut1(false);
+    setTimeout(() => setIsTimedOut1(true), 3000);
+  };
+
+  const showProgressIcon2 = () => {
+    setIsTimedOut2(false);
+    setTimeout(() => setIsTimedOut2(true), 3000);
+  };
+
   const onFocus = () => {
     const element = document.getElementById('toggle-split-button-progress-text');
     element.focus();
@@ -32,12 +42,12 @@ export const DropdownSplitButtonProgressCheckbox: React.FunctionComponent = () =
 
   const onChange1 = (checked: boolean) => {
     setIsChecked1(checked);
-    checked ? setTimeout(() => setIsTimedOut1(true), 3000) : setIsTimedOut1(false);
+    showProgressIcon1();
   };
 
   const onChange2 = (checked: boolean) => {
     setIsChecked2(checked);
-    checked ? setTimeout(() => setIsTimedOut2(true), 3000) : setIsTimedOut2(false);
+    showProgressIcon2();
   };
 
   const onSelect1 = () => {
@@ -84,7 +94,7 @@ export const DropdownSplitButtonProgressCheckbox: React.FunctionComponent = () =
               <DropdownToggleCheckbox
                 onChange={onChange1}
                 isChecked={isChecked1}
-                isInProgress={isChecked1 && !isTimedOut1}
+                isInProgress={!isTimedOut1}
                 id="split-button-progress-toggle-checkbox"
                 key="split-progress-checkbox"
                 aria-label="Select all"
@@ -105,7 +115,7 @@ export const DropdownSplitButtonProgressCheckbox: React.FunctionComponent = () =
               <DropdownToggleCheckbox
                 onChange={onChange2}
                 isChecked={isChecked2}
-                isInProgress={isChecked2 && !isTimedOut2}
+                isInProgress={!isTimedOut2}
                 id="split-button-progress-text-checkbox"
                 key="split-progress-checkbox"
                 aria-label="Select all"

From 7e49216cf3974a178e4adcaed5c3b25971b35eed Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Wed, 4 Jan 2023 09:38:33 -0500
Subject: [PATCH 7/9] add ariavalue-text, mark prop beta

---
 .../Dropdown/DropdownToggleCheckbox.tsx          | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/react-core/src/components/Dropdown/DropdownToggleCheckbox.tsx b/packages/react-core/src/components/Dropdown/DropdownToggleCheckbox.tsx
index 8e88000af08..8abc71d57c1 100644
--- a/packages/react-core/src/components/Dropdown/DropdownToggleCheckbox.tsx
+++ b/packages/react-core/src/components/Dropdown/DropdownToggleCheckbox.tsx
@@ -16,7 +16,7 @@ export interface DropdownToggleCheckboxProps
   isDisabled?: boolean;
   /** Flag to show if the checkbox is checked */
   isChecked?: boolean | null;
-  /** Flag to show if the checkbox is in progress */
+  /** @beta Flag to show if the checkbox is in progress */
   isInProgress?: boolean | null;
   /** Alternate Flag to show if the checkbox is checked */
   checked?: boolean | null;
@@ -28,6 +28,8 @@ export interface DropdownToggleCheckboxProps
   id: string;
   /** Aria-label of the checkbox */
   'aria-label': string;
+  /** Text describing that current loading status or progress */
+  defaultProgressAriaValueText?: string;
   /** Aria-label for the default progress icon */
   defaultProgressAriaLabel?: string;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
@@ -74,7 +76,8 @@ export class DropdownToggleCheckbox extends React.Component<DropdownToggleCheckb
       isDisabled,
       isChecked,
       isInProgress = false,
-      defaultProgressAriaLabel = 'Loading...',
+      defaultProgressAriaLabel = 'Loading content',
+      defaultProgressAriaValueText = 'Loading...',
       children,
       ouiaId,
       ouiaSafe,
@@ -85,7 +88,14 @@ export class DropdownToggleCheckbox extends React.Component<DropdownToggleCheckb
       ...props
     } = this.props;
 
-    const spinner = <Spinner diameter="1em" isSVG aria-label={defaultProgressAriaLabel} />;
+    const spinner = (
+      <Spinner
+        diameter="1em"
+        isSVG
+        aria-valuetext={defaultProgressAriaValueText}
+        aria-label={defaultProgressAriaLabel}
+      />
+    );
 
     const text = children && (
       <span className={css(styles.dropdownToggleText, className)} aria-hidden="true" id={`${props.id}-text`}>

From 691a4a7e1cb370ef60a1ef2b53a46842c55f43f6 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Wed, 4 Jan 2023 09:40:51 -0500
Subject: [PATCH 8/9] update verbiage

---
 .../src/components/Dropdown/DropdownToggleCheckbox.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-core/src/components/Dropdown/DropdownToggleCheckbox.tsx b/packages/react-core/src/components/Dropdown/DropdownToggleCheckbox.tsx
index 8abc71d57c1..b534927661d 100644
--- a/packages/react-core/src/components/Dropdown/DropdownToggleCheckbox.tsx
+++ b/packages/react-core/src/components/Dropdown/DropdownToggleCheckbox.tsx
@@ -28,7 +28,7 @@ export interface DropdownToggleCheckboxProps
   id: string;
   /** Aria-label of the checkbox */
   'aria-label': string;
-  /** Text describing that current loading status or progress */
+  /** Text describing current loading status or progress */
   defaultProgressAriaValueText?: string;
   /** Aria-label for the default progress icon */
   defaultProgressAriaLabel?: string;

From a950abba235e2f5fe99a892bbcfaad5f5969903e Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Thu, 5 Jan 2023 16:26:37 -0500
Subject: [PATCH 9/9] PR feedback from Eric

---
 .../components/Dropdown/DropdownToggleCheckbox.tsx    |  7 ++++---
 .../examples/DropdownSplitButtonProgressCheckbox.tsx  | 11 ++++++++---
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/react-core/src/components/Dropdown/DropdownToggleCheckbox.tsx b/packages/react-core/src/components/Dropdown/DropdownToggleCheckbox.tsx
index b534927661d..b3b0f42dbca 100644
--- a/packages/react-core/src/components/Dropdown/DropdownToggleCheckbox.tsx
+++ b/packages/react-core/src/components/Dropdown/DropdownToggleCheckbox.tsx
@@ -28,9 +28,9 @@ export interface DropdownToggleCheckboxProps
   id: string;
   /** Aria-label of the checkbox */
   'aria-label': string;
-  /** Text describing current loading status or progress */
+  /** @beta Text describing current loading status or progress */
   defaultProgressAriaValueText?: string;
-  /** Aria-label for the default progress icon */
+  /** @beta Aria-label for the default progress icon to describe what is loading */
   defaultProgressAriaLabel?: string;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
@@ -76,7 +76,7 @@ export class DropdownToggleCheckbox extends React.Component<DropdownToggleCheckb
       isDisabled,
       isChecked,
       isInProgress = false,
-      defaultProgressAriaLabel = 'Loading content',
+      defaultProgressAriaLabel,
       defaultProgressAriaValueText = 'Loading...',
       children,
       ouiaId,
@@ -93,6 +93,7 @@ export class DropdownToggleCheckbox extends React.Component<DropdownToggleCheckb
         diameter="1em"
         isSVG
         aria-valuetext={defaultProgressAriaValueText}
+        aria-live="polite"
         aria-label={defaultProgressAriaLabel}
       />
     );
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx
index c86e49c71ca..272a9bc1910 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx
+++ b/packages/react-core/src/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx
@@ -35,7 +35,12 @@ export const DropdownSplitButtonProgressCheckbox: React.FunctionComponent = () =
     setTimeout(() => setIsTimedOut2(true), 3000);
   };
 
-  const onFocus = () => {
+  const onFocus1 = () => {
+    const element = document.getElementById('toggle-split-button-progress');
+    element.focus();
+  };
+
+  const onFocus2 = () => {
     const element = document.getElementById('toggle-split-button-progress-text');
     element.focus();
   };
@@ -52,12 +57,12 @@ export const DropdownSplitButtonProgressCheckbox: React.FunctionComponent = () =
 
   const onSelect1 = () => {
     setIsOpen1(false);
-    onFocus();
+    onFocus1();
   };
 
   const onSelect2 = () => {
     setIsOpen2(false);
-    onFocus();
+    onFocus2();
   };
 
   const dropdownItems = [