feat: add button-tab-index-required rule

[anveshmekala]

Related Issue: #11941

Adds a new custom ESLint rule.

Summary

button-tab-index-required

This rule will catch any button elements without tabIndex attribute. tabIndex attribute is required for button to be focusable when clicked in Safari browser.

Config

No config is needed

Usage

{ "@esri/calcite-components/button-tab-index-required": "error" }

[github-actions]

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

[github-actions]

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

[driskull]

@anveshmekala I'm not finding any info about Safari requiring a tabindex on buttons.

I also can't see any difference in a codepen: https://codepen.io/driskull/pen/OPJKRbw

Are you sure the issue wasn't related to focus trapping and incorrectly closing the input-date-picker?

[driskull]

I think there may be a larger issue with the component, even clicking on the background of the open date picker shouldn't close it. This is an inconsistency between Safari and Chrome and adding the tabindex to the button doesn't fix that part.

[driskull]

The issue seems to be with the this.listen("blur", this.blurHandler); blur handler, not the tabindex on button. When clicking on the floating UI dialog its calling blur on the host which is closing it. It doesn't do that in Chrome. So something in that logic needs to change. My guess is the click is bubbling up and causing the blur on the host for some reason. Some kind of composedPath check on the event might prevent this.

[driskull]

I'm not sure this is necessary but I'll defer to @jcfranco.

I don't think safari needs tabindex set and can't seem to find any information to back that up.

[anveshmekala]

@driskull The inconsistency is mentioned here.

While debugging #11544, i stumbled up on it. IIRC, safari wasn't focusing the button by default. But the Codepen you shared is consistent across browsers.

[driskull]

The root of the issue is the blur event causing the component to close in Safari the button being focused does hide the issue but the root of the issue persists and clicking not on a button within the datepicker shouldn't close it either.

[anveshmekala]

The root of the issue is the blur event causing the component to close in Safari the button being focused does hide the issue but the root of the issue persists and clicking not on a button within the datepicker shouldn't close it either.

True & Agree. We can freeze this one & fix the root cause. Can you add a bug for the issue with input-date-picker.

[github-actions]

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.