diff --git a/packages/ibm-products/src/components/Guidebanner/Guidebanner.tsx b/packages/ibm-products/src/components/Guidebanner/Guidebanner.tsx index a4dd9b8551..9f8cc63671 100644 --- a/packages/ibm-products/src/components/Guidebanner/Guidebanner.tsx +++ b/packages/ibm-products/src/components/Guidebanner/Guidebanner.tsx @@ -15,6 +15,7 @@ import { Button, IconButton } from '@carbon/react'; import { Carousel } from '../Carousel'; import { getDevtoolsProps } from '../../global/js/utils/devtools'; import { pkg } from '../../settings'; +import uuidv4 from '../../global/js/utils/uuidv4'; // The block part of our conventional BEM class names (blockClass__E--M). const blockClass = `${pkg.prefix}--guidebanner`; @@ -117,11 +118,12 @@ export let Guidebanner = React.forwardRef( const handleClickToggle = () => { setIsCollapsed((prevState) => !prevState); }; + const carouselContentId = `${uuidv4()}--carousel-content-id`; return (
(
{title}
( className={`${blockClass}__toggle-button`} onClick={handleClickToggle} ref={toggleRef} + aria-controls={!isCollapsed ? carouselContentId : undefined} + aria-expanded={!isCollapsed} > {isCollapsed ? expandButtonLabel : collapseButtonLabel}