John Cowen 17438020f1
ui: Accessibility scan improvements (#9485)
* ui: Remove all vestiges of role=tabpanel

* Switch out tablist role for a label, default to Secondary

* Move healthcheckout-output headers to h2, ideally these would be outside the component

* Add aria-label for empty button

* Fix up non-unique ids in topology component

* Temporarily fixup h2 in KV > LockSession

* Fixup dl with no dt

* h3 > h2

* Fix up page objects that were reliant on ids
2021-01-05 10:05:59 +00:00

31 lines
1.1 KiB
Handlebars

<nav
style={{{if selectedWidth (concat
'--selected-width:' selectedWidth ';'
'--selected-left:' selectedLeft ';'
'--selected-height:' selectedHeight ';'
'--selected-top:' selectedTop
)
undefined
}}}
aria-label="Secondary"
class={{concat 'tab-nav' (if isAnimatable ' animatable' '')}}
id={{guid}}
...attributes
>
<ul>
{{#each items as |item|}}
<li
data-test-tab={{concat name '_' (if item.label (slugify item.label) (slugify item))}}
class={{if (or item.selected (eq selected (if item.label (slugify item.label) (slugify item)))) 'selected'}}
>
{{#if item.href }}
<a href={{item.href}}>{{item.label}}</a>
{{else}}
<label role="tab" onkeydown={{action 'keydown'}} tabindex="0" aria-controls="radiogroup_{{name}}_{{if item.label (slugify item.label) (slugify item)}}_panel" for="radiogroup_{{name}}_{{if item.label (slugify item.label) (slugify item)}}" data-test-radiobutton="{{name}}_{{if item.label (slugify item.label) (slugify item)}}">
<a>{{item}}</a>
</label>
{{/if}}
</li>
{{/each}}
</ul>
</nav>