adobe / spectrum-web-components / 35995854937

96%

push

github

fix(reactive-controllers): mirror horizontal arrow keys in RTL (#6780)

* fix(reactive-controllers): mirror horizontal arrow keys in RTL

FocusGroupController mapped ArrowRight to +1 and ArrowLeft to -1 in DOM
order without consulting the resolved text direction. In RTL this moved
focus opposite to the visual layout for every horizontal or grid focus
group, including sp-swatch-group, sp-action-group and sp-tabs.

Resolve the host direction with getComputedStyle and mirror the
horizontal step when it is rtl. Home and End stay logical.

Adds direction tests for the controller and RTL stories for Swatch Group.

* fix(reactive-controllers): only mirror arrows on an inline layout

Mirroring ArrowLeft/ArrowRight whenever the host resolved to RTL broke
vertically rendered groups. ActionGroup never passes a direction, so it
uses 'both', where Left/Right and Up/Down step through the same DOM
order. In a vertical RTL group ArrowDown moved forward while ArrowRight
moved backward.

Mirror only when the elements are actually laid out along the inline
axis, determined from the offset between the first two elements when the
direction is 'both'.

* test(reactive-controllers): cover vertical Tabs and Radio Group in RTL

Tabs and Radio Group also use the 'both' direction and can render
vertically, so they shared the vertical mirroring regression. Add a
changeset for the fix.

* fix(reactive-controllers): let hosts declare RTL arrow mirroring

Replace the geometry-based layout detection with an explicit
`mirrorHorizontalInRTL` config option, as raised in review. Measuring the
first two elements misreads wrapped, single-item and equally positioned
collections, so the host now reports its own layout.

The default is `true` only for `direction: 'horizontal'`, the one value that
unambiguously describes a single inline-axis row. `both` and `grid` say
nothing about layout, so those hosts opt in:

- sp-action-group, sp-radio-group: `() => !this.vertical`
- sp-tabs: `() => this... (continued)

6144 of 6586 branches covered (93.29%)

Branch coverage included in aggregate %.

61 of 61 new or added lines in 7 files covered. (100.0%)

38631 of 39910 relevant lines covered (96.8%)

470.51 hits per line