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'); });