chore: Applayout manages the global scroll-padding-top (#3691)

Author: orangevolon

pages/app-layout/global-scroll-padding.page.tsx

@@ -0,0 +1,39 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import AppLayout from '~components/app-layout';
+import Button from '~components/button';
+import Header from '~components/header';
+import SpaceBetween from '~components/space-between';
+
+import ScreenshotArea from '../utils/screenshot-area';
+import ariaLabels from './utils/labels';
+
+export default function () {
+  return (
+    <ScreenshotArea gutters={false}>
+      <AppLayout
+        ariaLabels={ariaLabels}
+        navigationHide={true}
+        content={
+          <div style={{ height: '200vh', border: '1px solid red' }}>
+            <div style={{ marginBlockEnd: '1rem' }}>
+              <Header data-testid="header" variant="h1">
+                Focusable components
+              </Header>
+            </div>
+            <SpaceBetween direction="vertical" size="xxl">
+              <Button data-testid="button-1" ariaLabel="Button 1">
+                Button 1
+              </Button>
+              <Button data-testid="button-2" ariaLabel="Button 2">
+                Button 2
+              </Button>
+            </SpaceBetween>
+          </div>
+        }
+      />
+    </ScreenshotArea>
+  );
+}

src/app-layout/__integ__/awsui-applayout.test.ts

@@ -199,6 +199,38 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as Theme[])('%s', theme
     })
   );
 
+  (theme !== 'classic' ? test : test.skip)(
+    'element should not be hidden under the sticky header when focused',
+    setupTest({ pageName: 'global-scroll-padding' }, async page => {
+      // Getting the header offset depending on the theme
+      let headerOffset = (await page.getBoundingBox('#h')).height;
+      if (theme === 'refresh-toolbar') {
+        headerOffset += (await page.getBoundingBox(wrapper.findToolbar().toSelector())).height;
+      }
+
+      // Set the focus to the second button
+      await page.click(wrapper.findContentRegion().findHeader().toSelector());
+      await page.keys('Tab');
+      await page.keys('Tab');
+      const secondButtonSelector = wrapper.findContentRegion().findButton('[data-testid="button-2"]').toSelector();
+      await expect(page.isFocused(secondButtonSelector)).resolves.toBe(true);
+
+      // Scroll to a point where half of the first button is visible
+      const firstButtonSelector = wrapper.findContentRegion().findButton('[data-testid="button-1"]').toSelector();
+      const firstButtonBoundingBox = await page.getBoundingBox(firstButtonSelector);
+      const firstButtonTopOffset = firstButtonBoundingBox.top - headerOffset;
+      const firstButtonHalfOffset = firstButtonTopOffset + firstButtonBoundingBox.height / 2;
+      await page.windowScrollTo({ top: firstButtonHalfOffset });
+
+      // Set the focus back to the first button
+      await page.keys(['Shift', 'Tab']);
+      await expect(page.isFocused(firstButtonSelector)).resolves.toBe(true);
+
+      // Assert that whole of the first button is visible and not only the half of it
+      await expect(page.getWindowScroll()).resolves.toEqual({ top: firstButtonTopOffset, left: 0 });
+    })
+  );
+
   testIf(theme === 'refresh-toolbar')(
     'should keep header visible and in position while scrolling',
     setupTest({ pageName: 'multi-layout-with-table-sticky-header' }, async page => {

src/app-layout/__tests__/main.test.tsx

@@ -117,6 +117,21 @@ describeEachAppLayout({ themes: ['classic', 'refresh-toolbar'], sizes: ['desktop
       await waitFor(() => expect(wrapper.getElement()).toHaveStyle({ minBlockSize: 'calc(100vh - 75px)' }));
     });
 
+    (theme !== 'classic' ? test : test.skip)('should set the header height to the scrolling element', () => {
+      Object.defineProperty(document, 'scrollingElement', { value: document.body });
+      renderComponent(
+        <div id="b">
+          <div style={{ height: 40 }} id="h" />
+          <AppLayout />
+        </div>
+      );
+
+      // Note: The toolbar height in jsdom environment is calculated as `0`.
+      // For this reason both `refresh` and `refresh-toolbar` only consider the height of `#h` element which is `40px`.
+      // We have covered this case with real values in integration tests.
+      expect(document.scrollingElement).toHaveStyle('scroll-padding-block-start: 40px');
+    });
+
     test('should use alternative header and footer selector', async () => {
       const { wrapper } = renderComponent(
         <>

src/app-layout/utils/use-global-scroll-padding.ts

@@ -0,0 +1,14 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useEffect } from 'react';
+
+// Sets scroll padding to the scrolling element (`html` or `body`).
+// This prevents the focused element to be hidden under the sticky headers.
+export function useGlobalScrollPadding(headerHeight: number) {
+  useEffect(() => {
+    const scrollingElement = document.scrollingElement;
+    if (scrollingElement instanceof HTMLElement) {
+      scrollingElement.style.scrollPaddingBlockStart = `${headerHeight}px`;
+    }
+  }, [headerHeight]);
+}

src/app-layout/visual-refresh-toolbar/index.tsx

@@ -17,6 +17,7 @@ import { AppLayoutProps } from '../interfaces';
 import { SplitPanelProviderProps } from '../split-panel';
 import { MIN_DRAWER_SIZE, OnChangeParams, useDrawers } from '../utils/use-drawers';
 import { useFocusControl, useMultipleFocusControl } from '../utils/use-focus-control';
+import { useGlobalScrollPadding } from '../utils/use-global-scroll-padding';
 import { useSplitPanelFocusControl } from '../utils/use-split-panel-focus-control';
 import { ActiveDrawersContext } from '../utils/visibility-context';
 import {
@@ -313,6 +314,8 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
       stickyNotifications: resolvedStickyNotifications,
     });
 
+    useGlobalScrollPadding(verticalOffsets.header);
+
     const appLayoutInternals: AppLayoutInternals = {
       ariaLabels: ariaLabelsWithDrawers,
       headerVariant,

src/app-layout/visual-refresh/layout.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import clsx from 'clsx';
 
 import customCssProps from '../../internal/generated/custom-css-properties';
+import { useGlobalScrollPadding } from '../utils/use-global-scroll-padding';
 import { useAppLayoutInternals } from './context';
 
 import testutilStyles from '../test-classes/styles.css.js';
@@ -46,6 +47,8 @@ export default function Layout({ children }: LayoutProps) {
     splitPanelDisplayed,
   } = useAppLayoutInternals();
 
+  useGlobalScrollPadding(headerHeight);
+
   // Determine the first content child so the gap will vertically align with the trigger buttons
   const contentFirstChild = getContentFirstChild(breadcrumbs, contentHeader, hasNotificationsContent, isMobile);