id	summary	reporter	owner	description	type	status	priority	milestone	component	version	severity	resolution	keywords	cc	focuses	prnumber
47149	Tab structure does not use tab semantics	anevins	afercia	"Moved from the WPCampus accessibility report issues on GitHub, see: https://github.com/WordPress/gutenberg/issues/15287

* **Severity**: 
 * Medium
* **Affected Populations**:
 * Blind
 * Low-Vision
 * Motor Impaired
 * Cognitively Impaired
* **Platform(s)**:
 * Windows - Screen Reader
 * Windows - ZoomText
 * Windows - Dragon
 * Mac - VoiceOver
 * Android - TalkBack
 * iOS - VoiceOver
* **Components affected**:
 * Media Dialog

**Issue description**
In the ""Featured Image"" modal dialog, two links are used to switch
views (between the ""Media Library"" and the ""Upload Files"" panels).
These are coded as links with redundant href attributes (""#""),
which is not semantically valid, and does not convey the
currently-active link to assistive technologies.

The choice of button vs link has a significant effect on user
expectations for assistive technology users: links convey the
expectation that the browser will navigate to a different location or
page, which standard buttons do not. The difference also affects what
keys can be used within assistive technologies to navigate between the
elements, and which page summaries the element appears in (for example,
it won't show up in a list of all form elements on the page).

Semantic markup is vital for assistive technology users, to convey the
structure and relationships between information. When appropriate
semantic markup is not used, it may be more difficult for such users to
understand what the content means, and to comprehend the structure that
the visual presentation conveys.

**Issue Code**
{{{
    <div class=""media-router"">


        <a href=""#"" class=""media-menu-item active"">Upload Files</a>


        <a href=""#"" class=""media-menu-item"">Media Library</a>


    </div>
}}}

**Remediation Guidance**
The visual presentation of the content within the ""Featured Image""
dialog is a tab panel. Using the [tab panel pattern]
(https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel) will give the
elements proper roles, and using `aria-selected` will allow users of
assistive technologies to know which tab is currently selected.

**Recommended Code**
{{{
    <div role=""tablist"" class=""media-router"">


        <button role=""tab"" aria-selected=""true"" class=""media-menu-item active"">Upload Files</button>


        <button role=""tab"" class=""media-menu-item"">Media Library</button>


    </div>
}}}

**Relevant standards**
* 1.3.1 Info and Relationships (Level A) https://www.w3.org/TR/WCAG20/#content-structure-separation-programmatic
* 4.1.2 Name, Role, Value (Level A) https://www.w3.org/TR/WCAG20/#ensure-compat-rsv

**Note**: This issue may be a duplicate with other existing accessibility-related bugs in this project. This issue comes from the Gutenberg accessibility audit, performed by Tenon and funded by WP Campus. This issue is GUT-58 in Tenon's report"	defect (bug)	closed	normal	5.3	Media		normal	fixed	needs-post-mortem wpcampus-report has-screenshots semantic-buttons has-patch i18n-change		accessibility, javascript