Need ability to override tabIndex on controls

[msmithNI]

Dependency of: table keyboard navigation ( #1137 )

😯 Problem to Solve

Currently several of our controls have a hardcoded tabIndex in their template. This is problematic for the table keyboard navigation feature, when we need to programmatically change tabIndex (for 'roving tabIndex' as we programmatically focus only a specific element).

The controls we initially need this for are those used in focusable parts of the table:

• Button
• Checkbox
• MenuButton
• ToggleButton (since it's used by MenuButton internally)
• Anchor

Desired behavior:

• Can set the tabIndex property or the tabindex property of a control, and it's reflected correctly to the internal parts of the control that are currently hardcoded as tabindex=0 (note that some elements don't have tabindex="0" explicitly, but that behavior is part of their element type, e.g. <a> and <button>).
• Example: Set tabindex="-1" on a nimble-toggle-button. Result: the <div role="button" /> that was previously tabindex=0 is now tabindex=-1 too. Later, setting tabindex=0 on the toggle button will also set the inner div back to tabindex=0.
• Current behaviors maintained:
  • Focusable controls are still focusable by default (until set to tabindex -1)
  • A control can be set to tabindex="-1" in it's initial HTML representation (template), and it respects that after it's attached/connected
    • Example: <nimble-checkbox tabindex="-1"></nimble-checkbox>, add to DOM, checkbox.tabIndex should be -1 not 0 (this doesn't work currently)

💁 Proposed Solution

Current plan (based on prototyping) is to override the tabIndex property and add @attr:

@attr({ attribute: 'tabindex', converter: nullableNumberConverter })
public override tabIndex!: number;

In templates, if a control contains another focusable control, it should set tabIndex on the inner control, i.e. tabindex="${x => x.tabIndex}" In cases where tabIndex is currently set conditionally if not disabled
(tabindex="${x => (x.disabled ? null : 0)}"), we need something closer to
tabindex="${x => (x.disabled ? null : (typeof x.tabIndex === 'number' ? x.tabIndex : 0))}"

For some of these controls, we haven't yet forked / brought in the template from FAST, which we'll need to do as part of this work.

📋 Tasks

• Implement for controls:
  • Button (note: we need to bring in the template from FAST, following our standard patterns, e.g. tests too)
  • Checkbox (note: we need to bring in the template from FAST, following our standard patterns, e.g. tests too)
  • MenuButton
  • ToggleButton (since it's used by MenuButton internally)
  • Anchor
• Autotests
  • tabIndex is forwarded to internal parts as needed
  • With an initial representation of <element-name tabIndex="-1"></element-name>, the element's tabIndex will be -1 after it's connected
• Manually test focus behavior in Chrome + Firefox + Safari, make sure works as expected

[m-akinc]

Apparently the need to forward the tabindex is browser dependent. I noticed that if I set tabindex="-1" on a button, it prevents tabbing to it in Chrome, but not in Firefox. Didn't check Safari.

Also, we don't need to forward tabindex for the Checkbox, becauase it doesn't delegate focus to the shadow root. Turns out for Checkbox, we don't need to forward to a shadow DOM element, but we need to avoid overwriting a provided tabindex value with a hardcoded 0.