KEMBAR78
refactor: grid row and cell focus outline styles by jouni · Pull Request #10216 · vaadin/web-components · GitHub
Skip to content

Conversation

@jouni
Copy link
Member

@jouni jouni commented Sep 23, 2025

Split from #10190

The cell & row focus outline wasn't working in Safari in the main branch. Apparently there’s some difference how :focus-visible works in Safari.

This change uses a pseudo element for the cell focus outline as well, to be able to extend the outline on top of both column borders.

@jouni
Copy link
Member Author

jouni commented Sep 23, 2025

@web-padawan I can't figure out why the visual test on header row focus outline fails.

@web-padawan web-padawan force-pushed the refactor/grid-focus-outline branch from 249908d to f2fb877 Compare September 23, 2025 10:12
@web-padawan
Copy link
Member

web-padawan commented Sep 23, 2025

Updated grid screenshots. The outline seems to be rendered a bit differently - that could be the reason. This also affects the "row-dragover-on-top" screenshot. As for "dragstart" - the row height seems different (1px).

UPD: dragstart screenshot has 1px difference in row height, before it was 32px and now 33px which seems correct.

Copy link
Member

@web-padawan web-padawan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Simplified CSS selectors to not use :is() as that apparently could cause some problems. Also pushed a few screenshot updates - please verify them.

@jouni
Copy link
Member Author

jouni commented Sep 23, 2025

Had to do some more polishing to get all the fine details like I want them. But now there’s one more visual test that alludes me – can't figure out why the border between the last header row and first body row is missing when the header row is focused.

@web-padawan
Copy link
Member

Something seems wrong regarding the empty state now:

 ❌ empty state > bounds > should not scroll horizontally with the columns
      AssertionError: expected -301 to be close to 0 +/- 1

@web-padawan
Copy link
Member

web-padawan commented Sep 23, 2025

Reverted changes to empty state that broke unit tests. There is still this problem remaining:

the border between the last header row and first body row is missing when the header row is focused.

UPD: the reason for it is this CSS:

  :host([navigating]) #header:focus-within,
  :host([navigating]) #footer:focus-within,
  [empty-state] #header {
    z-index: 2;
}

The fact that header is shown above overrides the border defined here:

```css
  table:has(#header > tr:not([hidden])) [part~='first-row-cell'] {
    border-top: var(--_row-border-width) solid var(--_border-color);
  }

@sonarqubecloud
Copy link

@jouni
Copy link
Member Author

jouni commented Sep 24, 2025

The fact that header is shown above overrides the border defined here:

It really shouldn't, though. The header element shouldn't be above the first row when scroller to the top. I’m wondering if this is related to the transforms on the body rows, that there’s some sub-pixel alignment issue. I can't explain it in any other way.

Anyhoo, I fixed it by only changing the z-index of the header when the last row has focus within.

@web-padawan web-padawan merged commit 758a53e into main Sep 24, 2025
9 checks passed
@web-padawan web-padawan deleted the refactor/grid-focus-outline branch September 24, 2025 12:27
@vaadin-bot
Copy link
Collaborator

This ticket/PR has been released with Vaadin 25.0.0-alpha12.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants