Index of test cases

MAS 2.4.7 Focus Visible - failing examples

2.4.7 Focus Visible MAS bug count: 21

Tab widget

Apples

This tab widget requires explicit activation of a tab to render its associated tabpanel.

Here's a link just to test keyboard tabbing. (it's odd talking about tabs, and tabs.)

Bananas

This is an example of a heading being used to populate the tab's label, while also not removing heading from the tabpanel. This is done by adding the value "keep" to data-atabs-heading.

Oranges

There are two headings here

The tab is getting its label from the data-atabs-tab-label. The heading is kept in the tabpanel because it does not have the data-atabs-heading attribute.

It wouldn't make much sense

If the contents of a tabpanel contain additional sub headings, it wouldn't make sense to remove the initial heading from the tabpanel. Doing so would create a gap in the heading structure.

Expected Result:

Failure count for this test case: 7

axe-core findings for this test case: 0

Failure: The tabs within the tablist can receive keyboard focus by the tab key, and arrow keys are used to navigate between each tab. Focus is not visible on the tab (the outline and box-shadow properties have been set to none), and since each tab requires manual activation, the tabpanel content also does not change to help indicate which item might be focused.

focus is additionally not visible on the tabpanel which receives focus after navigating away from the tablist, and focus is not visible on a hyperlink within one of the tab panels.

Readonly textarea

Expected Result:

Failure count for this test case: 1

axe-core findings for this test case: 0

Failure: the UA focus outline has been set to none and no replacement has been provided. Since the textarea is readonly, there is no text cursor displayed either when focused, resulting in no focus indicator for the element.

Custom ARIA button

custom btn

Expected Result:

Failure count for this test case: 1

axe-core findings for this test case: 0

Failure: the UA outline has been overridden and instead set to none. There is no focus indicator for the custom ARIA button.

Legacy select element

Expected Result:

Failure count for this test case: 1

axe-core findings for this test case: 0

Failure: the select element has had its UA outline overridden and instead set to none.

Legacy select elements do not allow for styling of the option elements. So, here the test fails only for lacking a visible focus indicator for the collapsed select "button" part. If this select were to have its listbox popup invoked, the options do pass focus visible.

Native disclosure widget

My disclosure content to show/hide

Expected Result:

Failure count for this test case: 1

axe-core findings for this test case: 0

Failure: the summary element has had its UA outline overridden and instead set to none.

Test case title

Expected Result:

Failure count for this test case: 1

axe-core findings for this test case: 0

Failure: not all browsers allow for direct focus of the iframe element. But for those that do, such as Firefox, this example will lack a focus indicator as the iframe element has had its UA outline overridden and instead set to none.

Native radio group

Expected Result:

Failure count for this test case: 1

axe-core findings for this test case: 0

Failure: the default UA outline for the radio buttons hve been overriden and instead set to none. This test fails so long as a radio button in the set remains unchecked. It then can semi-pass for arrow key navigation, since the checked state will follow focus. Though it will still fail for an initial visible focus indicator not being present, and thus one not knowing whether the checked element has received focus or not.

checkbox

Expected Result:

Failure count for this test case: 1

axe-core findings for this test case: 0

Failure due to lack of visible focus indicator. Outline has been set to 'none'.

General hyperlink

example.com again

Expected Result:

Failure count for this test case: 1

axe-core findings for this test case: 0

Failure: the hyperlink has had its UA outline overridden and instead set to none.

button represented by icon

Expected Result:

Failure count for this test case: 1

axe-core findings for this test case: 0

Failure: the button element has had its UA outline overridden and instead set to none.

Area of a map element

Workplace Computer

Expected Result:

Failure count for this test case: 1

Failure: the default UA outline for the area[href] element has been overridden and instead set to none.

Note: this example 'passes' in Firefox because that browser has a UA focus indicator that cannot be suppressed by typical CSS like outline: none or opacity: 0 alone

Visually hidden hyperlink

example.com

Expected Result:

Failure count for this test case: 1

axe-core findings for this test case: 0

Failure: the visually hidden hyperlink does not become visible when focused. If an element receives focus, it must be made visible and have a visible focus indicator.

Customized Select element (chromium browsers only)

Expected Result:

Failure count for this test case: 3

axe-core findings for this test case: 0

Failure: all focus outlines have been overridden and set to none.

A customizable select element allows for all aspects of it to be styled by web authors, even the option elements.