From 501827ec17a30a9e01bb23a923350b18aed0abba Mon Sep 17 00:00:00 2001
From: YunBum SUNG <yb.sung@lge.com>
Date: Mon, 7 Dec 2020 18:42:26 +0900
Subject: [PATCH] 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 (yb.sung@lge.com)

* Update CHANGELOG.md

Enact-DCO-1.0-Signed-off-by: YB Sung (yb.sung@lge.com)
---
 Alert/Alert.js                              | 47 +++++++++++----------
 CHANGELOG.md                                |  1 +
 samples/qa-a11y/src/views/PopupTabLayout.js | 17 +++++---
 3 files changed, 36 insertions(+), 29 deletions(-)

diff --git a/Alert/Alert.js b/Alert/Alert.js
index 8d82da4cd0..ea51a9c2ed 100644
--- 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
index b1ae78b50e..ca85308e0a 100644
--- 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
index 43a83c2ea1..a12ce45af9 100644
--- 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>