[Label] Wrapped components and focus shifting

[geospatialem]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

As identified in #5070 (comment), certain browsers (Chrome, Safari, and Edge) shift focus to the first element when wrapped in label. Also applies to the Charts team.

cc @zaramatheson @AdelheidF @jcfranco

Expected Behavior

The behavior is similar to what is observed in native HTML, but there may be a solution that can be explored as Calcite's code is managing the focus behavior.

Reproduction Sample

https://codepen.io/geospatialem/pen/poGvgrO

Reproduction Steps

1. Open the sample
2. Click the input and hold the mouse button while moving the mouse over the slider and release the mouse button.
3. Depending on the browser, observe the following:
   • FF: Focus is not shifted
   • Chrome/Edge/Safari: When doing this workflow the first element, in this case the slider shifts focus
4. Observe similar behavior on native elements

Reproduction Version

1.9.2

Relevant Info

#5070 addressed when elements are wrapped in a calcite-label that the first element should receive, or steal, focus.

Regression?

No response

Priority impact

p3 - want for upcoming milestone

Impact

No response

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Map Viewer

[geospatialem]

There is a workaround, if it fits the use cases for folks, where each element can have its own individual label using the label attribute, also depicted in https://codepen.io/geospatialem/pen/poGvgrO with:

<calcite-label for="my-slider">my label</calcite-label>
  <div>
    <calcite-slider id="my-slider"></calcite-slider>
    <calcite-input label="my label"></calcite-input>
  </div>