diff --git a/packages/terra-data-grid/CHANGELOG.md b/packages/terra-data-grid/CHANGELOG.md
index 1f0e9ec038f..cd6ee748f1b 100644
--- a/packages/terra-data-grid/CHANGELOG.md
+++ b/packages/terra-data-grid/CHANGELOG.md
@@ -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.
diff --git a/packages/terra-data-grid/src/subcomponents/ColumnResizeHandle.jsx b/packages/terra-data-grid/src/subcomponents/ColumnResizeHandle.jsx
index e290e55e037..082a2affd05 100644
--- a/packages/terra-data-grid/src/subcomponents/ColumnResizeHandle.jsx
+++ b/packages/terra-data-grid/src/subcomponents/ColumnResizeHandle.jsx
@@ -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(() => {
@@ -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 = () => {
@@ -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);
@@ -191,7 +180,6 @@ const ColumnResizeHandle = (props) => {
const onBlur = () => {
setNavigationEnabled(true);
- setIsAriaLabel(false);
setIsActive(false);
};
@@ -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}
diff --git a/packages/terra-data-grid/tests/jest/ColumnResizeHandle.test.jsx b/packages/terra-data-grid/tests/jest/ColumnResizeHandle.test.jsx
index efbfb1b686e..1ec4bd69bab 100644
--- a/packages/terra-data-grid/tests/jest/ColumnResizeHandle.test.jsx
+++ b/packages/terra-data-grid/tests/jest/ColumnResizeHandle.test.jsx
@@ -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(
- ,
- );
-
- wrapper.find('.resize-handle').simulate('focus');
-
expect(wrapper.find('.resize-handle').props()['aria-label']).toBe('Terra.worklist-data-grid.resize-handle-template');
});
diff --git a/packages/terra-table/CHANGELOG.md b/packages/terra-table/CHANGELOG.md
index 89e0de08773..8f5ae017ee9 100644
--- a/packages/terra-table/CHANGELOG.md
+++ b/packages/terra-table/CHANGELOG.md
@@ -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)
diff --git a/packages/terra-table/src/subcomponents/ColumnResizeHandle.jsx b/packages/terra-table/src/subcomponents/ColumnResizeHandle.jsx
index 8a2989622a3..f90abb18114 100644
--- a/packages/terra-table/src/subcomponents/ColumnResizeHandle.jsx
+++ b/packages/terra-table/src/subcomponents/ColumnResizeHandle.jsx
@@ -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(() => {
@@ -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 = () => {
@@ -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);
@@ -203,7 +193,6 @@ const ColumnResizeHandle = (props) => {
const onBlur = () => {
setNavigationEnabled(true);
- setIsAriaLabel(false);
setIsActive(false);
};
@@ -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}
diff --git a/packages/terra-table/tests/jest/ColumnResizeHandle.test.jsx b/packages/terra-table/tests/jest/ColumnResizeHandle.test.jsx
index bcf76e7b105..c748f33b1a7 100644
--- a/packages/terra-table/tests/jest/ColumnResizeHandle.test.jsx
+++ b/packages/terra-table/tests/jest/ColumnResizeHandle.test.jsx
@@ -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(
- ,
- );
-
- wrapper.find('.resize-handle').simulate('focus');
-
expect(wrapper.find('.resize-handle').props()['aria-label']).toBe('Terra.table.resize-handle-template');
});