ARIA toggle fields have an accessible name

Ensures every element with a semantic role also has an accessible name. Semantic roles include:

Fixing the problem

Correct markup solutions

The aria-toggle-field-name contains five markup patterns that pass testing criteria:

<!-- checkbox -->
<div id="pass1" role="checkbox">Newspaper</div>  <!-- menuitemcheckbox -->
<ul role="menu">  <li id="pass2"  role="menuitemcheckbox"  aria-label="Word wrap"  aria-checked="true"></li>
</ul>  <!-- menuitemradio -->
<p id="pass3Label">Sans-serif</p>
<ul role="menu">  <li id="pass3"  role="menuitemradio"  aria-labelledby="pass3Label"  aria-checked="true"></li>
</ul>  <!-- radio -->
<div role="radiogroup">  <div id="pass4"  role="radio"  aria-checked="false"  tabindex="0"  title="Regular Crust"></div>
</div>  <!-- switch -->
<div id="pass5"  role="switch"  aria-checked="true"  aria-label="Toggle blue light:">  <span>off</span>  <span>on</span>

Incorrect markup solutions

The aria-toggle-field-label contains five markup patterns that fail testing criteria:

<!-- checkbox -->
<div id="fail1" role="checkbox" aria-labelledby="does-not-exist"></div>  <!-- menuitemcheckbox -->
<ul role="menu">  <li id="fail2" role="menuitemcheckbox" aria-checked="true"></li>
</ul>  #3 <!-- menuitemradio -->
<ul role="menu">  <li id="fail3" role="menuitemradio" aria-checked="true"></li>
</ul>  #4 <!-- radio -->
<div role="radiogroup">  <div id="fail4" role="radio" aria-checked="false" tabindex="0"></div>
</div>  #5 <!-- switch -->
<div id="fail5" role="switch" aria-checked="true">  <span></span>  <span></span>