Summary

This PR fixes segmented-control hover border artifacts by introducing explicit shared-border ownership and stacking behavior in button styles, and it adds targeted E2E visual regression coverage for the affected hover cases. The implementation aligns with the linked issue and keeps the change scope focused on styling plus regression tests.

Code Quality

The frontend change is well-structured and maintainable: selector constants and inline comments clearly document the border-ownership model, including active precedence and neutral-neighbor hover/focus handling (frontend/lib/src/components/shared/BaseButton/styled-components.ts:313-370).
No blocking code-quality issues were identified.

Test Coverage

Coverage is strong for the reported bug:

• New app fixtures were added for both multi-select and active-adjacent single-select hover scenarios (e2e_playwright/st_segmented_control.py:159-202).
• A reusable helper performs a visual assertion and a negative regression check that hover does not mutate selection (e2e_playwright/st_segmented_control_test.py:42-58).
• A dedicated snapshot test covers both new scenarios (e2e_playwright/st_segmented_control_test.py:125-147), with snapshots added across light/dark themes and major browsers.

Residual gap: the frontend logic also treats :focus-visible as interactive (frontend/lib/src/components/shared/BaseButton/styled-components.ts:321-367), but no explicit keyboard-focus snapshot was added.

Backwards Compatibility

No API or behavior-breaking changes were introduced for Python or widget contracts. This is a visual/styling fix plus test updates, so backward compatibility impact is low.

Security & Risk

No security concerns were identified.
Regression risk is low-to-moderate and mainly visual (complex sibling selector precedence and layering), but the newly added E2E snapshots materially reduce that risk.

Accessibility

Accessibility impact is positive/neutral:

• The patch explicitly includes :focus-visible in the interactive layering model and preserves raised stacking for focused controls (frontend/lib/src/components/shared/BaseButton/styled-components.ts:346-374).
• No semantic or ARIA regressions were introduced.

Recommendations

1. Add one keyboard-driven :focus-visible segmented-control snapshot to complement hover coverage and lock in border behavior for non-pointer users.

Verdict

APPROVED: The fix is well-scoped, addresses the root visual defect, and is backed by solid E2E regression coverage with no blocking issues found.

This is an automated AI review by gpt-5.3-codex-high. Please verify the feedback and use your judgment.

Summary

