@@ -6,7 +6,7 @@ import { AboutModalBoxBrand } from './AboutModalBoxBrand';
66import { AboutModalBoxCloseButton } from './AboutModalBoxCloseButton' ;
77import { AboutModalBox } from './AboutModalBox' ;
88import { Modal , ModalVariant } from '../Modal' ;
9- import { GenerateId } from '../../helpers/GenerateId/GenerateId ' ;
9+ import { useSSRSafeId } from '../../helpers' ;
1010
1111export interface AboutModalProps extends React . HTMLProps < HTMLDivElement > {
1212 /** Content rendered inside the about modal */
@@ -56,6 +56,8 @@ export const AboutModal: React.FunctionComponent<AboutModalProps> = ({
5656 disableFocusTrap,
5757 ...props
5858} : AboutModalProps ) => {
59+ const ariaLabelledBy = useSSRSafeId ( 'pf-about-modal-title-' ) ;
60+
5961 if ( brandImageSrc && ! brandImageAlt ) {
6062 // eslint-disable-next-line no-console
6163 console . error (
@@ -73,35 +75,29 @@ export const AboutModal: React.FunctionComponent<AboutModalProps> = ({
7375 return null ;
7476 }
7577 return (
76- < GenerateId prefix = "pf-about-modal-title-" >
77- { ( ariaLabelledBy ) => (
78- < Modal
79- isOpen = { isOpen }
80- variant = { ModalVariant . large }
81- { ...( productName && { 'aria-labelledby' : ariaLabelledBy } ) }
82- aria-label = { ariaLabel }
83- onEscapePress = { onClose }
84- appendTo = { appendTo }
85- disableFocusTrap = { disableFocusTrap }
86- >
87- < AboutModalBox
88- style = {
89- backgroundImageSrc
90- ? ( { [ backgroundImage . name ] : `url(${ backgroundImageSrc } )` } as React . CSSProperties )
91- : { }
92- }
93- className = { css ( className ) }
94- >
95- < AboutModalBoxBrand src = { brandImageSrc } alt = { brandImageAlt } />
96- < AboutModalBoxCloseButton aria-label = { closeButtonAriaLabel } onClose = { onClose } />
97- { productName && < AboutModalBoxHeader id = { ariaLabelledBy } productName = { productName } /> }
98- < AboutModalBoxContent trademark = { trademark } hasNoContentContainer = { hasNoContentContainer } { ...props } >
99- { children }
100- </ AboutModalBoxContent >
101- </ AboutModalBox >
102- </ Modal >
103- ) }
104- </ GenerateId >
78+ < Modal
79+ isOpen = { isOpen }
80+ variant = { ModalVariant . large }
81+ { ...( productName && { 'aria-labelledby' : ariaLabelledBy } ) }
82+ aria-label = { ariaLabel }
83+ onEscapePress = { onClose }
84+ appendTo = { appendTo }
85+ disableFocusTrap = { disableFocusTrap }
86+ >
87+ < AboutModalBox
88+ style = {
89+ backgroundImageSrc ? ( { [ backgroundImage . name ] : `url(${ backgroundImageSrc } )` } as React . CSSProperties ) : { }
90+ }
91+ className = { css ( className ) }
92+ >
93+ < AboutModalBoxBrand src = { brandImageSrc } alt = { brandImageAlt } />
94+ < AboutModalBoxCloseButton aria-label = { closeButtonAriaLabel } onClose = { onClose } />
95+ { productName && < AboutModalBoxHeader id = { ariaLabelledBy } productName = { productName } /> }
96+ < AboutModalBoxContent trademark = { trademark } hasNoContentContainer = { hasNoContentContainer } { ...props } >
97+ { children }
98+ </ AboutModalBoxContent >
99+ </ AboutModalBox >
100+ </ Modal >
105101 ) ;
106102} ;
107103AboutModal . displayName = 'AboutModal' ;
0 commit comments