Merge pull request #12926 from google/enhancement/12722-thumbs-feedback-a11y-popper

Slide the Site Goals thumbs popper under the top nav on scroll

Author: tofumatt

assets/js/googlesitekit/components-gm2/Popper.test.tsx

@@ -153,6 +153,19 @@ describe( 'Popper', () => {
 		);
 	} );
 
+	it( 'renders the popper content inside the popper root element', async () => {
+		const { container, findByRole } = render( <PopperWrapper /> );
+
+		await findByRole( 'button', { name: 'Inside' } );
+
+		const root = container.querySelector( '.googlesitekit-popper-root' );
+
+		expect( root ).not.toBeNull();
+		expect(
+			root?.querySelector( '.googlesitekit-popper' )
+		).toBeInTheDocument();
+	} );
+
 	describe( 'auto-dismiss', () => {
 		beforeEach( () => {
 			jest.useFakeTimers();

assets/js/googlesitekit/components-gm2/Popper.tsx

@@ -39,7 +39,6 @@ export type PopperPlacement =
 
 const DEFAULT_AUTO_DISMISS_MS = 4000;
 const DEFAULT_OFFSET = 9;
-const POPPER_STYLE = { zIndex: 99999 };
 
 interface PopperProps {
 	/**
@@ -164,7 +163,7 @@ const Popper: FC< PopperProps > = ( {
 			open={ hasAnchorElement }
 			anchorEl={ anchorElement }
 			placement={ placement }
-			style={ POPPER_STYLE }
+			className="googlesitekit-popper-root"
 			// MUI Popper sets `role="tooltip"` by default. Clear it because this is a notification panel, not a tooltip.
 			role={ undefined }
 			modifiers={ {

assets/sass/components/analytics-4/site-goals/_googlesitekit-site-goals-selection-panel.scss

@@ -32,6 +32,12 @@
 			flex: 1 1 auto;
 			min-height: 0;
 			overflow-y: auto;
+
+			// When the user scrolls the panel, the thumbs feedback tooltip can slide
+			// up over the panel header or down over the footer. The panel content
+			// uses `position: relative` so it hides any part of the tooltip that
+			// passes its edges, and the tooltip stays inside.
+			position: relative;
 		}
 
 		.googlesitekit-site-goals-selection-panel__footer-container {

assets/sass/components/global/_googlesitekit-popper.scss

@@ -16,6 +16,16 @@
  * limitations under the License.
  */
 
+.googlesitekit-popper-root {
+	// The popper renders next to its anchor, not at the document root, so its
+	// z-index competes only with nearby elements in the same stacking context,
+	// not with the global `$z-index-sk-*` scale (9970 and up). This value sits
+	// above the Site Goals charts (8) and below the dashboard navigation (10),
+	// so the popper slides under the top nav on scroll instead of covering it.
+	// The entity header uses the same value for the same reason.
+	z-index: $z-index-sk-popper;
+}
+
 .googlesitekit-popper {
 	background-color: $c-surfaces-on-surface;
 	border-radius: 4px;

assets/sass/config/_variables.scss

@@ -339,6 +339,7 @@ $z-index-sk-side-sheet: 10000;
 $z-index-sk-side-sheet-overlay: 9990;
 $z-index-sk-header: 9980;
 $z-index-sk-overlay-notification: 9970;
+$z-index-sk-popper: 9;
 $z-index-sk-notice-snackbar: 9;
 
 // Start Authorize Application screen specific styles.