TYPO3 Core

When you navigate with your keyboard to an interactive element, you should see a visible focus style. This success criterion helps to know which element has the keyboard focus. The Create new pages, Filter and Reload buttons don't change its style, when it receives focus.</p>

<button class="svg-toolbar__btn" data-tree-icon="actions-page-new" title="Create new pages"> <span class="t3js-icon icon icon-size-small icon-state-default icon-actions-page-new" data-identifier="actions-page-new"> <span class="icon-markup"> <img src="/typo3/sysext/core/Resources/Public/Icons/T3Icons/actions/actions-page-new.svg" width="16" height="16" alt="">    </span>  </span></button>

Recommendation:

Add a visible focus style to the buttons. You can achieve this with one of the following examples:

• add a visible border to the button, when focussed.
• when focussed, change the button background color to another color, which has a contrast ratio of 3:1 to the normal background color.
• underline the button text, when focussed

#tas2020