WRP-3423: Add aria-own to prevent read parent page

CHANGELOG.md

@@ -19,6 +19,7 @@ The following is a curated list of changes in the Enact sandstone module, newest
 
 ### Fixed
 
+- `sandstone/Input` to read out properly after closing it in a `sandstone/PopupTabLayout`
 - `sandstone/ImageItem` to have proper size when imported with `sandstone/Dropdown` or `sandstone/VirtualList` in the same file
 - `sandstone/MediaPlayer.MediaControls` to focus properly when pressing up key from buttons after holding left or right keys
 - `sandstone/Scroller` and `sandstone/VirtualList` to scroll properly by hover when scrollbar is hidden or `dataSize` is changed

Input/Input.js

@@ -394,65 +394,68 @@ const InputPopupBase = kind({
 		delete rest.onOpenPopup;
 
 		return (
-			<Popup
-				aria-label={popupAriaLabel}
-				aria-labelledby={ariaLabelledBy}
-				onClose={onClose}
-				onShow={onShow}
-				position={popupType === 'fullscreen' ? 'fullscreen' : 'center'}
-				className={popupClassName}
-				noAlertRole
-				noAnimation
-				open={open}
-				role="region"
-			>
-				{popupType === 'fullscreen' ? backButton : null}
-				<Layout orientation="vertical" align={`center ${numberMode ? 'space-between' : ''}`} className={css.body}>
-					<Cell shrink className={css.titles}>
-						{popupType === 'fullscreen' ?
-							heading :
-							<>
-								{backButton}
-								{heading}
-							</>
-						}
-						<Heading id={`${id}_subtitle`} size="subtitle" marqueeOn="render" alignment="center" className={css.subtitle}>{subtitle}</Heading>
-					</Cell>
-					<Cell shrink className={css.inputArea}>
-						{numberMode ?
-							<NumberField
-								{...inputProps}
-								announce={announce}
-								maxLength={limitNumberLength(popupType, maxLength)}
-								minLength={limitNumberLength(popupType, minLength)}
-								defaultValue={value}
-								onBeforeChange={onBeforeChange}
-								onComplete={onNumberComplete}
-								showKeypad
-								type={(type === 'passwordnumber') ? 'password' : 'number'}
-								numberInputField={numberInputField}
-								noSubmitButton={noSubmitButton}
-							/> :
-							<InputField
-								{...inputProps}
-								className={classnames(css.textField, spotlightDefaultClass)}
-								css={css}
-								maxLength={maxLength}
-								minLength={minLength}
-								size={size}
-								autoFocus
-								type={type}
-								defaultValue={value}
-								placeholder={placeholder}
-								onBeforeChange={onBeforeChange}
-								onKeyDown={onInputKeyDown}
-								spotlightId={inputFieldSpotlightId}
-							/>
-						}
-					</Cell>
-					<Cell shrink className={css.buttonArea}>{children}</Cell>
-				</Layout>
-			</Popup>
+			<div aria-owns={id} className={css.inputPopupWrapper}>
+				<Popup
+					id={id}
+					aria-label={popupAriaLabel}
+					aria-labelledby={ariaLabelledBy}
+					onClose={onClose}
+					onShow={onShow}
+					position={popupType === 'fullscreen' ? 'fullscreen' : 'center'}
+					className={popupClassName}
+					noAlertRole
+					noAnimation
+					open={open}
+					role="region"
+				>
+					{popupType === 'fullscreen' ? backButton : null}
+					<Layout orientation="vertical" align={`center ${numberMode ? 'space-between' : ''}`} className={css.body}>
+						<Cell shrink className={css.titles}>
+							{popupType === 'fullscreen' ?
+								heading :
+								<>
+									{backButton}
+									{heading}
+								</>
+							}
+							<Heading id={`${id}_subtitle`} size="subtitle" marqueeOn="render" alignment="center" className={css.subtitle}>{subtitle}</Heading>
+						</Cell>
+						<Cell shrink className={css.inputArea}>
+							{numberMode ?
+								<NumberField
+									{...inputProps}
+									announce={announce}
+									maxLength={limitNumberLength(popupType, maxLength)}
+									minLength={limitNumberLength(popupType, minLength)}
+									defaultValue={value}
+									onBeforeChange={onBeforeChange}
+									onComplete={onNumberComplete}
+									showKeypad
+									type={(type === 'passwordnumber') ? 'password' : 'number'}
+									numberInputField={numberInputField}
+									noSubmitButton={noSubmitButton}
+								/> :
+								<InputField
+									{...inputProps}
+									className={classnames(css.textField, spotlightDefaultClass)}
+									css={css}
+									maxLength={maxLength}
+									minLength={minLength}
+									size={size}
+									autoFocus
+									type={type}
+									defaultValue={value}
+									placeholder={placeholder}
+									onBeforeChange={onBeforeChange}
+									onKeyDown={onInputKeyDown}
+									spotlightId={inputFieldSpotlightId}
+								/>
+							}
+						</Cell>
+						<Cell shrink className={css.buttonArea}>{children}</Cell>
+					</Layout>
+				</Popup>
+			</div>
 		);
 	}
 });

Input/Input.module.less

@@ -4,6 +4,10 @@
 @import "../styles/skin.less";
 @import "../styles/variables.less";
 
+.inputPopupWrapper {
+	display: inline;
+}
+
 .popup {
 	.numberField,
 	.number,