Address feedback

WordPress · Feb 15, 2023 · ba94657 · ba94657
1 parent c39f91d
commit ba94657
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -6,6 +6,7 @@
 
 -   `ToolsPanel`: fix type inconsistencies between types, docs and normal component usage ([47944](https://github.com/WordPress/gutenberg/pull/47944)).
 -   `SelectControl`: Fix styling when `multiple` prop is enabled ([#47893](https://github.com/WordPress/gutenberg/pull/43213)).
+-   `useAutocompleteProps`, `Autocomplete`: Make accessible when rendered in an iframe ([#47907](https://github.com/WordPress/gutenberg/pull/47907)).
 
 ### Enhancements
 

diff --git a/packages/components/src/autocomplete/autocompleter-ui.js b/packages/components/src/autocomplete/autocompleter-ui.js
@@ -52,11 +52,20 @@ export function getAutoCompleterUI( autocompleter ) {
 		const popoverRef = useRef();
 		const popoverRefs = useMergeRefs( [
 			popoverRef,
-			useRefEffect( ( node ) => {
-				if ( node.ownerDocument !== contentRef.current.ownerDocument ) {
-					setNeedsA11yCompat( true );
-				}
-			} ),
+			useRefEffect(
+				( node ) => {
+					if ( ! contentRef.current ) return;
+
+					// If the popover is rendered in a different document than
+					// the content, we need to duplicate the options list in the
+					// content document so that it's available to the screen
+					// readers, which check the DOM ID based aira-* attributes.
+					setNeedsA11yCompat(
+						node.ownerDocument !== contentRef.current.ownerDocument
+					);
+				},
+				[ contentRef ]
+			),
 		] );
 
 		useOnClickOutside( popoverRef, reset );
@@ -112,7 +121,8 @@ export function getAutoCompleterUI( autocompleter ) {
 				>
 					<ListBox />
 				</Popover>
-				{ needsA11yCompat &&
+				{ contentRef.current &&
+					needsA11yCompat &&
 					createPortal(
 						<ListBox Component={ VisuallyHidden } />,
 						contentRef.current.ownerDocument.body