Visual indicator missing from <figcaption> link on home page when it receives focus

[biljanap]

This link is keyboard accessible but it does not have visual indicator to indicate that it received focus. This would fail Guideline 2.4.7 Focus Visible: “Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible” (http://www.w3.org/TR/WCAG20/#navigation-mechanisms).
Without visible indicators, keyboard users can’t know if an element on the page received the focus and they can’t interact with that element. Keyboard focus indicator is dotted border that we see around links and form elements when we tab to them.

[masterbee]

@biljanap , can you please re-test since there has been various improvements to the CSS and wanted to ensure this is still an issue.

[biljanap]

The issue is still there. I think that visual indicator (dotted border) is there but its color blends with background color.
You could do something like this to make it visible:

.jumbotron a:hover, .jumbotron a:active, .jumbotron a:focus {
border: 1px dotted #CCCCCC;
}

I would also add border for normal link state so the link would not shift for 1px (the width of the border) when it receives focus. #182842 seems to be background color.
.jumbotron a {
border: 1px dotted #182842;
}

[pjackson28]

Normally the browser would take care of ensuring contrast but it looks like Bootstrap is overriding this with:

a:focus {
outline: thin dotted #333333;
outline-offset: -2px;
}

This disables the browser's default contrast handling and is why we are having issues here. This should be fixed in Bootstrap by them not touching the outline colour or style for a:focus. This presents a WCAG 2.0 focus indicator issue which should be fixed directly in Bootstrap.

[masterbee]

Bootstrap merged fixed as well twbs/bootstrap#11551 - So handled upstream.