[terra-data-grid] Update to automatically focus on single buttons or hyperlinks in cells

[sdadn]

Summary

This PR updates the focus behavior to negate the need for dive-in mode in cells with only a single button or hyperlink and focus on them directly.

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-10225

---

Thank you for contributing to Terra.
@cerner/terra

[adoroshk]

I am wondering if we need to include buttons that are created like <div> tags with a role="button", or that is out of scope?

[sdadn]

I believe custom elements are out of scope for this feature.

[cm9361]

I think you would actually have to account for this. You might need to exclude certain types rather than being so specific. This selector seems too restrictive.

[nikhitasharma]

Should we have a test with more than one focusable component in a cell?

[sdadn]

I think that should be covered here:

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

Lines 234 to 239 in b4b9f88

	it('validates that a cell with multiple focusable elements traps focus', () => {
	browser.keys(['Tab', 'Tab', 'ArrowDown', 'ArrowDown', 'ArrowRight', 'Enter', 'ArrowRight']);
	Terra.validates.element('focusable-multiple-element-cell-trap-focus', { columnResizeSelector });
	expect(browser.$$('button:focus')).toBeElementsArrayOfSize(1);
	});

[cm9361]

Is this correct? We don't want this behavior for the Terra Table. This functionality should only be possible for a DataGrid component.

[sdadn]

Moved this to the data grid component.

[cm9361]

I don't think we want to add this logic to the onFocus synthetic event.

[sdadn]

The WDIO failure is caused by an another component. Terra-data-grid tests are all passing:

[mjpalazzo]

@sdadn - Overall this enhancement is working well. I have a couple of minor findings.

1. When focus is on the hyperlink, the black solid line focus indicator is cut off on the left side. See attached screen shots. Focus indicator on button and cells look fine. See screenshots for these as well.
2. This is a nit but the column header text in the example is incorrect. For example the header that has "Column 1" in the header is actually column 2. This causes the screen reader to announce "Column 1" some helper text and then "Column 2"

@sdadn and I met to discuss visual focus indicator truncation when the interactive element has focus. This issue is in Main and I recall that there may be issues opened by the Clinicals teams that caused us to reduce cell padding. I will follow up on that and open a new Jira to address the issue. I have added the Accessibility Reviewed label.