Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

Commit

Permalink
[terra-data-grid] Improve data grid auto scroll (#2148)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cm9361
cm9361 authored Apr 30, 2024
1 parent fbcbb5e commit 7399b61
Show file tree
Hide file tree
Showing 6 changed files with 44 additions and 52 deletions.
3 changes: 3 additions & 0 deletions packages/terra-data-grid/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@

## Unreleased

* Changed
* Limit scrolling on focus by moving the tab index to the first column header cell.

## 1.30.0 - (April 23, 2024)

* Changed
Expand Down
8 changes: 3 additions & 5 deletions packages/terra-data-grid/src/DataGrid.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -375,9 +375,9 @@ const DataGrid = forwardRef((props, ref) => {
*/
const moveFocusFromGrid = (moveForward) => {
// add all elements we want to include in our selection
const focusableElementSelector = 'a[href]:not([tabindex=\'-1\']), area[href]:not([tabindex=\'-1\']), input:not([disabled]):not([tabindex=\'-1\']), '
+ "select:not([disabled]):not([tabindex='-1']), textarea:not([disabled]):not([tabindex='-1']), button:not([disabled]):not([tabindex='-1']), "
+ "iframe:not([tabindex='-1']), [tabindex]:not([tabindex='-1']), [contentEditable=true]:not([tabindex='-1'])";
const focusableElementSelector = `#${id}, a[href]:not([tabindex='-1']), area[href]:not([tabindex='-1']), input:not([disabled]):not([tabindex='-1']), `
+ 'select:not([disabled]):not([tabindex=\'-1\']), textarea:not([disabled]):not([tabindex=\'-1\']), button:not([disabled]):not([tabindex=\'-1\']), '
+ 'iframe:not([tabindex=\'-1\']), [tabindex]:not([tabindex=\'-1\']), [contentEditable=true]:not([tabindex=\'-1\'])';

const focusableElements = [...document.body.querySelectorAll(`${focusableElementSelector}`)].filter(
element => !element.hasAttribute('disabled')
Expand Down Expand Up @@ -617,8 +617,6 @@ const DataGrid = forwardRef((props, ref) => {
return (
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
<div
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
tabIndex={0}
ref={gridContainerRef}
onKeyDown={handleKeyDown}
onMouseDown={handleMouseDown}
Expand Down
9 changes: 3 additions & 6 deletions packages/terra-data-grid/tests/jest/__snapshots__/DataGrid.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,6 @@ exports[`DataGrid verifies row selection column header selection 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
tabIndex={0}
>
<InjectIntl(Table)
columnHeaderHeight="2.5rem"
Expand Down Expand Up @@ -645,7 +644,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = `
<div
className="header-container"
role="button"
tabIndex={-1}
tabIndex={0}
>
<span
aria-hidden={true}
Expand Down Expand Up @@ -3786,7 +3785,6 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
tabIndex={0}
>
<InjectIntl(Table)
columnHeaderHeight="2.5rem"
Expand Down Expand Up @@ -4227,7 +4225,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and
<div
className="header-container"
role="button"
tabIndex={-1}
tabIndex={0}
>
<span
aria-hidden={true}
Expand Down Expand Up @@ -6555,7 +6553,6 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
tabIndex={0}
>
<InjectIntl(Table)
columnHeaderHeight="2.5rem"
Expand Down Expand Up @@ -6990,7 +6987,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = `
<div
className="header-container"
role="button"
tabIndex={-1}
tabIndex={0}
>
<span
aria-hidden={true}
Expand Down
54 changes: 18 additions & 36 deletions packages/terra-data-grid/tests/jest/__snapshots__/WorklistDataGrid.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -275,7 +275,6 @@ exports[`Row selection verifies Shift+Click enables row selection when row selec
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
tabIndex={0}
>
<InjectIntl(Table)
columnHeaderHeight="2.5rem"
Expand Down Expand Up @@ -720,7 +719,7 @@ exports[`Row selection verifies Shift+Click enables row selection when row selec
<div
className="header-container"
role="button"
tabIndex={-1}
tabIndex={0}
>
<span
aria-hidden={true}
Expand Down Expand Up @@ -3224,7 +3223,6 @@ exports[`Row selection verifies Shift+Click establishes anchor and selects row w
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
tabIndex={0}
>
<InjectIntl(Table)
columnHeaderHeight="2.5rem"
Expand Down Expand Up @@ -3683,7 +3681,7 @@ exports[`Row selection verifies Shift+Click establishes anchor and selects row w
"top": undefined,
}
}
tabIndex={-1}
tabIndex={0}
title="Terra.table.row-selection-header-display"
>
<div
Expand Down Expand Up @@ -7001,7 +6999,6 @@ exports[`Row selection verifies Shift+Click honors the anchor established by row
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
tabIndex={0}
>
<InjectIntl(Table)
columnHeaderHeight="2.5rem"
Expand Down Expand Up @@ -7460,7 +7457,7 @@ exports[`Row selection verifies Shift+Click honors the anchor established by row
"top": undefined,
}
}
tabIndex={-1}
tabIndex={0}
title="Terra.table.row-selection-header-display"
>
<div
Expand Down Expand Up @@ -10768,7 +10765,6 @@ exports[`Row selection verifies Shift+Space enables row selection when row selec
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
tabIndex={0}
>
<InjectIntl(Table)
columnHeaderHeight="2.5rem"
Expand Down Expand Up @@ -11213,7 +11209,7 @@ exports[`Row selection verifies Shift+Space enables row selection when row selec
<div
className="header-container"
role="button"
tabIndex={-1}
tabIndex={0}
>
<span
aria-hidden={true}
Expand Down Expand Up @@ -13717,7 +13713,6 @@ exports[`Row selection verifies Shift+Space establishes anchor and selects row i
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
tabIndex={0}
>
<InjectIntl(Table)
columnHeaderHeight="2.5rem"
Expand Down Expand Up @@ -14176,7 +14171,7 @@ exports[`Row selection verifies Shift+Space establishes anchor and selects row i
"top": undefined,
}
}
tabIndex={-1}
tabIndex={0}
title="Terra.table.row-selection-header-display"
>
<div
Expand Down Expand Up @@ -17494,7 +17489,6 @@ exports[`Row selection verifies Shift+Space honors the anchor established by row
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
tabIndex={0}
>
<InjectIntl(Table)
columnHeaderHeight="2.5rem"
Expand Down Expand Up @@ -17953,7 +17947,7 @@ exports[`Row selection verifies Shift+Space honors the anchor established by row
"top": undefined,
}
}
tabIndex={-1}
tabIndex={0}
title="Terra.table.row-selection-header-display"
>
<div
Expand Down Expand Up @@ -21295,7 +21289,6 @@ exports[`Row selection verifies callbacks when Shift+Down contracts the range of
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
tabIndex={0}
>
<InjectIntl(Table)
columnHeaderHeight="2.5rem"
Expand Down Expand Up @@ -21754,7 +21747,7 @@ exports[`Row selection verifies callbacks when Shift+Down contracts the range of
"top": undefined,
}
}
tabIndex={-1}
tabIndex={0}
title="Terra.table.row-selection-header-display"
>
<div
Expand Down Expand Up @@ -25056,7 +25049,6 @@ exports[`Row selection verifies callbacks when Shift+Down is used and row select
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
tabIndex={0}
>
<InjectIntl(Table)
columnHeaderHeight="2.5rem"
Expand Down Expand Up @@ -25515,7 +25507,7 @@ exports[`Row selection verifies callbacks when Shift+Down is used and row select
"top": undefined,
}
}
tabIndex={-1}
tabIndex={0}
title="Terra.table.row-selection-header-display"
>
<div
Expand Down Expand Up @@ -28837,7 +28829,6 @@ exports[`Row selection verifies callbacks when Shift+Down more than one. 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
tabIndex={0}
>
<InjectIntl(Table)
columnHeaderHeight="2.5rem"
Expand Down Expand Up @@ -29296,7 +29287,7 @@ exports[`Row selection verifies callbacks when Shift+Down more than one. 1`] = `
"top": undefined,
}
}
tabIndex={-1}
tabIndex={0}
title="Terra.table.row-selection-header-display"
>
<div
Expand Down Expand Up @@ -32614,7 +32605,6 @@ exports[`Row selection verifies multiple independent ranges can be created with
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
tabIndex={0}
>
<InjectIntl(Table)
columnHeaderHeight="2.5rem"
Expand Down Expand Up @@ -33073,7 +33063,7 @@ exports[`Row selection verifies multiple independent ranges can be created with
"top": undefined,
}
}
tabIndex={-1}
tabIndex={0}
title="Terra.table.row-selection-header-display"
>
<div
Expand Down Expand Up @@ -36371,7 +36361,6 @@ exports[`Row selection verifies only onRowSelect is called when mouse is used to
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
tabIndex={0}
>
<InjectIntl(Table)
columnHeaderHeight="2.5rem"
Expand Down Expand Up @@ -36830,7 +36819,7 @@ exports[`Row selection verifies only onRowSelect is called when mouse is used to
"top": undefined,
}
}
tabIndex={-1}
tabIndex={0}
title="Terra.table.row-selection-header-display"
>
<div
Expand Down Expand Up @@ -40128,7 +40117,6 @@ exports[`Row selection verifies only onRowSelect is called when mouse is used to
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
tabIndex={0}
>
<InjectIntl(Table)
columnHeaderHeight="2.5rem"
Expand Down Expand Up @@ -40587,7 +40575,7 @@ exports[`Row selection verifies only onRowSelect is called when mouse is used to
"top": undefined,
}
}
tabIndex={-1}
tabIndex={0}
title="Terra.table.row-selection-header-display"
>
<div
Expand Down Expand Up @@ -43885,7 +43873,6 @@ exports[`Row selection verifies only onRowSelect is called when space is used to
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
tabIndex={0}
>
<InjectIntl(Table)
columnHeaderHeight="2.5rem"
Expand Down Expand Up @@ -44344,7 +44331,7 @@ exports[`Row selection verifies only onRowSelect is called when space is used to
"top": undefined,
}
}
tabIndex={-1}
tabIndex={0}
title="Terra.table.row-selection-header-display"
>
<div
Expand Down Expand Up @@ -47642,7 +47629,6 @@ exports[`Row selection verifies only onRowSelect is called when space is used to
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
tabIndex={0}
>
<InjectIntl(Table)
columnHeaderHeight="2.5rem"
Expand Down Expand Up @@ -48101,7 +48087,7 @@ exports[`Row selection verifies only onRowSelect is called when space is used to
"top": undefined,
}
}
tabIndex={-1}
tabIndex={0}
title="Terra.table.row-selection-header-display"
>
<div
Expand Down Expand Up @@ -51397,7 +51383,6 @@ exports[`Row selection verifies row selection when space is pressed on a masked
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
tabIndex={0}
>
<InjectIntl(Table)
columnHeaderHeight="2.5rem"
Expand Down Expand Up @@ -51856,7 +51841,7 @@ exports[`Row selection verifies row selection when space is pressed on a masked
"top": undefined,
}
}
tabIndex={-1}
tabIndex={0}
title="Terra.table.row-selection-header-display"
>
<div
Expand Down Expand Up @@ -55152,7 +55137,6 @@ exports[`Row selection verifies row selection when space is pressed on a non-sel
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
tabIndex={0}
>
<InjectIntl(Table)
columnHeaderHeight="2.5rem"
Expand Down Expand Up @@ -55611,7 +55595,7 @@ exports[`Row selection verifies row selection when space is pressed on a non-sel
"top": undefined,
}
}
tabIndex={-1}
tabIndex={0}
title="Terra.table.row-selection-header-display"
>
<div
Expand Down Expand Up @@ -58886,7 +58870,6 @@ exports[`WorklistDataGrid verifies onCellSelect callback is not triggered when s
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
tabIndex={0}
>
<InjectIntl(Table)
columnHeaderHeight="2.5rem"
Expand Down Expand Up @@ -59331,7 +59314,7 @@ exports[`WorklistDataGrid verifies onCellSelect callback is not triggered when s
<div
className="header-container"
role="button"
tabIndex={-1}
tabIndex={0}
>
<span
aria-hidden={true}
Expand Down Expand Up @@ -61792,7 +61775,6 @@ exports[`WorklistDataGrid verifies onCellSelect callback is not triggered when s
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
tabIndex={0}
>
<InjectIntl(Table)
columnHeaderHeight="2.5rem"
Expand Down Expand Up @@ -62237,7 +62219,7 @@ exports[`WorklistDataGrid verifies onCellSelect callback is not triggered when s
<div
className="header-container"
role="button"
tabIndex={-1}
tabIndex={0}
>
<span
aria-hidden={true}
Expand Down
3 changes: 3 additions & 0 deletions packages/terra-table/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@

## Unreleased

* Changed
* Made the tabindex 0 for the first column header of grid components.

## 5.22.0 - (April 23, 2024)

* Changed
Expand Down
Loading

0 comments on commit 7399b61

Please sign in to comment.