Add accessibility for ExpandableText.tsx

Squash commits of branch poc/toggle_description_for_extended_description:

- Add accessibility for ExpandableText.tsx

- Change paragraph to details in ExpandableText.tsx

- Change paragraph to details in ExpandableText.tsx

scm-ui/ui-core/src/base/forms/base/ExpandableText.tsx

@@ -14,12 +14,12 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { HTMLAttributes, useState } from "react";
-import { Icon } from "../../buttons";
+import React, { HTMLAttributes } from "react";
 
 interface Props extends HTMLAttributes<HTMLParagraphElement> {
   descriptionText: string;
   extendedDescriptionText: string;
+  id?: string;
 }
 
 /**
@@ -29,27 +29,20 @@ interface Props extends HTMLAttributes<HTMLParagraphElement> {
  * with an icon to toggle the visibility of the extended text.
  *
  * @param desription - The text content that will always be displayed.
- * @param extended - The text content that will be displayed after you toggle the icon.
- * @param props - Additional props to pass to the `<p>` element.
- * @param ref - A ref to the `<p>` element.
+ * @param extended - The text content that will be displayed after you toggle details.
+ * @param id - Additional props to pass to the `<details>` element.
+ * @param ref - A ref to the `<details>` element.
  *
  * @beta
  * @since 3.9.0
  */
-const ExpandableText = React.forwardRef<HTMLParagraphElement, Props>(
-  ({ descriptionText, extendedDescriptionText, ...props }, ref) => {
-    const [isExpanded, setIsExpanded] = useState(false);
-
+const ExpandableText = React.forwardRef<HTMLDetailsElement, Props>(
+  ({ descriptionText, extendedDescriptionText, id }, ref) => {
     return (
-      <p {...props} ref={ref} className="is-flex is-flex-direction-column mb-2">
-        <div>
-          <Icon className="is-clickable" onClick={() => setIsExpanded(!isExpanded)} aria-expanded={isExpanded}>
-            {isExpanded ? "chevron-down" : "chevron-right"}
-          </Icon>
-          {descriptionText}
-        </div>
-        <>{isExpanded && <span className="mt-1">{extendedDescriptionText}</span>}</>
-      </p>
+      <details className="mb-2" id={id} ref={ref}>
+        <summary>{descriptionText}</summary>
+        <span>{extendedDescriptionText}</span>
+      </details>
     );
   }
 );

scm-ui/ui-core/src/base/forms/input/InputField.stories.mdx

@@ -18,8 +18,8 @@ This will be our first form field molecule
 </Story>
 
 <Story name="WithDescriptionExtended">
-  <InputField label="MyInput 1" descriptionText="This text is a description for this input" extendedText="This is the extended description fot this input" />
-  <InputField label="MyInput 2" descriptionText="This text is a description for this input" extendedText="This is the long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long extended description fot this input" />
+  <InputField label="MyInput 1" descriptionText="This text is a description for this input" extendedText="This is the extended description for this input" />
+  <InputField label="MyInput 2" descriptionText="This text is a description for this input" extendedText="This is the long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long extended description for this input" />
 </Story>
 
 <Story name="WithError">

scm-ui/ui-core/src/base/forms/input/InputField.tsx

@@ -46,7 +46,6 @@ const InputField = React.forwardRef<HTMLInputElement, InputFieldProps>(
     const inputId = useAriaId(id ?? props.testId);
     const helpTextId = helpText ? `input-helptext-${name}` : undefined;
     const descriptionId = descriptionText ? `input-description-${name}` : undefined;
-    const extendedDescriptionId = extendedText ? `input-extended-${name}` : undefined;
     const variant = error ? "danger" : undefined;
     return (
       <Field className={className}>
@@ -55,11 +54,7 @@ const InputField = React.forwardRef<HTMLInputElement, InputFieldProps>(
           {helpText ? <Help className="ml-1" text={helpText} /> : null}
         </Label>
         {extendedText && descriptionText ? (
-          <ExpandableText
-            id={extendedDescriptionId}
-            descriptionText={descriptionText}
-            extendedDescriptionText={extendedText}
-          />
+          <ExpandableText id={descriptionId} descriptionText={descriptionText} extendedDescriptionText={extendedText} />
         ) : (
           <p className="mb-2" id={descriptionId}>
             {descriptionText}