This PR fixes a visual border rendering issue in segmented control components (issue #12802). When hovering over buttons in a segmented control, overlapping borders caused double-width seam artifacts. The fix introduces a z-index-based layering system with CSS border-color transparency rules so that "raised" buttons (active or hovered/focused) own shared borders with their neutral neighbors, preventing visual artifacts.

Changes:

• frontend/lib/src/components/shared/BaseButton/styled-components.ts: Added module-level CSS selector constants and new CSS rules for border ownership in StyledSegmentedControlButton.
• e2e_playwright/st_segmented_control.py: Added hover border regression test scenarios (multi-select and single-select with adjacent active button).
• e2e_playwright/st_segmented_control_test.py: Added test_hovered_segmented_control_border_regression_snapshot with a reusable helper function.
• Snapshots: 12 new snapshots for hover border regression (light/dark, 3 browsers, 2 scenarios) and 8 updated existing snapshots reflecting the CSS fix.

Code Quality

The CSS implementation is well-structured and follows a clear border ownership model:

1. Selector constants (SEGMENTED_CONTROL_ANY_ENABLED, etc.) are correctly extracted to module-level scope, following the project's static data structure guidelines (frontend/AGENTS.md).

2. Border ownership logic is sound and handles all adjacency cases correctly:

   • Active + Any: Active always owns the shared border (strongest precedence).
   • Hover/Focus + Neutral: The interactive button owns the shared border.
   • Active + Hover: Active wins — hover rules intentionally target only neutral neighbors, avoiding conflicts.
   • Neutral + Neutral: No transparency rules apply; both keep borders.

3. Comments explain the non-obvious "why" (border ownership model, precedence rules) rather than narrating code — appropriate for this kind of CSS complexity.

4. The kind prop is confirmed to be passed directly to the DOM <button> element via BaseButton.tsx (line 91), so the attribute selectors (button[kind='segmented_control']) correctly match rendered elements.

5. Minor observation: The existing &:focus-visible z-index rule (line 371-374) is now a subset of the new compound selector (line 346-350) for enabled buttons, but keeping it is harmless and adds clarity. The zIndex in StyledSegmentedControlButtonActive (line 385) is also pre-existing redundancy — not introduced by this PR.

6. The CSS :has() pseudo-class is used for forward-looking sibling matching. Browser support is solid: Chrome 105+, Firefox 121+, Safari 15.4+, Edge 105+. This is consistent with the project's assumption that modern browser features are available (frontend/AGENTS.md notes "We assume the browser supports :focus-visible").

Test Coverage

E2E Tests (visual regression):

• Added test_hovered_segmented_control_border_regression_snapshot using themed_app fixture, which covers both light and dark themes across chromium, firefox, and webkit (12 total snapshots).
• Two well-chosen scenarios: (1) hover on a neutral-only group (multi-select, nothing selected) and (2) hover adjacent to a selected/active button (single-select with "North" selected, hovering "East").
• The helper _assert_hover_border_snapshot includes a negative regression check verifying that hover does not change widget state.
• Follows E2E best practices: key-based locators, screenshotting specific elements not the whole page, descriptive snapshot names (st_segmented_control-hover_border_*).

Frontend unit tests:

• No new unit tests added. This is acceptable since the changes are purely CSS styling rules in Emotion styled components. Visual CSS behavior is best verified through the E2E visual regression snapshots rather than unit tests asserting CSS property values. The existing BaseButton.test.tsx doesn't test segmented control styles, and adding such tests wouldn't add meaningful coverage beyond what the visual regression snapshots provide.

Backwards Compatibility

No concerns. This is a CSS-only visual fix:

• No API changes, no protobuf changes, no backend changes.
• Only affects segmented control button visual rendering (not pills or other button types).
• The updated existing snapshots (width, dynamic) reflect the improved border handling, confirming the fix applies consistently across all segmented control states.

Security & Risk

No security concerns. The changes are purely visual CSS adjustments with no changes to data flow, authentication, or server-side logic.

Regression risk is low:

• The fix is scoped to segmented control buttons only (selectors target button[kind^='segmented_control']).
• The border transparency rules are carefully gated by specificity (only between specific neighbor states).
• The z-index value used (theme.zIndices.priority = 1) is the same as the pre-existing focus-visible z-index, so stacking context behavior is unchanged.

Accessibility

The changes maintain good accessibility practices:

• :focus-visible is handled alongside :hover in the z-index elevation rule, ensuring keyboard-focused buttons are visually raised above neighbors.
• The pre-existing &:focus-visible z-index rule is preserved as an additional safeguard.
• No ARIA attributes are modified.
• Focus rings and focus behavior are unaffected.

Recommendations

No blocking issues. Minor non-blocking observations:

1. Consider testing edge buttons under hover: The current E2E test hovers "East" (second button). Testing hover on the first or last button could verify border-radius + border-transparency interaction, but the snapshot coverage across 3 browsers and 2 themes provides good confidence already.

2. Pre-existing z-index redundancy: StyledSegmentedControlButtonActive (line 385) sets zIndex: theme.zIndices.priority which is now also covered by the new compound selector rule (line 346-350). A follow-up cleanup could remove the redundant declaration from the active styled component, but this is purely cosmetic.

Verdict

APPROVED: Well-crafted CSS bug fix with a clear border ownership model, comprehensive visual regression tests across themes and browsers, and no backwards compatibility or security concerns.

This is an automated AI review by opus-4.6-thinking.