Simplify JS and add readme.

packages/interface/src/components/interface-skeleton/index.js

@@ -101,13 +101,14 @@ function InterfaceSkeleton(
 			<div className="interface-interface-skeleton__editor">
 				{ !! header && isDistractionFree && (
 					<NavigableRegion
-						initial={ isDistractionFree ? 'hidden' : 'hover' }
-						whileHover="hover"
-						variants={ headerVariants }
-						transition={ { type: 'tween', delay: 0.8 } }
 						className="interface-interface-skeleton__header"
 						aria-label={ mergedLabels.header }
-						useMotion={ true }
+						motionProps={ {
+							initial: isDistractionFree ? 'hidden' : 'hover',
+							whileHover: 'hover',
+							variants: headerVariants,
+							transition: { type: 'tween', delay: 0.8 },
+						} }
 					>
 						{ header }
 					</NavigableRegion>

packages/interface/src/components/navigable-region/README.md

@@ -0,0 +1,38 @@
+# NavigableRegion
+
+`NavigableRegion` renders an ARIA landmark region that's meant to be used together with the `useNavigateRegions` component from the `@wordpress/components` package. The ARIA landmark is a `div` element with a `role="region"` attribute and an `aria-label` attribute. It's made focusable by the means of a `tabindex="-1"` attribute so that `useNavigateRegions` can set focus on it and allow keyboard navigation through the regions in the editor.
+
+It also renders a child `div` element that is responsible to set a negative `z-index` stack level, to make sure the focus style is always visible, regardless of other elements that may cut-off the focus style outline otherwise.
+
+It can use a CSS animation via the `motion` component.
+
+## Props
+
+### children
+
+The component that should be rendered as content.
+
+-   Type: React Element
+-   Required: Yes
+
+### className
+
+The CSS class that will be added to the classes of the wrapper div.
+
+-   Type: `String`
+-   Required: No
+
+### ariaLabel
+
+A meaningful name for the ARIA landmark region.
+
+-   Type: `String`
+-   Required: Yes
+
+### motionProps
+
+Properties of `motionProps` object will be used by the `motion` component to set a CSS animation on the wrapper div.
+
+-   Type: `Object`
+-   Required: No
+-   Default: `{}`

packages/interface/src/components/navigable-region/index.js

@@ -12,19 +12,9 @@ export default function NavigableRegion( {
 	children,
 	className,
 	ariaLabel,
-	useMotion = false,
-	...props
+	motionProps = {},
 } ) {
-	const Tag = useMotion ? motion.div : 'div';
-
-	const motionProps = useMotion
-		? {
-				initial: props.initial,
-				whileHover: props.whileHover,
-				variants: props.variants,
-				transition: props.transition,
-		  }
-		: {};
+	const Tag = Object.keys( motionProps ).length ? motion.div : 'div';
 
 	return (
 		<Tag