fix: update ToggleGroup examples to properly toggle options (#12239)

- Update ToggleGroup Single select example to allow toggling off selected options
- Update Table Basic example to remove 'Default' option and allow toggling
- Update Table Actions example to remove 'Default actions toggle' option and allow toggling
- Update Alert Async live region example to remove 'off' option and make single toggle

Ensures all ToggleGroup instances follow aria-pressed semantics where clicking
a selected option unselects it, and removes redundant 'default' or 'off' options
that prevent proper toggle behavior.

Fixes #12234

Author: arpanroy41

packages/react-core/src/components/Alert/examples/AlertAsyncLiveRegion.tsx

@@ -42,13 +42,7 @@ export const AsyncLiveRegionAlert: React.FunctionComponent = () => {
           text="Async alerts on"
           buttonId="async-alerts-on"
           isSelected={isActive}
-          onChange={() => setIsActive(true)}
-        />
-        <ToggleGroupItem
-          text="Async alerts off"
-          buttonId="async-alerts-off"
-          isSelected={!isActive}
-          onChange={() => setIsActive(false)}
+          onChange={() => setIsActive(!isActive)}
         />
       </ToggleGroup>
       <AlertGroup hasAnimations isLiveRegion>

packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultSingle.tsx

@@ -5,7 +5,8 @@ export const ToggleGroupDefaultSingle: React.FunctionComponent = () => {
   const [isSelected, setIsSelected] = useState('');
   const handleItemClick = (event, _isSelected: boolean) => {
     const id = event.currentTarget.id;
-    setIsSelected(id);
+    // Allow toggling off if clicking the already selected item
+    setIsSelected(isSelected === id ? '' : id);
   };
   return (
     <ToggleGroup aria-label="Default with single selectable">

packages/react-table/src/components/Table/examples/TableActions.tsx

@@ -23,7 +23,7 @@ interface Repository {
   singleAction: string;
 }
 
-type ExampleType = 'defaultToggle' | 'customToggle';
+type ExampleType = 'customToggle';
 
 export const TableActions: React.FunctionComponent = () => {
   // In real usage, this data would come from some external source like an API via props.
@@ -45,10 +45,11 @@ export const TableActions: React.FunctionComponent = () => {
   };
 
   // This state is just for the ToggleGroup in this example and isn't necessary for Table usage.
-  const [exampleChoice, setExampleChoice] = useState<ExampleType>('defaultToggle');
+  const [exampleChoice, setExampleChoice] = useState<ExampleType | ''>('');
   const onExampleTypeChange: ToggleGroupItemProps['onChange'] = (event, _isSelected) => {
     const id = event.currentTarget.id;
-    setExampleChoice(id as ExampleType);
+    // Allow toggling off if clicking the already selected item
+    setExampleChoice(exampleChoice === id ? '' : (id as ExampleType));
   };
 
   const customActionsToggle = (props: CustomActionsToggleProps) => (
@@ -95,12 +96,6 @@ export const TableActions: React.FunctionComponent = () => {
   return (
     <Fragment>
       <ToggleGroup aria-label="Default uses kebab toggle">
-        <ToggleGroupItem
-          text="Default actions toggle"
-          buttonId="defaultToggle"
-          isSelected={exampleChoice === 'defaultToggle'}
-          onChange={onExampleTypeChange}
-        />
         <ToggleGroupItem
           text="Custom actions toggle"
           buttonId="customToggle"

packages/react-table/src/components/Table/examples/TableBasic.tsx

@@ -10,7 +10,7 @@ interface Repository {
   lastCommit: string;
 }
 
-type ExampleType = 'default' | 'compact' | 'compactBorderless';
+type ExampleType = 'compact' | 'compactBorderless';
 
 export const TableBasic: React.FunctionComponent = () => {
   // In real usage, this data would come from some external source like an API via props.
@@ -29,21 +29,16 @@ export const TableBasic: React.FunctionComponent = () => {
   };
 
   // This state is just for the ToggleGroup in this example and isn't necessary for Table usage.
-  const [exampleChoice, setExampleChoice] = useState<ExampleType>('default');
+  const [exampleChoice, setExampleChoice] = useState<ExampleType | ''>('');
   const onExampleTypeChange: ToggleGroupItemProps['onChange'] = (event, _isSelected) => {
     const id = event.currentTarget.id;
-    setExampleChoice(id as ExampleType);
+    // Allow toggling off if clicking the already selected item
+    setExampleChoice(exampleChoice === id ? '' : (id as ExampleType));
   };
 
   return (
     <Fragment>
       <ToggleGroup aria-label="Default with single selectable">
-        <ToggleGroupItem
-          text="Default"
-          buttonId="default"
-          isSelected={exampleChoice === 'default'}
-          onChange={onExampleTypeChange}
-        />
         <ToggleGroupItem
           text="Compact"
           buttonId="compact"
@@ -59,7 +54,7 @@ export const TableBasic: React.FunctionComponent = () => {
       </ToggleGroup>
       <Table
         aria-label="Simple table"
-        variant={exampleChoice !== 'default' ? 'compact' : undefined}
+        variant={exampleChoice === 'compact' || exampleChoice === 'compactBorderless' ? 'compact' : undefined}
         borders={exampleChoice !== 'compactBorderless'}
       >
         <Caption>Simple table using composable components</Caption>