From b6c4813b132f3d8420dc412cfd6b4a38d8d31c56 Mon Sep 17 00:00:00 2001
From: William Stanton <40372497+bstanton678@users.noreply.github.com>
Date: Thu, 25 May 2023 08:37:04 -0700
Subject: [PATCH] fix: Fixing Alert and Error radio button examples (#2197)

Fixes: #2196

The examples for the Alert and Error radio groups were not accessible to the keyboard because the disabled property was set on an already pre-selected input. This was a good example of something not to do!

[category:Components]
---
 modules/react/radio/stories/Radio.stories.mdx  | 2 +-
 modules/react/radio/stories/examples/Alert.tsx | 4 ++--
 modules/react/radio/stories/examples/Error.tsx | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/modules/react/radio/stories/Radio.stories.mdx b/modules/react/radio/stories/Radio.stories.mdx
index 1142a5b4ba..1b0a85102b 100644
--- a/modules/react/radio/stories/Radio.stories.mdx
+++ b/modules/react/radio/stories/Radio.stories.mdx
@@ -39,7 +39,7 @@ Radio Group should be used in tandem with [Form Field](/components/inputs/form-f
 
 ### Disabled
 
-Set the `disabled` prop of the Radio Button to prevent users from interacting with it.
+Set the `disabled` prop of the Radio Button to prevent users from interacting with it. Be careful not to disable a pre-selected Radio Button, this will block keyboard access from the entire Radio Group. 
 
 <ExampleCodeBlock code={Disabled} />
 
diff --git a/modules/react/radio/stories/examples/Alert.tsx b/modules/react/radio/stories/examples/Alert.tsx
index 01ef262bbf..358a359c85 100644
--- a/modules/react/radio/stories/examples/Alert.tsx
+++ b/modules/react/radio/stories/examples/Alert.tsx
@@ -14,12 +14,12 @@ export const Alert = () => {
     <FormField
       error={FormField.ErrorType.Alert}
       hintId="hint-alert"
-      hintText="Deep Dish is no longer available. Please select a different crust."
+      hintText="Deep dish is an extra $2.99"
       label="Choose Your Pizza Crust"
       useFieldset={true}
     >
       <RadioGroup name={useUniqueId()} onChange={handleChange} value={value}>
-        <Radio disabled={true} label="Deep dish (sold out)" value="deep-dish" />
+        <Radio label="Deep dish" value="deep-dish" />
         <Radio label="Thin" value="thin" />
         <Radio label="Gluten free" value="gluten-free" />
         <Radio label="Cauliflower" value="cauliflower" />
diff --git a/modules/react/radio/stories/examples/Error.tsx b/modules/react/radio/stories/examples/Error.tsx
index b5c1442720..8f723c54a9 100644
--- a/modules/react/radio/stories/examples/Error.tsx
+++ b/modules/react/radio/stories/examples/Error.tsx
@@ -14,12 +14,12 @@ export const Error = () => {
     <FormField
       error={FormField.ErrorType.Error}
       hintId="hint-error"
-      hintText="Deep Dish is no longer available. Please select a different crust."
+      hintText="Deep Dish is currently sold out."
       label="Choose Your Pizza Crust"
       useFieldset={true}
     >
       <RadioGroup name={useUniqueId()} onChange={handleChange} value={value}>
-        <Radio disabled={true} label="Deep dish (sold out)" value="deep-dish" />
+        <Radio label="Deep dish" value="deep-dish" />
         <Radio label="Thin" value="thin" />
         <Radio label="Gluten free" value="gluten-free" />
         <Radio label="Cauliflower" value="cauliflower" />