Merge branch 'tusooa/tab-aria' into 'develop'
Give tab switcher a role See merge request pleroma/pleroma-fe!1793
This commit is contained in:
commit
2e20c2c46a
@ -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}
|
||||||
>
|
>
|
||||||
|
Loading…
Reference in New Issue
Block a user