diff --git a/src/components/Table/Internal/OcTable.tsx b/src/components/Table/Internal/OcTable.tsx index f1932eafd..51e5e07f6 100644 --- a/src/components/Table/Internal/OcTable.tsx +++ b/src/components/Table/Internal/OcTable.tsx @@ -784,6 +784,10 @@ function OcTable( styles.tableContainer, { [styles.tableContainerHorizontallyScrollable]: horizontalScroll }, ])} + {...(horizontalScroll && { + role: 'region', + tabIndex: 0, + })} > {groupTableNode} diff --git a/src/components/Table/Internal/Tests/Scroll.test.js b/src/components/Table/Internal/Tests/Scroll.test.js index ad7c2149e..918a4704f 100644 --- a/src/components/Table/Internal/Tests/Scroll.test.js +++ b/src/components/Table/Internal/Tests/Scroll.test.js @@ -50,6 +50,46 @@ describe('Table.Scroll', () => { expect(wrapper.find('.table-body').props().style.overflow).toEqual('auto'); }); + it('renders with accessibility attributes when horizontally scrollable', () => { + const wrapper = mount(createTable({ scroll: { x: 200 } })); + const tableContainer = wrapper.find('.table-container').at(0); + + expect(tableContainer.prop('role')).toBe('region'); + expect(tableContainer.prop('tabIndex')).toBe(0); + }); + + it('does not render accessibility attributes when not horizontally scrollable', () => { + const wrapper = mount(createTable({ scroll: { y: 200 } })); + const tableContainer = wrapper.find('.table-container').at(0); + + expect(tableContainer.prop('role')).toBeUndefined(); + expect(tableContainer.prop('tabIndex')).toBeUndefined(); + }); + + it('does not render accessibility attributes when no scroll prop', () => { + const wrapper = mount(createTable()); + const tableContainer = wrapper.find('.table-container').at(0); + + expect(tableContainer.prop('role')).toBeUndefined(); + expect(tableContainer.prop('tabIndex')).toBeUndefined(); + }); + + it('renders with accessibility attributes when scroll.x is true', () => { + const wrapper = mount(createTable({ scroll: { x: true } })); + const tableContainer = wrapper.find('.table-container').at(0); + + expect(tableContainer.prop('role')).toBe('region'); + expect(tableContainer.prop('tabIndex')).toBe(0); + }); + + it('renders with accessibility attributes when both scroll.x and scroll.y are set', () => { + const wrapper = mount(createTable({ scroll: { x: 200, y: 200 } })); + const tableContainer = wrapper.find('.table-container').at(0); + + expect(tableContainer.prop('role')).toBe('region'); + expect(tableContainer.prop('tabIndex')).toBe(0); + }); + it('fire scroll event', () => { jest.useFakeTimers(); let scrollLeft = 0; diff --git a/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.expandable1.shot b/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.expandable1.shot index ae96db4ff..229268655 100644 --- a/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.expandable1.shot +++ b/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.expandable1.shot @@ -10,6 +10,8 @@ LoadedCheerio { Node { "attribs": Object { "class": "table-container table-container-horizontally-scrollable", + "role": "region", + "tabindex": "0", }, "children": Array [ Node { @@ -16709,9 +16711,13 @@ LoadedCheerio { "type": "tag", "x-attribsNamespace": Object { "class": undefined, + "role": undefined, + "tabindex": undefined, }, "x-attribsPrefix": Object { "class": undefined, + "role": undefined, + "tabindex": undefined, }, }, ], diff --git a/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.expandable2.shot b/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.expandable2.shot index ae96db4ff..229268655 100644 --- a/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.expandable2.shot +++ b/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.expandable2.shot @@ -10,6 +10,8 @@ LoadedCheerio { Node { "attribs": Object { "class": "table-container table-container-horizontally-scrollable", + "role": "region", + "tabindex": "0", }, "children": Array [ Node { @@ -16709,9 +16711,13 @@ LoadedCheerio { "type": "tag", "x-attribsNamespace": Object { "class": undefined, + "role": undefined, + "tabindex": undefined, }, "x-attribsPrefix": Object { "class": undefined, + "role": undefined, + "tabindex": undefined, }, }, ], diff --git a/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.renderfixedcol.shot b/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.renderfixedcol.shot index 56ffa9db7..ffaf34793 100644 --- a/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.renderfixedcol.shot +++ b/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.renderfixedcol.shot @@ -10,6 +10,8 @@ LoadedCheerio { Node { "attribs": Object { "class": "table-container table-container-horizontally-scrollable", + "role": "region", + "tabindex": "0", }, "children": Array [ Node { @@ -13406,9 +13408,13 @@ LoadedCheerio { "type": "tag", "x-attribsNamespace": Object { "class": undefined, + "role": undefined, + "tabindex": undefined, }, "x-attribsPrefix": Object { "class": undefined, + "role": undefined, + "tabindex": undefined, }, }, ], diff --git a/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.scrollunset1.shot b/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.scrollunset1.shot index 0862c539d..f7ec7b5d5 100644 --- a/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.scrollunset1.shot +++ b/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.scrollunset1.shot @@ -10,6 +10,8 @@ LoadedCheerio { Node { "attribs": Object { "class": "table-container table-container-horizontally-scrollable", + "role": "region", + "tabindex": "0", }, "children": Array [ Node { @@ -16709,9 +16711,13 @@ LoadedCheerio { "type": "tag", "x-attribsNamespace": Object { "class": undefined, + "role": undefined, + "tabindex": undefined, }, "x-attribsPrefix": Object { "class": undefined, + "role": undefined, + "tabindex": undefined, }, }, ], diff --git a/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.scrollunset2.shot b/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.scrollunset2.shot index 0862c539d..f7ec7b5d5 100644 --- a/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.scrollunset2.shot +++ b/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.scrollunset2.shot @@ -10,6 +10,8 @@ LoadedCheerio { Node { "attribs": Object { "class": "table-container table-container-horizontally-scrollable", + "role": "region", + "tabindex": "0", }, "children": Array [ Node { @@ -16709,9 +16711,13 @@ LoadedCheerio { "type": "tag", "x-attribsNamespace": Object { "class": undefined, + "role": undefined, + "tabindex": undefined, }, "x-attribsPrefix": Object { "class": undefined, + "role": undefined, + "tabindex": undefined, }, }, ], diff --git a/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.renderwithdata.shot b/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.renderwithdata.shot index 09c693e37..7997aab76 100644 --- a/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.renderwithdata.shot +++ b/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.renderwithdata.shot @@ -10,6 +10,8 @@ LoadedCheerio { Node { "attribs": Object { "class": "table-container table-container-horizontally-scrollable", + "role": "region", + "tabindex": "0", }, "children": Array [ Node { @@ -5402,9 +5404,13 @@ LoadedCheerio { "type": "tag", "x-attribsNamespace": Object { "class": undefined, + "role": undefined, + "tabindex": undefined, }, "x-attribsPrefix": Object { "class": undefined, + "role": undefined, + "tabindex": undefined, }, }, ], @@ -5525,6 +5531,8 @@ LoadedCheerio { Node { "attribs": Object { "class": "table-container table-container-horizontally-scrollable", + "role": "region", + "tabindex": "0", }, "children": Array [ Node { @@ -12866,9 +12874,13 @@ LoadedCheerio { "type": "tag", "x-attribsNamespace": Object { "class": undefined, + "role": undefined, + "tabindex": undefined, }, "x-attribsPrefix": Object { "class": undefined, + "role": undefined, + "tabindex": undefined, }, }, ], diff --git a/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.renderwithoutdata.shot b/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.renderwithoutdata.shot index 3c1b19a58..309222048 100644 --- a/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.renderwithoutdata.shot +++ b/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.renderwithoutdata.shot @@ -10,6 +10,8 @@ LoadedCheerio { Node { "attribs": Object { "class": "table-container table-container-horizontally-scrollable", + "role": "region", + "tabindex": "0", }, "children": Array [ Node { @@ -4358,9 +4360,13 @@ LoadedCheerio { "type": "tag", "x-attribsNamespace": Object { "class": undefined, + "role": undefined, + "tabindex": undefined, }, "x-attribsPrefix": Object { "class": undefined, + "role": undefined, + "tabindex": undefined, }, }, ], @@ -4481,6 +4487,8 @@ LoadedCheerio { Node { "attribs": Object { "class": "table-container table-container-horizontally-scrollable", + "role": "region", + "tabindex": "0", }, "children": Array [ Node { @@ -10430,9 +10438,13 @@ LoadedCheerio { "type": "tag", "x-attribsNamespace": Object { "class": undefined, + "role": undefined, + "tabindex": undefined, }, "x-attribsPrefix": Object { "class": undefined, + "role": undefined, + "tabindex": undefined, }, }, ], diff --git a/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.rtl.shot b/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.rtl.shot index 69bedf385..320e98940 100644 --- a/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.rtl.shot +++ b/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.rtl.shot @@ -10,6 +10,8 @@ LoadedCheerio { Node { "attribs": Object { "class": "table-container table-container-horizontally-scrollable", + "role": "region", + "tabindex": "0", }, "children": Array [ Node { @@ -5402,9 +5404,13 @@ LoadedCheerio { "type": "tag", "x-attribsNamespace": Object { "class": undefined, + "role": undefined, + "tabindex": undefined, }, "x-attribsPrefix": Object { "class": undefined, + "role": undefined, + "tabindex": undefined, }, }, ], diff --git a/src/components/Table/Internal/Tests/__snapshots__/Table.renderfixedcolheader.shot b/src/components/Table/Internal/Tests/__snapshots__/Table.renderfixedcolheader.shot index f81c5fed5..91b75bc74 100644 --- a/src/components/Table/Internal/Tests/__snapshots__/Table.renderfixedcolheader.shot +++ b/src/components/Table/Internal/Tests/__snapshots__/Table.renderfixedcolheader.shot @@ -10,6 +10,8 @@ LoadedCheerio { Node { "attribs": Object { "class": "table-container table-container-horizontally-scrollable", + "role": "region", + "tabindex": "0", }, "children": Array [ Node { @@ -7389,9 +7391,13 @@ LoadedCheerio { "type": "tag", "x-attribsNamespace": Object { "class": undefined, + "role": undefined, + "tabindex": undefined, }, "x-attribsPrefix": Object { "class": undefined, + "role": undefined, + "tabindex": undefined, }, }, ], diff --git a/src/components/Table/Internal/Tests/__snapshots__/Table.scrollcontent.shot b/src/components/Table/Internal/Tests/__snapshots__/Table.scrollcontent.shot index e8cec0789..87fddf065 100644 --- a/src/components/Table/Internal/Tests/__snapshots__/Table.scrollcontent.shot +++ b/src/components/Table/Internal/Tests/__snapshots__/Table.scrollcontent.shot @@ -10,6 +10,8 @@ LoadedCheerio { Node { "attribs": Object { "class": "table-container table-container-horizontally-scrollable", + "role": "region", + "tabindex": "0", }, "children": Array [ Node { @@ -877,9 +879,13 @@ LoadedCheerio { "type": "tag", "x-attribsNamespace": Object { "class": undefined, + "role": undefined, + "tabindex": undefined, }, "x-attribsPrefix": Object { "class": undefined, + "role": undefined, + "tabindex": undefined, }, }, ], diff --git a/src/components/Table/Tests/__snapshots__/Table.fixselectionexpandonleft.shot b/src/components/Table/Tests/__snapshots__/Table.fixselectionexpandonleft.shot index 88ab03cfa..2e6be9883 100644 --- a/src/components/Table/Tests/__snapshots__/Table.fixselectionexpandonleft.shot +++ b/src/components/Table/Tests/__snapshots__/Table.fixselectionexpandonleft.shot @@ -15,6 +15,8 @@ LoadedCheerio { Node { "attribs": Object { "class": "table-container table-container-horizontally-scrollable", + "role": "region", + "tabindex": "0", }, "children": Array [ Node { @@ -17410,9 +17412,13 @@ LoadedCheerio { "type": "tag", "x-attribsNamespace": Object { "class": undefined, + "role": undefined, + "tabindex": undefined, }, "x-attribsPrefix": Object { "class": undefined, + "role": undefined, + "tabindex": undefined, }, }, ], diff --git a/src/components/Table/Tests/__snapshots__/Table.fixselectionleft.shot b/src/components/Table/Tests/__snapshots__/Table.fixselectionleft.shot index f4dae0589..630f73d21 100644 --- a/src/components/Table/Tests/__snapshots__/Table.fixselectionleft.shot +++ b/src/components/Table/Tests/__snapshots__/Table.fixselectionleft.shot @@ -15,6 +15,8 @@ LoadedCheerio { Node { "attribs": Object { "class": "table-container table-container-horizontally-scrollable", + "role": "region", + "tabindex": "0", }, "children": Array [ Node { @@ -17410,9 +17412,13 @@ LoadedCheerio { "type": "tag", "x-attribsNamespace": Object { "class": undefined, + "role": undefined, + "tabindex": undefined, }, "x-attribsPrefix": Object { "class": undefined, + "role": undefined, + "tabindex": undefined, }, }, ], diff --git a/src/components/Table/Tests/__snapshots__/Table.fixselectionwithcols.shot b/src/components/Table/Tests/__snapshots__/Table.fixselectionwithcols.shot index 3d46bcf71..8deb5215a 100644 --- a/src/components/Table/Tests/__snapshots__/Table.fixselectionwithcols.shot +++ b/src/components/Table/Tests/__snapshots__/Table.fixselectionwithcols.shot @@ -15,6 +15,8 @@ LoadedCheerio { Node { "attribs": Object { "class": "table-container table-container-horizontally-scrollable", + "role": "region", + "tabindex": "0", }, "children": Array [ Node { @@ -17536,9 +17538,13 @@ LoadedCheerio { "type": "tag", "x-attribsNamespace": Object { "class": undefined, + "role": undefined, + "tabindex": undefined, }, "x-attribsPrefix": Object { "class": undefined, + "role": undefined, + "tabindex": undefined, }, }, ], diff --git a/src/components/Table/Tests/__snapshots__/empty.renderfixedcols.shot b/src/components/Table/Tests/__snapshots__/empty.renderfixedcols.shot index 3875f2c8f..879b62ba8 100644 --- a/src/components/Table/Tests/__snapshots__/empty.renderfixedcols.shot +++ b/src/components/Table/Tests/__snapshots__/empty.renderfixedcols.shot @@ -15,6 +15,8 @@ LoadedCheerio { Node { "attribs": Object { "class": "table-container table-container-horizontally-scrollable", + "role": "region", + "tabindex": "0", }, "children": Array [ Node { @@ -1288,9 +1290,13 @@ LoadedCheerio { "type": "tag", "x-attribsNamespace": Object { "class": undefined, + "role": undefined, + "tabindex": undefined, }, "x-attribsPrefix": Object { "class": undefined, + "role": undefined, + "tabindex": undefined, }, }, ],