PLAT-115902: Read out properly after closing an Alert and a Popup in …

…a PopupTabLayout (#813) * Read out in PopupTabLayout after closing Alert and Popup Enact-DCO-1.0-Signed-off-by: YB Sung ([email protected]) * Update CHANGELOG.md Enact-DCO-1.0-Signed-off-by: YB Sung ([email protected])
enactjs · Dec 7, 2020 · 501827e · 501827e
1 parent ce21407
commit 501827e
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 29 deletions.
diff --git a/Alert/Alert.js b/Alert/Alert.js
@@ -186,28 +186,31 @@ const AlertBase = kind({
 		const showTitle = (fullscreen && title);
 		const ariaLabelledBy = (showTitle ? `${id}_title ` : '') + `${id}_content ${id}_buttons`;
 		return (
-			<Popup
-				{...rest}
-				noAnimation
-				aria-labelledby={ariaLabelledBy}
-				css={css}
-				position={position}
-			>
-				<Layout align="center center" orientation={layoutOrientation}>
-					{image ? <Cell shrink className={css.alertImage}>{image}</Cell> : null}
-					{showTitle ? <Cell shrink><Heading size="title" alignment="center" className={css.title} id={`${id}_title`}>{title}</Heading></Cell> : null}
-					<Cell shrink align={fullscreen ? 'center' : ''} component={contentComponent} className={css.content} id={`${id}_content`}>
-						{children}
-					</Cell>
-					{buttons ?
-						<Cell align={fullscreen ? '' : 'end'} shrink className={css.buttonContainer}>
-							<Layout align="center" orientation="vertical" id={`${id}_buttons`}>
-								{buttons}
-							</Layout>
-						</Cell> : null
-					}
-				</Layout>
-			</Popup>
+			<div aria-owns={id}>
+				<Popup
+					{...rest}
+					id={id}
+					noAnimation
+					aria-labelledby={ariaLabelledBy}
+					css={css}
+					position={position}
+				>
+					<Layout align="center center" orientation={layoutOrientation}>
+						{image ? <Cell shrink className={css.alertImage}>{image}</Cell> : null}
+						{showTitle ? <Cell shrink><Heading size="title" alignment="center" className={css.title} id={`${id}_title`}>{title}</Heading></Cell> : null}
+						<Cell shrink align={fullscreen ? 'center' : ''} component={contentComponent} className={css.content} id={`${id}_content`}>
+							{children}
+						</Cell>
+						{buttons ?
+							<Cell align={fullscreen ? '' : 'end'} shrink className={css.buttonContainer}>
+								<Layout align="center" orientation="vertical" id={`${id}_buttons`}>
+									{buttons}
+								</Layout>
+							</Cell> : null
+						}
+					</Layout>
+				</Popup>
+			</div>
 		);
 	}
 });

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ The following is a curated list of changes in the Enact sandstone module, newest
 
 ### Fixed
 
+- `sandstone/Alert` to read out properly after closing it in a `sandstone/PopupTabLayout`
 - `sandstone/Heading` `font-style` to use oblique font instead of fake `italic`
 - `sandstone/Input` to not have initial focus with pointer when `type` prop is `'number'` or `'passwordnumber'`
 - `sandstone/Panel` to not reset scroll position by events from others

diff --git a/samples/qa-a11y/src/views/PopupTabLayout.js b/samples/qa-a11y/src/views/PopupTabLayout.js
@@ -183,13 +183,16 @@ class PopupTabLayoutView extends React.Component {
 									</buttons>
 								</Alert>
 								<KeyGuide open={openKeyGuide} onClick={() => this.setState({openKeyGuide: true})}>{keyGuideItems}</KeyGuide>
-								<Popup
-									onClose={() => this.setState({openPopup: false})}
-									open={openPopup}
-								>
-									<Button>Text 0</Button>
-									<Button>Text 1</Button>
-								</Popup>
+								<div aria-owns="popup">
+									<Popup
+										id="popup"
+										onClose={() => this.setState({openPopup: false})}
+										open={openPopup}
+									>
+										<Button>Text 0</Button>
+										<Button>Text 1</Button>
+									</Popup>
+								</div>
 							</TabPanel>
 						</TabPanels>
 					</Tab>