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

[terra-data-grid] Resize handle communication fix #1878

Merged
merged 4 commits into from
Nov 8, 2023
Merged

[terra-data-grid] Resize handle communication fix #1878

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b341baf
[terra-data-grid] Resize Handle AT Fix
cm9361 Nov 7, 2023
f05d0db
Merge remote-tracking branch 'origin' into UXPLATFORM-9803
cm9361 Nov 7, 2023
ada6d07
Merge remote-tracking branch 'origin' into UXPLATFORM-9803
cm9361 Nov 8, 2023
12ad7ee
Merge fix into new Terra Table implementation.
cm9361 Nov 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/terra-data-grid/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
* Fixed
* Fixed the column header background color for the Orion Fusion theme.
* Fixed pinned column divider issue during keyboard resize.
* Fixed resize handle being communicated when non-header cell is focused.

* Added
* Added ability to select a range of cells to FlowsheetDataGrid.
Expand Down
16 changes: 2 additions & 14 deletions packages/terra-data-grid/src/subcomponents/ColumnResizeHandle.jsx
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that #1851 is merged, I think these changes should be done on the table subcomponents.

Original file line number Diff line number Diff line change
Expand Up @@ -95,8 +95,6 @@ const ColumnResizeHandle = (props) => {
// Ref variable for native resize handle element
const resizeHandleRef = useRef();

const [isAriaLabel, setIsAriaLabel] = useState(false);
const [isAriaValueText, setIsAriaValueText] = useState(false);
const [isNavigationEnabled, setNavigationEnabled] = useState(true);

useEffect(() => {
Expand Down Expand Up @@ -126,9 +124,6 @@ const ColumnResizeHandle = (props) => {
const fitToTable = () => {
// Update resize handle height to match parent table height
resizeHandleRef.current.style.height = `${height}px`;

// Assistive technologies should announce aria-label text once focused
setIsAriaLabel(true);
};

const onMouseLeave = () => {
Expand All @@ -147,17 +142,11 @@ const ColumnResizeHandle = (props) => {
// Lock focus into component
resizeHandleRef.current.focus();

// Assistive technologies should avoid announcing aria-label while focus locked, but announce aria-valueText instead
setIsAriaLabel(false);
setIsAriaValueText(true);
// Assistive technologies should make announcement for focus locked
columnContext.setColumnHeaderAriaLiveMessage(intl.formatMessage({ id: 'Terra.worklist-data-grid.cell-focus-trapped' }));
event.stopPropagation();
event.preventDefault();
break;
case KeyCode.KEY_ESCAPE:
// Assistive technologies should stop announcing aria-valueText once focus unlocked
setIsAriaValueText(false);
// Release focus lock
columnContext.setColumnHeaderAriaLiveMessage(intl.formatMessage({ id: 'Terra.worklist-data-grid.resume-navigation' }));
setNavigationEnabled(true);
Expand Down Expand Up @@ -191,7 +180,6 @@ const ColumnResizeHandle = (props) => {

const onBlur = () => {
setNavigationEnabled(true);
setIsAriaLabel(false);
setIsActive(false);
};

Expand All @@ -206,8 +194,8 @@ const ColumnResizeHandle = (props) => {
aria-valuemin={isActive ? minimumWidth : null}
aria-valuenow={isActive ? columnWidth : null}
aria-valuemax={isActive ? maximumWidth : null}
aria-label={isAriaLabel ? intl.formatMessage({ id: 'Terra.worklist-data-grid.resize-handle-template' }, { columnText }) : null}
aria-valuetext={isAriaValueText ? intl.formatMessage({ id: 'Terra.worklist-data-grid.resize-handle-value-text' }, { columnWidth }) : null}
aria-label={isActive && isNavigationEnabled ? intl.formatMessage({ id: 'Terra.worklist-data-grid.resize-handle-template' }, { columnText }) : null}
aria-valuetext={!isNavigationEnabled ? intl.formatMessage({ id: 'Terra.worklist-data-grid.resize-handle-value-text' }, { columnWidth }) : null}
style={{ height: `${height}px` }} // eslint-disable-line react/forbid-dom-props
onMouseDown={onMouseDown}
onMouseUp={onMouseUp}
Expand Down
9 changes: 0 additions & 9 deletions packages/terra-data-grid/tests/jest/ColumnResizeHandle.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,15 +99,6 @@ describe('ColumnResizeHandle', () => {
expect(wrapper.find('.resize-handle').props()['aria-valuenow']).toBe(200);
expect(wrapper.find('.resize-handle').props()['aria-valuemin']).toBe(60);
expect(wrapper.find('.resize-handle').props()['aria-valuemax']).toBe(300);
});

it('sets aria-label on focus', async () => {
const wrapper = mountWithIntl(
<ColumnResizeHandle />,
);

wrapper.find('.resize-handle').simulate('focus');

expect(wrapper.find('.resize-handle').props()['aria-label']).toBe('Terra.worklist-data-grid.resize-handle-template');
});

Expand Down
1 change: 1 addition & 0 deletions packages/terra-table/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
* Fixed the column header background color for the Orion Fusion theme.
* Fixed issue where column header cell was receiving tab focus instead of the button for table role.
* Fixed column header left border style.
* Fixed resize handle being communicated when non-header cell is focused.

## 5.1.1-alpha.0 - (October 25, 2023)

Expand Down
15 changes: 2 additions & 13 deletions packages/terra-table/src/subcomponents/ColumnResizeHandle.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,8 +109,6 @@ const ColumnResizeHandle = (props) => {
// Ref variable for native resize handle element
const resizeHandleRef = useRef();

const [isAriaLabel, setIsAriaLabel] = useState(false);
const [isAriaValueText, setIsAriaValueText] = useState(false);
const [isNavigationEnabled, setNavigationEnabled] = useState(true);

useEffect(() => {
Expand Down Expand Up @@ -138,9 +136,6 @@ const ColumnResizeHandle = (props) => {
const fitToTable = () => {
// Update resize handle height to match parent table height
resizeHandleRef.current.style.height = `${height}px`;

// Assistive technologies should announce aria-label text once focused
setIsAriaLabel(true);
};

const onMouseLeave = () => {
Expand All @@ -159,17 +154,12 @@ const ColumnResizeHandle = (props) => {
// Lock focus into component
resizeHandleRef.current.focus();

// Assistive technologies should avoid announcing aria-label while focus locked, but announce aria-valueText instead
setIsAriaLabel(false);
setIsAriaValueText(true);
// Assistive technologies should make announcement for focus locked
columnContext.setColumnHeaderAriaLiveMessage(intl.formatMessage({ id: 'Terra.table.cell-focus-trapped' }));
event.stopPropagation();
event.preventDefault();
break;
case KeyCode.KEY_ESCAPE:
// Assistive technologies should stop announcing aria-valueText once focus unlocked
setIsAriaValueText(false);
// Release focus lock
columnContext.setColumnHeaderAriaLiveMessage(intl.formatMessage({ id: 'Terra.table.resume-navigation' }));
setNavigationEnabled(true);
Expand Down Expand Up @@ -203,7 +193,6 @@ const ColumnResizeHandle = (props) => {

const onBlur = () => {
setNavigationEnabled(true);
setIsAriaLabel(false);
setIsActive(false);
};

Expand All @@ -218,8 +207,8 @@ const ColumnResizeHandle = (props) => {
aria-valuemin={isActive ? minimumWidth : null}
aria-valuenow={isActive ? columnWidth : null}
aria-valuemax={isActive ? maximumWidth : null}
aria-label={isAriaLabel ? intl.formatMessage({ id: 'Terra.table.resize-handle-template' }, { columnText }) : null}
aria-valuetext={isAriaValueText ? intl.formatMessage({ id: 'Terra.table.resize-handle-value-text' }, { columnWidth }) : null}
aria-label={isActive && isNavigationEnabled ? intl.formatMessage({ id: 'Terra.table.resize-handle-template' }, { columnText }) : null}
aria-valuetext={!isNavigationEnabled ? intl.formatMessage({ id: 'Terra.table.resize-handle-value-text' }, { columnWidth }) : null}
style={{ height: `${height}px` }} // eslint-disable-line react/forbid-dom-props
onMouseDown={onMouseDown}
onMouseUp={onMouseUp}
Expand Down
9 changes: 0 additions & 9 deletions packages/terra-table/tests/jest/ColumnResizeHandle.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,15 +99,6 @@ describe('ColumnResizeHandle', () => {
expect(wrapper.find('.resize-handle').props()['aria-valuenow']).toBe(200);
expect(wrapper.find('.resize-handle').props()['aria-valuemin']).toBe(60);
expect(wrapper.find('.resize-handle').props()['aria-valuemax']).toBe(300);
});

it('sets aria-label on focus', async () => {
const wrapper = mountWithIntl(
<ColumnResizeHandle />,
);

wrapper.find('.resize-handle').simulate('focus');

expect(wrapper.find('.resize-handle').props()['aria-label']).toBe('Terra.table.resize-handle-template');
});

Expand Down