Merge branch 'carbon-design-system:main' into 4490_guidebanner-to-tsx-3

e2e/components/DataSpreadsheet/DataSpreadsheet-test.avt.e2e.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+import { expect, test } from '@playwright/test';
+import { visitStory } from '../../test-utils/storybook';
+
+test.describe('DataSpreadsheet @avt', () => {
+  test('@avt-default-state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'DataSpreadsheet',
+      id: 'ibm-products-components-data-spreadsheet-dataspreadsheet--data-spreadsheet',
+      globals: {
+        carbonTheme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'DataSpreadsheet @avt-default-state'
+    );
+  });
+});

packages/ibm-products/src/components/DataSpreadsheet/DataSpreadsheetHeader.tsx

@@ -178,6 +178,12 @@ export const DataSpreadsheetHeader = forwardRef(
           scrollContainer?.clientHeight &&
           scrollContainer?.scrollHeight > scrollContainer?.clientHeight;
         const scrollBarValue = hasScrollBar ? 0 : scrollBarSize;
+
+        // fix for a11y violation element_scrollable_tabbable
+        if (!scrollContainer?.getAttribute('tabIndex')) {
+          scrollContainer?.setAttribute('tabIndex', '0');
+        }
+
         setScrollBarSizeValue(scrollBarValue);
       }
     }, [cellSize, ref, scrollBarSize, previousState?.cellSize]);