Cell auto focus property

[cm9361]

Summary

What was changed:
The isAutoFocusEnabled property was introduced to control whether cell with a single focusable element that is a button or hyperlink gets focus automatically during cell navigation.

Why it was changed:

Testing

This change was tested using:

• WDIO
• Jest
• Visual testing (please attach a screenshot or recording)
• Other (please describe below)
• No tests are needed

Reviews

In addition to engineering reviews, this PR needs:

• UX review
• Accessibility review
• Functional review

Additional Details

This PR resolves:

UXPLATFORM-XXXX

---

Thank you for contributing to Terra.
@cerner/terra

[sdadn]

We may need to update these wdio tests to account for the new prop.

terra-framework/packages/terra-data-grid/tests/wdio/data-grid-spec.js

Lines 283 to 296 in 26f559f

	it('clicks the button instead of diving in if it is the only component in the cell', () => {
	const modal = browser.$('[aria-modal="true"]');
	expect(modal.isDisplayed()).toBe(false);
	browser.keys(['Tab', 'Tab', 'ArrowDown', 'ArrowRight', 'Enter']);
	expect(modal.isDisplayed()).toBe(true);
	expect(browser.$('/html/body/div[2]/div[2]/div/div/div/div[4]/div/button').isFocused()).toBe(true);
	});
	it('focuses on a hyperlink if it is the only component in a cell', () => {
	browser.keys(['Tab', 'Tab', 'ArrowDown', 'ArrowRight', 'ArrowRight', 'ArrowRight']);
	expect(browser.$('//*[@id="default-terra-data-grid-focusable-cell-table"]/tbody[2]/tr[1]/td[3]/div/a').isFocused()).toBe(true);
	});

[sdadn]

would enableAutofocus make sense as a simpler name?

[cm9361]

I tried to follow the naming pattern of some of the other props. However, I can make this change if it is the desired update.

[sycombs]

I think the is___ pattern is preferred. Would a name like isAutofocusable or similar work? (Not sure if that's sufficiently descriptive of the prop's usage though)

[sdadn]

If we're keeping to the is__ pattern, then I think both these names are similar enough that either works.

[sdadn]

will action buttons on header cells still be autofocused, regardless of the prop?

[cm9361]

The first half of the condition is for the header row and all unit tests pass. I will manually confirm though.

Yes, the button in the row header is still being selected.

[cm9361]

We may need to update these wdio tests to account for the new prop.

terra-framework/packages/terra-data-grid/tests/wdio/data-grid-spec.js

Lines 283 to 296 in 26f559f

	it('clicks the button instead of diving in if it is the only component in the cell', () => {
	const modal = browser.$('[aria-modal="true"]');
	expect(modal.isDisplayed()).toBe(false);
	browser.keys(['Tab', 'Tab', 'ArrowDown', 'ArrowRight', 'Enter']);
	expect(modal.isDisplayed()).toBe(true);
	expect(browser.$('/html/body/div[2]/div[2]/div/div/div/div[4]/div/button').isFocused()).toBe(true);
	});
	it('focuses on a hyperlink if it is the only component in a cell', () => {
	browser.keys(['Tab', 'Tab', 'ArrowDown', 'ArrowRight', 'ArrowRight', 'ArrowRight']);
	expect(browser.$('//*[@id="default-terra-data-grid-focusable-cell-table"]/tbody[2]/tr[1]/td[3]/div/a').isFocused()).toBe(true);
	});

I already made this update in the test file to account for the new prop.

[adoroshk]

It looks like this example is missing isAutoFocusEnabled prop

[adoroshk]

Is there an example where the action button autofocus can be tested with isAutoFocusEnabled prop set to false? I am not sure where to test this combination.

UPD: I locally updated an example with actions with isAutoFocusEnabled={false} and verified that it worked, so the functionality is good. However, it would be nice to have a test to ensure that autofocus on action works in both cases - with isAutoFocusEnabled true and false.

[mjpalazzo]

@cm9361 - I tested 2 examples Worklist Data Grid Autofocusable Cell and Worklist Data Grid Focusable Cell. Keyboard navigation is working as required in both. JAWS announcements are working as required in both.