{
// Ref variable for native resize handle element
const resizeHandleRef = useRef();
+ // Ref variable to prevent active state on mouse drag
+ const handleFocus = useRef(true);
const [isNavigationEnabled, setNavigationEnabled] = useState(true);
@@ -118,6 +120,8 @@ const ColumnResizeHandle = (props) => {
}, [isActive]);
const onMouseDown = (event) => {
+ // Prevent onFocus from being fired when triggered via onMouseDown
+ handleFocus.current = false;
// Set focus to resize handle DOM element
resizeHandleRef.current.focus();
@@ -138,6 +142,13 @@ const ColumnResizeHandle = (props) => {
resizeHandleRef.current.style.height = `${height}px`;
};
+ const onFocus = () => {
+ fitToTable();
+ if (handleFocus.current) {
+ setIsActive(true);
+ }
+ };
+
const onMouseLeave = () => {
if (document.activeElement !== resizeHandleRef.current) {
resizeHandleRef.current.style.height = '100%';
@@ -194,6 +205,7 @@ const ColumnResizeHandle = (props) => {
const onBlur = () => {
setNavigationEnabled(true);
setIsActive(false);
+ handleFocus.current = true;
};
return (
@@ -216,7 +228,7 @@ const ColumnResizeHandle = (props) => {
onMouseLeave={onMouseLeave}
onKeyDown={onKeyDown}
onClick={onClick}
- onFocus={fitToTable}
+ onFocus={onFocus}
onBlur={onBlur}
className={cx('resize-handle', theme.className, { 'resize-handle-selected': !isNavigationEnabled })}
/>
diff --git a/packages/terra-table/tests/jest/ColumnHeaderCell.test.jsx b/packages/terra-table/tests/jest/ColumnHeaderCell.test.jsx
index 2364f54521c..b3fbac73fda 100644
--- a/packages/terra-table/tests/jest/ColumnHeaderCell.test.jsx
+++ b/packages/terra-table/tests/jest/ColumnHeaderCell.test.jsx
@@ -45,7 +45,6 @@ describe('ColumnHeaderCell', () => {
expect(columnHeader.props().role).toBe('columnheader');
expect(columnHeader.props().scope).toBe('col');
expect(columnHeader.props().tabIndex).toEqual(undefined);
- expect(columnHeader.props().style.width).toBe('100px');
expect(columnHeader.props().style.height).toBe('150px');
expect(columnHeader.props().title).toBe('Vitals');
@@ -81,7 +80,6 @@ describe('ColumnHeaderCell', () => {
expect(columnHeader.props().role).toBe('columnheader');
expect(columnHeader.props().scope).toBe('col');
expect(columnHeader.props().tabIndex).toEqual(undefined);
- expect(columnHeader.props().style.width).toBe('100px');
expect(columnHeader.props().style.height).toBe('150px');
expect(columnHeader.props().title).toBe('Vitals');
@@ -118,7 +116,6 @@ describe('ColumnHeaderCell', () => {
expect(columnHeader.props().role).toBe('columnheader');
expect(columnHeader.props().scope).toBe('col');
expect(columnHeader.props().tabIndex).toEqual(undefined);
- expect(columnHeader.props().style.width).toBe('100px');
expect(columnHeader.props().style.height).toBe('150px');
expect(columnHeader.props().title).toBe('Vitals');
@@ -155,7 +152,6 @@ describe('ColumnHeaderCell', () => {
expect(columnHeader.props().role).toBe('columnheader');
expect(columnHeader.props().scope).toBe('col');
expect(columnHeader.props().tabIndex).toEqual(undefined);
- expect(columnHeader.props().style.width).toBe('100px');
expect(columnHeader.props().style.height).toBe('150px');
expect(columnHeader.props().title).toBe('Vitals');
@@ -193,7 +189,6 @@ describe('ColumnHeaderCell', () => {
expect(columnHeader.props().role).toBe('columnheader');
expect(columnHeader.props().scope).toBe('col');
expect(columnHeader.props().tabIndex).toEqual(undefined);
- expect(columnHeader.props().style.width).toBe('100px');
expect(columnHeader.props().style.height).toBe('150px');
expect(columnHeader.props().title).toBe('Vitals');
@@ -236,7 +231,6 @@ describe('ColumnHeaderCell', () => {
expect(columnHeader.props().scope).toBe('col');
expect(columnHeader.props().tabIndex).toEqual(undefined);
expect(columnHeader.props().onMouseDown).toBeDefined();
- expect(columnHeader.props().style.width).toBe('100px');
expect(columnHeader.props().style.height).toBe('150px');
expect(columnHeader.props().title).toBe('Vitals');
@@ -280,7 +274,6 @@ describe('ColumnHeaderCell', () => {
expect(columnHeader.props().scope).toBe('col');
expect(columnHeader.props().tabIndex).toEqual(undefined);
expect(columnHeader.props().onMouseDown).toBeUndefined();
- expect(columnHeader.props().style.width).toBe('100px');
expect(columnHeader.props().style.height).toBe('150px');
expect(columnHeader.props().title).toBe('Vitals');
diff --git a/packages/terra-table/tests/jest/ColumnResizeHandle.test.jsx b/packages/terra-table/tests/jest/ColumnResizeHandle.test.jsx
index c748f33b1a7..817aa9f0f95 100644
--- a/packages/terra-table/tests/jest/ColumnResizeHandle.test.jsx
+++ b/packages/terra-table/tests/jest/ColumnResizeHandle.test.jsx
@@ -15,6 +15,11 @@ afterAll(() => {
});
describe('ColumnResizeHandle', () => {
+ const mockSetIsActive = jest.fn();
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
it('renders a default column resize handle when isActive is false', () => {
const mockResizeMouseDown = jest.fn();
const mockResizeMouseUp = jest.fn();
@@ -31,6 +36,7 @@ describe('ColumnResizeHandle', () => {
maximumWidth={300}
onResizeMouseUp={mockResizeMouseUp}
onResizeMouseDown={mockResizeMouseDown}
+ setIsActive={mockSetIsActive}
/>,
);
@@ -51,6 +57,7 @@ describe('ColumnResizeHandle', () => {
const wrapper = mountWithIntl(
,
);
const resizeHandle = wrapper.find('.resize-handle');
@@ -65,6 +72,9 @@ describe('ColumnResizeHandle', () => {
// Validate mock function was called from simulated onMouseDown event
expect(mockResizeMouseDown).toHaveBeenCalled();
+
+ // Do not invoke the setActive function when triggered via mouseDown
+ expect(mockSetIsActive).not.toHaveBeenCalled();
});
it('executes the callback function on MouseUp', () => {
@@ -72,6 +82,7 @@ describe('ColumnResizeHandle', () => {
const wrapper = mountWithIntl(
,
);
const resizeHandle = wrapper.find('.resize-handle');
@@ -80,6 +91,9 @@ describe('ColumnResizeHandle', () => {
// Validate mock function was called from simulated onMouseDown event
expect(mockResizeMouseUp).toHaveBeenCalled();
+
+ // Do not invoke the setActive function when triggered via mouseDown
+ expect(mockSetIsActive).not.toHaveBeenCalled();
});
it('sets widths if isActive is set to be true', () => {
@@ -105,13 +119,16 @@ describe('ColumnResizeHandle', () => {
it('sets the appropriate prop values on space keydown', () => {
const wrapper = mountWithIntl(
-
+
,
);
wrapper.find('.resize-handle').simulate('focus');
wrapper.find('.resize-handle').simulate('keydown', { keyCode: 32 }); // space
+ // Validate setIsActive is called when the element is focused from non-mouse events.
+ expect(mockSetIsActive).toHaveBeenCalled();
+
expect(wrapper.find('.resize-handle').props()['aria-label']).toBe(null);
expect(wrapper.find('.resize-handle').props()['aria-valuetext']).toBe('Terra.table.resize-handle-value-text');
expect(wrapper.find('.resize-handle').props().role).toBe('slider');
@@ -120,13 +137,16 @@ describe('ColumnResizeHandle', () => {
it('sets the appropriate prop values on enter keydown', () => {
const wrapper = mountWithIntl(
-
+
,
);
wrapper.find('.resize-handle').simulate('focus');
wrapper.find('.resize-handle').simulate('keydown', { keyCode: 13 }); // enter
+ // Validate setIsActive is called when the element is focused from non-mouse events.
+ expect(mockSetIsActive).toHaveBeenCalled();
+
expect(wrapper.find('.resize-handle').props()['aria-label']).toBe(null);
expect(wrapper.find('.resize-handle').props()['aria-valuetext']).toBe('Terra.table.resize-handle-value-text');
expect(wrapper.find('.resize-handle').props().role).toBe('slider');
@@ -154,6 +174,7 @@ describe('ColumnResizeHandle', () => {
columnIndex={1}
columnResizeIncrement={10}
onResizeHandleChange={mockResizeHandleChange}
+ setIsActive={mockSetIsActive}
/>
,
);
@@ -163,6 +184,9 @@ describe('ColumnResizeHandle', () => {
wrapper.find('.resize-handle').simulate('keydown', { keyCode: 39 }); // arrow right
expect(mockResizeHandleChange).toHaveBeenCalledWith(1, 10);
+
+ // Validate setIsActive is called when the element is focused from non-mouse events.
+ expect(mockSetIsActive).toHaveBeenCalled();
});
it('increases column width with left arrow', () => {
@@ -173,6 +197,7 @@ describe('ColumnResizeHandle', () => {
columnIndex={1}
columnResizeIncrement={10}
onResizeHandleChange={mockResizeHandleChange}
+ setIsActive={mockSetIsActive}
/>
,
);
@@ -182,5 +207,7 @@ describe('ColumnResizeHandle', () => {
wrapper.find('.resize-handle').simulate('keydown', { keyCode: 37 }); // arrow left
expect(mockResizeHandleChange).toHaveBeenCalledWith(1, -10);
+ // Validate setIsActive is called when the element is focused from non-mouse events.
+ expect(mockSetIsActive).toHaveBeenCalled();
});
});
diff --git a/packages/terra-table/tests/jest/__snapshots__/ColumnHeaderCell.test.jsx.snap b/packages/terra-table/tests/jest/__snapshots__/ColumnHeaderCell.test.jsx.snap
index 741a98edcaf..09684934378 100644
--- a/packages/terra-table/tests/jest/__snapshots__/ColumnHeaderCell.test.jsx.snap
+++ b/packages/terra-table/tests/jest/__snapshots__/ColumnHeaderCell.test.jsx.snap
@@ -63,7 +63,6 @@ exports[`ColumnHeaderCell renders a pinned column header cell 1`] = `
Object {
"height": "150px",
"left": 0,
- "width": "100px",
}
}
title="Vitals"
diff --git a/packages/terra-table/tests/jest/__snapshots__/ColumnResizeHandle.test.jsx.snap b/packages/terra-table/tests/jest/__snapshots__/ColumnResizeHandle.test.jsx.snap
index 31071a3ea0f..2fc7b49e7cb 100644
--- a/packages/terra-table/tests/jest/__snapshots__/ColumnResizeHandle.test.jsx.snap
+++ b/packages/terra-table/tests/jest/__snapshots__/ColumnResizeHandle.test.jsx.snap
@@ -38,6 +38,7 @@ exports[`ColumnResizeHandle renders a default column resize handle when isActive
minimumWidth={60}
onResizeMouseDown={[MockFunction]}
onResizeMouseUp={[MockFunction]}
+ setIsActive={[MockFunction]}
>
{
Terra.validates.element('row-single-selection-cell-click', { selector: rowSelectionTableSelector });
});
});
+
+ describe('Resizable Table', () => {
+ const resizableColumnsTableSelector = '#resizable-columns-table';
+
+ beforeEach(() => {
+ browser.url('/raw/tests/cerner-terra-framework-docs/table/resizable-columns-table');
+ });
+
+ it('focuses on the column resize handle', () => {
+ browser.keys(['Tab', 'Tab']);
+ Terra.validates.element('column-resize-handle-focused', { selector: resizableColumnsTableSelector });
+ });
+
+ it('increases the column width with the keyboard in resize mode', () => {
+ // disabling the 'aria-input-field-name' rule as it is dynamically removed
+ // for the keyboard resize workflow and this causes an accessibility failure
+ const options = {
+ selector: resizableColumnsTableSelector,
+ rules: { 'aria-input-field-name': { enabled: false } },
+ };
+
+ browser.keys(['Tab', 'Tab', 'Space', 'ArrowRight', 'ArrowRight']);
+ expect($('tr.column-header-row th:first-child').getCSSProperty('width').parsed.value).toBe(220);
+ Terra.validates.element('column-resize-increase-keyboard', options);
+ });
+
+ it('decreases the column width with the keyboard in resize mode', () => {
+ // disabling the 'aria-input-field-name' rule as it is dynamically removed
+ // for the keyboard resize workflow and this causes an accessibility failure
+ const options = {
+ selector: resizableColumnsTableSelector,
+ rules: { 'aria-input-field-name': { enabled: false } },
+ };
+
+ browser.keys(['Tab', 'Tab', 'Space', 'ArrowLeft', 'ArrowLeft']);
+ expect($('tr.column-header-row th:first-child').getCSSProperty('width').parsed.value).toBe(180);
+ Terra.validates.element('column-resize-decrease-keyboard', options);
+ });
+
+ it('exits out of resize mode after hitting the escape key', () => {
+ browser.keys(['Tab', 'Tab', 'Space', 'ArrowLeft', 'ArrowLeft', 'Escape', 'Tab', 'Tab']);
+ expect($('tr.column-header-row th:first-child').getCSSProperty('width').parsed.value).toBe(180);
+ expect(browser.$('tr.column-header-row th:first-child div[class*=resize-handle]').isFocused()).toBe(false);
+ expect(browser.$('tr.column-header-row th:nth-child(2) div[class*=resize-handle]').isFocused()).toBe(true);
+ });
+
+ it('resumes column focus after tabbing out and back into the table', () => {
+ browser.keys([...Array(8).fill('Tab'), 'Shift', 'Tab']); // tab until out of table, and then back in.
+
+ expect(browser.$('tr.column-header-row th:nth-child(4) div[class*=resize-handle]').isFocused()).toBe(true);
+ });
+
+ it('does not focus on column resize handle if it is disabled', () => {
+ browser.keys([...Array(7).fill('Tab')]); // We skip over the column that has column resize disabled.
+
+ expect(browser.$('tr.column-header-row th:nth-child(4) div[class*=resize-handle]').isFocused()).toBe(true);
+ });
+ });
});