From 31232d802fddd85ab724a10d7df1dee10c6fb4fb Mon Sep 17 00:00:00 2001 From: Viktor Egorov Date: Wed, 9 Jul 2025 17:40:19 +0200 Subject: [PATCH] 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 --- .../src/base/forms/base/ExpandableText.tsx | 29 +++++++------------ .../base/forms/input/InputField.stories.mdx | 4 +-- .../src/base/forms/input/InputField.tsx | 7 +---- 3 files changed, 14 insertions(+), 26 deletions(-) diff --git a/scm-ui/ui-core/src/base/forms/base/ExpandableText.tsx b/scm-ui/ui-core/src/base/forms/base/ExpandableText.tsx index 3c5ae323bd..9416a8762d 100644 --- a/scm-ui/ui-core/src/base/forms/base/ExpandableText.tsx +++ b/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 { descriptionText: string; extendedDescriptionText: string; + id?: string; } /** @@ -29,27 +29,20 @@ interface Props extends HTMLAttributes { * 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 `

` element. - * @param ref - A ref to the `

` element. + * @param extended - The text content that will be displayed after you toggle details. + * @param id - Additional props to pass to the `

` element. + * @param ref - A ref to the `
` element. * * @beta * @since 3.9.0 */ -const ExpandableText = React.forwardRef( - ({ descriptionText, extendedDescriptionText, ...props }, ref) => { - const [isExpanded, setIsExpanded] = useState(false); - +const ExpandableText = React.forwardRef( + ({ descriptionText, extendedDescriptionText, id }, ref) => { return ( -

-

- setIsExpanded(!isExpanded)} aria-expanded={isExpanded}> - {isExpanded ? "chevron-down" : "chevron-right"} - - {descriptionText} -
- <>{isExpanded && {extendedDescriptionText}} -

+
+ {descriptionText} + {extendedDescriptionText} +
); } ); diff --git a/scm-ui/ui-core/src/base/forms/input/InputField.stories.mdx b/scm-ui/ui-core/src/base/forms/input/InputField.stories.mdx index b3b87eaafb..68c27afd38 100644 --- a/scm-ui/ui-core/src/base/forms/input/InputField.stories.mdx +++ b/scm-ui/ui-core/src/base/forms/input/InputField.stories.mdx @@ -18,8 +18,8 @@ This will be our first form field molecule - - + + diff --git a/scm-ui/ui-core/src/base/forms/input/InputField.tsx b/scm-ui/ui-core/src/base/forms/input/InputField.tsx index 670f164aff..ebf5123f17 100644 --- a/scm-ui/ui-core/src/base/forms/input/InputField.tsx +++ b/scm-ui/ui-core/src/base/forms/input/InputField.tsx @@ -46,7 +46,6 @@ const InputField = React.forwardRef( 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 ( @@ -55,11 +54,7 @@ const InputField = React.forwardRef( {helpText ? : null} {extendedText && descriptionText ? ( - + ) : (

{descriptionText}