Pagination active page-link lacks noticeable focus styling in Firefox

[tmorehouse]

• Operating system and version : Any
• Browser and version: Firefox (and maybe others)
• Reduced test case: https://codepen.io/tmorehouse/pen/MOQXyd

The current CSS for pagination .page-item.active .page-link does not include any noticeable focus styling when using Firefox, which makes it difficult for keyboard only users to know if the active link is focused or not.

Tab through the page links in the codepen to see the issue (and one possible solution) using Firefox

I've used the following workaround CSS to provide focus styling for the active page-link:

.pagination .page-item.active .page-link:focus {
    box-shadow: 0 0 0 3px rgba(0,123,255,.5);
    z-index: 2;
}

Currently the active page link looks like this with focused and not focused (the change in outline is negligible):

With the proposed focus styling it looks as follows (which uses similar styling as the primary button focus styling):

Another quick workaround is to place the class .btn-primary (without the .btn class) on the active page-link (the <a> tag), which produces the same effect when focused.

[andresgalante]

Hi @tmorehouse, thanks for reporting this. I see what you mean, since the hover and active have the same styles then the active has no noticeable focus styles other than the default browser ring.

The focus ring on anchors is the browser default, for example: on a mac on chrome it looks like this:

I think we should add a focus ring that's consistent with .btn.
@patrickhlauke What do you think?

[tmorehouse]

I should have mentioned that I was also using Firefox, which has a very subtle focus ring (I've updated the issue at top).

As well, maybe when focused, any page-link should get a z-index of 1 or 2, so that the focus ring isn't cut off on the right edge.

[andresgalante]

@tmorehouse I agree, different browsers will show less noticeable focus rings. Let's wait for @patrickhlauke comment. As I mention before I think we should add the same focus ring as in btns for consistency.