diff --git a/e2e/components/DataSpreadsheet/DataSpreadsheet-test.avt.e2e.js b/e2e/components/DataSpreadsheet/DataSpreadsheet-test.avt.e2e.js new file mode 100644 index 0000000000..a15cd6214d --- /dev/null +++ b/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' + ); + }); +}); diff --git a/packages/ibm-products/src/components/DataSpreadsheet/DataSpreadsheetHeader.tsx b/packages/ibm-products/src/components/DataSpreadsheet/DataSpreadsheetHeader.tsx index 645f20ebbc..e4d293f14b 100644 --- a/packages/ibm-products/src/components/DataSpreadsheet/DataSpreadsheetHeader.tsx +++ b/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]);