javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 22:17:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(tab-button): using button for accesibility

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-02-13 13:31:50 +01:00
parent a227d465f6
commit c9800093f2
3 changed files with 30 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
packages/core/src/components/tab-button/tab-button.scss
View File

@ -9,7 +9,7 @@ ion-tab-button {
position: relative; position: relative;
z-index: 0; z-index: 0;
display: flex; display: block;
overflow: hidden; overflow: hidden;
flex: 1; flex: 1;
@ -21,18 +21,33 @@ ion-tab-button {
text-decoration: none; text-decoration: none;
background: none; background: none;
cursor: pointer;
user-select: none; user-select: none;
} }
.tab-cover {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100%;
border: 0;
outline: none;
color: inherit;
background: transparent;
cursor: pointer;
}
.tab-disabled { .tab-disabled {
pointer-events: none; pointer-events: none;
}
.tab-disabled > * { >.tab-cover {
opacity: .4; opacity: .4;
}
} }
.tab-button-text, .tab-button-text,

24
packages/core/src/components/tab-button/tab-button.tsx
View File

@ -17,9 +17,9 @@ export class TabButton {
@Prop() selected = false; @Prop() selected = false;
@Prop() tab: HTMLIonTabElement; @Prop() tab: HTMLIonTabElement;
@Event() ionTabbarClick: EventEmitter<TabButtonEventDetail>; @Event() ionTabbarClick: EventEmitter<HTMLIonTabElement>;
@Event() ionTabButtonDidLoad: EventEmitter<TabButtonEventDetail>; @Event() ionTabButtonDidLoad: EventEmitter<void>;
@Event() ionTabButtonDidUnload: EventEmitter<TabButtonEventDetail>; @Event() ionTabButtonDidUnload: EventEmitter<void>;
componentDidLoad() { componentDidLoad() {
this.ionTabButtonDidLoad.emit(); this.ionTabButtonDidLoad.emit();
@ -63,18 +63,12 @@ export class TabButton {
render() { render() {
const tab = this.tab; const tab = this.tab;
return [ return [
tab.icon && <ion-icon class='tab-button-icon' name={tab.icon}></ion-icon>, <button type='button' class='tab-cover' disabled={tab.disabled}>
tab.title && <span class='tab-button-text'>{tab.title}</span>, { tab.icon && <ion-icon class='tab-button-icon' name={tab.icon}></ion-icon> }
tab.badge && <ion-badge class='tab-badge' color={tab.badgeStyle}>{tab.badge}</ion-badge>, { tab.title && <span class='tab-button-text'>{tab.title}</span> }
this.mode === 'md' && <ion-ripple-effect useTapClick={false} /> { tab.badge && <ion-badge class='tab-badge' color={tab.badgeStyle}>{tab.badge}</ion-badge> }
{ this.mode === 'md' && <ion-ripple-effect/> }
</button>
]; ];
} }
} }
export interface TabButtonEvent extends CustomEvent<TabButtonEventDetail> {
detail: TabButtonEventDetail;
}
export interface TabButtonEventDetail extends HTMLIonTabElement {
}

2
packages/core/src/components/tabs/test/basic/index.html
View File

@ -50,7 +50,7 @@
</ion-page> </ion-page>
</ion-tab> </ion-tab>
<ion-tab <ion-tab disabled
title="Messages" title="Messages"
icon="chatboxes" icon="chatboxes"
component="page-one" component="page-one"