Focus State Behavior for v3 List Items Appears Unexpected

[AdamWMoqrane]

Description

The focus states for v3 List components are inconsistent, leading to alignment issues and unexpected focus behavior. This problem seems related to the structure of the component and the keyboard navigation of each "table cell" within the List. This issue persists even when using the icon-start property introduced in 3.0.

User Stories

As a product designer working with List components, I want the focus states to be standardized and consistent so that users have a predictable and accessible experience when navigating through list items.

Acceptance Criteria

• The focus behavior for List components works consistently across all focusable areas (icon, label, and actions).
• Misalignment issues caused by fractional pixel rendering or hitbox inconsistencies are resolved.
• Keyboard navigation within "table cells" behaves as expected.
• Switching to the content-start or icon-start slots does not introduce misaligned or unintended focus behavior.

Relevant Info

• Repro Steps:
  1. Use icon-start with v3 List components.
  2. Observe the focus states and alignment when interacting with the List items.
• Codepen Example: Link to Codepen provided by @adam
• Additional Observations: Misalignment appears fractional depending on the component's internal structure and click targets.

Helpful Details

• The icons were placed in the default content-start slots, which exacerbates the misalignment issues.
• Swapping to the icon-start slot improves alignment slightly but does not completely resolve focus behavior.
• Conversations referenced:
  • Adam Moqrane, Adam Tirella, Paul Coster, Aaron Shetland (see screenshots).

Priority impact

impact - p1 - need for current milestone

Esri team

ArcGIS Knowledge

[github-actions]

cc @ashetland, @SkyeSeitz, @brittneytewks

[ashetland]

@geospatialem I think this focus behavior should be categorized as a bug and I think it's been with us for while. I believe this is the focus state in question where only the content area is focused:

Ideally, focus should only be on the entire item or interactive elements, such as the drag handle, close button, or slotted actions.

[geospatialem]

Confirmed with @ashetland this has been occurring for a while, at least since 2.6 and in our latest 2.13, but this is something we'd like to address ASAP, ideally for 3.0, but if not, shortly thereafter.