Give tab switcher a role

This commit is contained in:
tusooa 2023-03-02 21:15:43 -05:00
parent 830085b3e4
commit 1a852b96ef
No known key found for this signature in database
GPG Key ID: 7B467EDE43A08224
1 changed files with 7 additions and 1 deletions

View File

@ -117,6 +117,7 @@ export default {
onClick={this.clickTab(index)} onClick={this.clickTab(index)}
class={classesTab.join(' ')} class={classesTab.join(' ')}
type="button" type="button"
role="tab"
> >
<img src={props.image} title={props['image-tooltip']}/> <img src={props.image} title={props['image-tooltip']}/>
{props.label ? '' : props.label} {props.label ? '' : props.label}
@ -131,6 +132,7 @@ export default {
onClick={this.clickTab(index)} onClick={this.clickTab(index)}
class={classesTab.join(' ')} class={classesTab.join(' ')}
type="button" type="button"
role="tab"
> >
{!props.icon ? '' : (<FAIcon class="tab-icon" size="2x" fixed-width icon={props.icon}/>)} {!props.icon ? '' : (<FAIcon class="tab-icon" size="2x" fixed-width icon={props.icon}/>)}
<span class="text"> <span class="text">
@ -167,11 +169,15 @@ export default {
return ( return (
<div class={'tab-switcher ' + (this.sideTabBar ? 'side-tabs' : 'top-tabs')}> <div class={'tab-switcher ' + (this.sideTabBar ? 'side-tabs' : 'top-tabs')}>
<div class="tabs"> <div
class="tabs"
role="tablist"
>
{tabs} {tabs}
</div> </div>
<div <div
ref="contents" ref="contents"
role="tabpanel"
class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')} class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')}
v-body-scroll-lock={this.bodyScrollLock} v-body-scroll-lock={this.bodyScrollLock}
> >