From cfa727d80f68d5adca1441b9b53cbd9a8818366c Mon Sep 17 00:00:00 2001
From: YunBum Sung <yb.sung@lge.com>
Date: Tue, 4 Aug 2020 10:52:50 +0900
Subject: [PATCH 1/2] Wrap the portal with div having `aria-owns`

Enact-DCO-1.0-Signed-off-by: YB Sung (yb.sung@lge.com
---
 packages/ui/FloatingLayer/FloatingLayer.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/ui/FloatingLayer/FloatingLayer.js b/packages/ui/FloatingLayer/FloatingLayer.js
index 93e9f73521..30827f69d8 100644
--- a/packages/ui/FloatingLayer/FloatingLayer.js
+++ b/packages/ui/FloatingLayer/FloatingLayer.js
@@ -122,6 +122,7 @@ class FloatingLayerBase extends React.Component {
 	constructor (props) {
 		super(props);
 		this.node = null;
+		this.id = this.generateId();
 		this.state = {
 			nodeRendered: false
 		};
@@ -179,6 +180,10 @@ class FloatingLayerBase extends React.Component {
 		}
 	}
 
+	generateId = () => {
+		return Math.random().toString(36).substr(2, 8);
+	};
+
 	handleNotify = oneOf(
 		[forEventProp('action', 'close'), call('handleClose')],
 		[forEventProp('action', 'mount'), call('setFloatingLayer')]
@@ -252,13 +257,15 @@ class FloatingLayerBase extends React.Component {
 		delete rest.onOpen;
 
 		if (open && this.state.nodeRendered) {
-			return ReactDOM.createPortal(
-				<div {...rest}>
+			const portal = ReactDOM.createPortal(
+				<div {...rest} id={this.id}>
 					{scrimType !== 'none' ? <Scrim type={scrimType} onClick={this.handleClick} /> : null}
 					{React.cloneElement(children, {onClick: this.stopPropagation})}
 				</div>,
 				this.node
 			);
+
+			return <div aria-owns={this.id}>{portal}</div>;
 		}
 
 		return null;

From 5792a473df913d2f87f607ed5837664617e38e61 Mon Sep 17 00:00:00 2001
From: YunBum Sung <yb.sung@lge.com>
Date: Tue, 4 Aug 2020 12:34:31 +0900
Subject: [PATCH 2/2] Generate ID when rendering

Enact-DCO-1.0-Signed-off-by: YB Sung (yb.sung@lge.com)
---
 packages/ui/FloatingLayer/FloatingLayer.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui/FloatingLayer/FloatingLayer.js b/packages/ui/FloatingLayer/FloatingLayer.js
index 30827f69d8..d22dcef1e8 100644
--- a/packages/ui/FloatingLayer/FloatingLayer.js
+++ b/packages/ui/FloatingLayer/FloatingLayer.js
@@ -122,7 +122,6 @@ class FloatingLayerBase extends React.Component {
 	constructor (props) {
 		super(props);
 		this.node = null;
-		this.id = this.generateId();
 		this.state = {
 			nodeRendered: false
 		};
@@ -248,6 +247,7 @@ class FloatingLayerBase extends React.Component {
 
 	render () {
 		const {children, open, scrimType, ...rest} = this.props;
+		const id = this.generateId();
 
 		delete rest.floatLayerClassName;
 		delete rest.floatLayerId;
@@ -258,14 +258,14 @@ class FloatingLayerBase extends React.Component {
 
 		if (open && this.state.nodeRendered) {
 			const portal = ReactDOM.createPortal(
-				<div {...rest} id={this.id}>
+				<div {...rest} id={id}>
 					{scrimType !== 'none' ? <Scrim type={scrimType} onClick={this.handleClick} /> : null}
 					{React.cloneElement(children, {onClick: this.stopPropagation})}
 				</div>,
 				this.node
 			);
 
-			return <div aria-owns={this.id}>{portal}</div>;
+			return <div aria-owns={id}>{portal}</div>;
 		}
 
 		return null;