-
+
-
+
-
-
-
- {{ tab.title }}
- {{tab.badge}}
-
+
+
+ {{ tab.title }}
+ {{tab.badge}}
-
+
diff --git a/src/components/tabs/tab.ts b/src/components/tabs/tab.ts
index b4d8cbae9..e65068f8f 100644
--- a/src/components/tabs/tab.ts
+++ b/src/components/tabs/tab.ts
@@ -16,6 +16,7 @@ import { Component, Input, Output, OnInit, OnDestroy, ElementRef, EventEmitter,
import { CoreTabsComponent } from './tabs';
import { Content } from 'ionic-angular';
import { CoreDomUtilsProvider } from '@providers/utils/dom';
+import { CoreUtilsProvider } from '@providers/utils/utils';
import { CoreNavBarButtonsComponent } from '../navbar-buttons/navbar-buttons';
/**
@@ -54,6 +55,9 @@ export class CoreTabComponent implements OnInit, OnDestroy {
if (this.initialized && hasChanged) {
this.tabs.tabVisibilityChanged();
+
+ this.tabElement = document.getElementById(this.id + '-tab');
+ this.tabElement && this.tabElement.setAttribute('aria-hidden', !this._show);
}
}
}
@@ -70,17 +74,31 @@ export class CoreTabComponent implements OnInit, OnDestroy {
loaded = false;
initialized = false;
_show = true;
+ tabElement: any;
- constructor(protected tabs: CoreTabsComponent, element: ElementRef, protected domUtils: CoreDomUtilsProvider) {
+ constructor(protected tabs: CoreTabsComponent, element: ElementRef, protected domUtils: CoreDomUtilsProvider,
+ utils: CoreUtilsProvider) {
this.element = element.nativeElement;
+
+ this.element.setAttribute('role', 'tabpanel');
+ this.element.setAttribute('tabindex', '0');
+ this.id = this.id || 'core-tab-' + utils.getUniqueId('CoreTabComponent');
}
/**
* Component being initialized.
*/
ngOnInit(): void {
+ this.element.setAttribute('aria-labelledby', this.id + '-tab');
+ this.element.setAttribute('id', this.id);
+
this.tabs.addTab(this);
this.initialized = true;
+
+ setTimeout(() => {
+ this.tabElement = document.getElementById(this.id + '-tab');
+ this.tabElement && this.tabElement.setAttribute('aria-hidden', !this._show);
+ }, 1000);
}
/**
@@ -96,6 +114,11 @@ export class CoreTabComponent implements OnInit, OnDestroy {
selectTab(): void {
this.element.classList.add('selected');
+ this.tabElement = this.tabElement || document.getElementById(this.id + '-tab');
+
+ this.tabElement && this.tabElement.setAttribute('aria-selected', true);
+ this.tabElement && this.tabElement.setAttribute('aria-hidden', !this._show);
+
this.loaded = true;
this.ionSelect.emit(this);
this.showHideNavBarButtons(true);
@@ -114,6 +137,9 @@ export class CoreTabComponent implements OnInit, OnDestroy {
* Unselect tab.
*/
unselectTab(): void {
+ this.tabElement && this.tabElement.setAttribute('aria-selected', false);
+ this.tabElement && this.tabElement.setAttribute('aria-hidden', true);
+
this.element.classList.remove('selected');
this.showHideNavBarButtons(false);
}
diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss
index 4c2cfc506..d20bee9de 100644
--- a/src/components/tabs/tabs.scss
+++ b/src/components/tabs/tabs.scss
@@ -10,19 +10,20 @@ ion-app.app-root .core-tabs-bar {
width: 100%;
}
- a.tab-slide {
+ ion-slide.tab-slide {
@extend .tab-button;
background: $core-top-tabs-background;
color: $core-top-tabs-color !important;
font-size: 1.6rem;
- border: 0;
- padding: 0 5px 0 5px !important;
+ border-bottom: 2px solid transparent !important;
+ padding: 0 2px 0 2px !important;
margin: 0 auto !important;
display: flex;
- flex-direction: row;
+ flex: none;
+ min-width: 100px;
- span {
+ div {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
@@ -44,9 +45,12 @@ ion-app.app-root .core-tabs-bar {
&[aria-selected=true] {
color: $core-top-tabs-color-active !important;
- border: 0 !important;
- border-bottom: 2px solid $core-top-tabs-border-active !important;
- padding: 0 !important;
+ border-bottom-color: $core-top-tabs-border-active !important;
+ }
+
+ .slide-zoom {
+ display: flex;
+ flex-direction: column;
}
}
@@ -64,7 +68,7 @@ ion-app.app-root .core-tabs-bar {
}
}
-ion-app.app-root.md .core-tabs-bar a.tab-slide {
+ion-app.app-root.md .core-tabs-bar ion-slide.tab-slide {
// @extend .tabs-md .tab-button;
min-height: $tabs-md-tab-min-height;
@@ -72,7 +76,7 @@ ion-app.app-root.md .core-tabs-bar a.tab-slide {
color: $tabs-md-tab-text-color;
}
-ion-app.app-root.ios .core-tabs-bar a.tab-slide {
+ion-app.app-root.ios .core-tabs-bar ion-slide.tab-slide {
// @extend .tabs-ios .tab-button;
max-width: $tabs-ios-tab-max-width;
min-height: $tabs-ios-tab-min-height;
@@ -82,7 +86,7 @@ ion-app.app-root.ios .core-tabs-bar a.tab-slide {
color: $tabs-ios-tab-text-color;
}
-ion-app.app-root.wp .core-tabs-bar a.tab-slide {
+ion-app.app-root.wp .core-tabs-bar ion-slide.tab-slide {
//@extend .tabs-wp .tab-button;
@include border-radius(0);
@@ -124,6 +128,7 @@ ion-app.app-root core-tabs {
display: none;
height: 100%;
position: relative;
+ z-index: 1;
&.selected {
display: block;
diff --git a/src/components/tabs/tabs.ts b/src/components/tabs/tabs.ts
index 1e38c3cd8..042f727fd 100644
--- a/src/components/tabs/tabs.ts
+++ b/src/components/tabs/tabs.ts
@@ -62,6 +62,7 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges, OnDe
slidesShown = this.maxSlides;
numTabsShown = 0;
direction = 'ltr';
+ description = '';
protected originalTabsContainer: HTMLElement; // The container of the original tabs. It will include each tab's content.
protected initialized = false;
@@ -238,8 +239,8 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges, OnDe
/**
* Get the index of tab.
*
- * @param {any} tab [description]
- * @return {number} [description]
+ * @param {any} tab Tab object to check.
+ * @return {number} Index number on the tabs array or -1 if not found.
*/
getIndex(tab: any): number {
for (let i = 0; i < this.tabs.length; i++) {
diff --git a/src/components/timer/core-timer.html b/src/components/timer/core-timer.html
index 03c48900c..729a8803e 100644
--- a/src/components/timer/core-timer.html
+++ b/src/components/timer/core-timer.html
@@ -1,5 +1,5 @@
-
-
+
+
0">{{ timeLeft | coreSecondsToHMS }}
{{ 'core.timesup' | translate }}
diff --git a/src/core/course/components/format/core-course-format.html b/src/core/course/components/format/core-course-format.html
index 687f76937..30ae329e3 100644
--- a/src/core/course/components/format/core-course-format.html
+++ b/src/core/course/components/format/core-course-format.html
@@ -11,7 +11,7 @@
-