fix: Stop Legacy chart oscllation in Board Components

src/container/__tests__/accessibility.test.tsx

@@ -0,0 +1,51 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Container from '../../../lib/components/container';
+import createWrapper from '../../../lib/components/test-utils/dom';
+
+import styles from '../../../lib/components/container/styles.css.js';
+
+function renderContainer(jsx: React.ReactElement) {
+  const { container } = render(jsx);
+  return { wrapper: createWrapper(container).findContainer()!, container };
+}
+
+describe('Accessibility: scrollable-region-focusable (fitHeight)', () => {
+  test('fitHeight=false renders no tabIndex, role, or aria-labelledby on the content wrapper', () => {
+    const { wrapper } = renderContainer(<Container header="Header">content</Container>);
+    const contentDiv = wrapper.findByClassName(styles.content)!.getElement();
+    expect(contentDiv).not.toHaveAttribute('tabindex');
+    expect(contentDiv).not.toHaveAttribute('role');
+    expect(contentDiv).not.toHaveAttribute('aria-labelledby');
+  });
+
+  test('fitHeight=true with no header: tabIndex=0, no role, no aria-labelledby', () => {
+    const { wrapper } = renderContainer(<Container fitHeight={true}>content</Container>);
+    const contentDiv = wrapper.findByClassName(styles['content-fit-height'])!.getElement();
+    expect(contentDiv).toHaveAttribute('tabindex', '0');
+    expect(contentDiv).not.toHaveAttribute('role');
+    expect(contentDiv).not.toHaveAttribute('aria-labelledby');
+  });
+
+  test('fitHeight=true with header: tabIndex=0, role="region", aria-labelledby resolves to header wrapper', () => {
+    const { wrapper, container } = renderContainer(
+      <Container fitHeight={true} header="My Header">
+        content
+      </Container>
+    );
+    const contentDiv = wrapper.findByClassName(styles['content-fit-height'])!.getElement();
+    expect(contentDiv).toHaveAttribute('tabindex', '0');
+    expect(contentDiv).toHaveAttribute('role', 'region');
+
+    const labelledById = contentDiv.getAttribute('aria-labelledby');
+    expect(labelledById).toBeTruthy();
+
+    // Verify the referenced element exists in the DOM and is the header wrapper
+    const headerElement = container.querySelector(`#${labelledById}`);
+    expect(headerElement).not.toBeNull();
+    expect(headerElement).toHaveClass(styles.header);
+  });
+});

src/container/internal.tsx

@@ -105,6 +105,7 @@ export default function InternalContainer({
     __fullPage && isRefresh && !isMobile
   );
   const contentId = useUniqueId();
+  const headerId = useUniqueId('awsui-container-header-');
 
   const hasDynamicHeight = isRefresh && variant === 'full-page';
 
@@ -162,6 +163,7 @@ export default function InternalContainer({
             <ContainerHeaderContextProvider>
               <StickyHeaderContext.Provider value={{ isStuck, isStuckAtBottom }}>
                 <div
+                  id={headerId}
                   className={clsx(
                     isRefresh && styles.refresh,
                     styles.header,
@@ -190,7 +192,14 @@ export default function InternalContainer({
               </StickyHeaderContext.Provider>
             </ContainerHeaderContextProvider>
           )}
-          <div className={clsx(styles.content, fitHeight && styles['content-fit-height'])}>
+          {/* tabIndex={0} makes the scrollable region keyboard-reachable (axe: scrollable-region-focusable).
+              role="region" + aria-labelledby is conditional on header presence because an unnamed region
+              (no accessible name) is worse than no landmark at all. */}
+          <div
+            className={clsx(styles.content, fitHeight && styles['content-fit-height'])}
+            {...(fitHeight && { tabIndex: 0 })}
+            {...(fitHeight && header && { role: 'region', 'aria-labelledby': headerId })}
+          >
             <div
               className={clsx(styles['content-inner'], testStyles['content-inner'], {
                 [styles['with-paddings']]: !disableContentPaddings,

src/container/styles.scss

@@ -256,12 +256,15 @@
   flex: 1;
   &-fit-height {
     overflow: auto;
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: minmax(0, 1fr);
   }
 }
 .content-inner {
-  flex: 1;
+  block-size: 100%;
+  min-block-size: 0;
+  min-inline-size: 0;
 
   &.with-paddings {
     padding-block: awsui.$space-scaled-l;