Pagination: inconsistent focus ring

[benelan]

Actual Behavior

When clicking the number directy next to the ellipses, the focus ring is actually on the number after.

Expected Behavior

The number that was clicked has a focus ring, which is how the component behaves when clicking on a page number that is not next to the ellipses (see comment below for an example from Ant)

Reproduction Sample

https://codepen.io/benesri/pen/YzavJga?editors=1000

Reproduction Steps

1. Open the repro sample
2. Click on page 2 - notice the focus ring is around "2"
3. Click on page 5 - notice that the focus ring is around "6", however the active underline is correctly under "5"

Reproduction Version

beta.86

Relevant Info

The issue started all the way back in beta.22 and I found this line in its changelog entry:

improved focus styles across all components

But unfortunately no linked PR

Regression?

beta.22

[geospatialem]

@ashetland + @SkyeSeitz: Thoughts on the design with pagination's :focus?

[ashetland]

Agree with @benelan, that the expected behavior is the correct behavior. To maintain consistency in the pattern, the focus ring should not auto-advance. cc @geospatialem

[ashetland]

See this example from Ant where the focus ring moves to the clicked/active page. This happens with both mouse and keyboard input. https://ant.design/components/pagination#pagination-demo-more

[github-actions[bot]]

cc @geospatialem, @brittneytewks