GuzhavinAleksey/Vmeda.Online
1
0
Fork 0
forked from CIT/Vmeda.Online
Code Pull Requests Activity

MOBILE-3752 a11y: Minor accessibility improvements

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2021-05-13 12:05:43 +02:00
parent 79d3c081ff
commit 5d20d4faa7
16 changed files with 29 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/addons/mod/data/data-forms.scss
View File

@ -22,8 +22,6 @@
.addon-data-advanced-search {
padding: 16px;
width: 100%;
// @todo check if needed
// @include safe-area-padding-horizontal(16px !important, 16px !important);
}
.addon-data-contents form,

2
src/addons/mod/data/data.scss
View File

@ -17,8 +17,6 @@ $grid-column-paddings: (
white-space: normal;
word-break: break-word;
padding: 16px;
// @todo check if needed
// @include safe-area-padding-horizontal(16px !important, 16px !important);
background-color: var(--ion-item-background);
border-width: 1px 0;

31
src/core/components/file/file.scss
View File

@ -1,31 +0,0 @@
:host {
// @todo
// .card-md core-file + core-file > .item-md.item-block > .item-inner,
// core-file + core-file > .item-md.item-block > .item-inner {
// border-top: 1px solid $list-md-border-color;
// }
// .card-ios core-file + core-file > .item-ios.item-block > .item-inner,
// core-file + core-file > .item-ios.item-block > .item-inner {
// border-top: $hairlines-width solid $list-ios-border-color;
// .buttons {
// min-height: 53px;
// min-width: 58px;
// }
// }
// core-file > .item.item-block > .item-inner {
// border-bottom: 0;
// @include safe-area-padding(null, 0px, null, null);
// .buttons {
// display: flex;
// flex-flow: row;
// align-items: center;
// z-index: 1;
// justify-content: space-around;
// align-content: center;
// min-height: 52px;
// min-width: 53px;
// }
// }
}

1
src/core/components/file/file.ts
View File

@ -34,7 +34,6 @@ import { CoreWSFile } from '@services/ws';
@Component({
selector: 'core-file',
templateUrl: 'core-file.html',
styleUrls: ['file.scss'],
})
export class CoreFileComponent implements OnInit, OnDestroy {

2
src/core/components/user-avatar/user-avatar.scss
View File

@ -1,5 +1,7 @@
:host {
position: relative;
width: var(--core-avatar-size);
height: var(--core-avatar-size);
.clickable {
cursor: pointer;

5
src/core/features/block/components/block/block.scss
View File

@ -4,9 +4,6 @@
background: var(--background);
ion-item-divider {
min-height: 60px;
.core-button-spinner {
margin: 0;
}
min-height: var(--item-divider-min-height);
}
}

2
src/core/features/block/components/course-blocks/course-blocks.scss
View File

@ -16,7 +16,6 @@
box-shadow: none !important;
flex-grow: 1;
max-width: 100%;
// @todo @include core-split-area-start();
}
div.core-course-blocks-side {
@ -24,7 +23,6 @@
min-width: var(--side-blocks-min-width);
box-shadow: var(--side-blocks-box-shadow);
z-index: 2;
// @todo @include core-split-area-end();
}
.core-course-blocks-content,

27
src/core/features/course/components/format/format.scss
View File

@ -52,31 +52,4 @@
}
}
// @todo
// .item-divider {
// .label {
// margin-top: 0;
// margin-bottom: 0;
// }
// core-format-text {
// line-height: 44px;
// }
// ion-badge core-format-text {
// line-height: normal;
// margin-bottom: 9px;
// }
// &.core-section-download .label{
// @include margin(null, 0, null, null);
// }
// }
// div.core-section-download {
// @include padding(null, 0, null, null);
// }
//
}

17
src/core/features/course/components/module-description/course-module-description.scss
View File

@ -1,17 +0,0 @@
// @todo Review commented styles.
// ion-app.app-root {
// .safe-area-page,
// .safe-padding-horizontal {
// core-course-module-description {
// padding-left: 0 !important;
// padding-right: 0 !important;
// .item-ios.item-block {
// @include safe-area-padding-horizontal($item-ios-padding-end / 2, null);
// .item-inner {
// @include safe-area-padding-horizontal(null, $item-ios-padding-end / 2);
// }
// }
// }
// }
// }

7
src/core/features/courses/components/course-list-item/core-courses-course-list-item.html
View File

@ -28,7 +28,10 @@
</p>
</ion-label>
<ng-container *ngIf="!isEnrolled">
<ion-icon *ngFor="let icon of icons" color="dark" size="small"
[name]="icon.icon" [attr.aria-label]="icon.label | translate" slot="end"></ion-icon>
<ion-icon *ngFor="let icon of icons" color="dark" size="small" [name]="icon.icon"
[title]="icon.label | translate"
[attr.aria-label]="icon.label | translate"
slot="end">
</ion-icon>
</ng-container>
</ion-item>

2
src/core/features/login/pages/site/site.html
View File

@ -93,7 +93,7 @@
(ionCancel)="filterChanged()" [placeholder]="'core.login.findyoursite' | translate">
</ion-searchbar>
<ng-container *ngFor="let site of filteredSites">
<ng-container *ngTemplateOutlet="site"></ng-container>
<ng-container *ngTemplateOutlet="sitelisting; context: {site: site}"></ng-container>
</ng-container>
</ion-list>
</ng-container>

8
src/core/features/login/pages/site/site.scss
View File

@ -2,14 +2,6 @@
margin-bottom: 20px;
}
.searchbar-ios {
background: transparent;
.searchbar-input {
background-color: white; // @todo $searchbar-ios-toolbar-input-background;
}
}
.item {
&.core-login-need-help {
margin-top: 16px;

7
src/core/features/mainmenu/pages/home/home.scss
View File

@ -17,10 +17,3 @@ $core-dashboard-logo: false !default;
display: none;
}
}
ion-badge.core-course-download-courses-progress {
display: block;
// @include float(start);
// @include margin(12px, 12px, null, 12px);
}

4
src/core/features/search/components/search-box/core-search-box.html
View File

@ -6,11 +6,11 @@
[autocorrect]="autocorrect" [spellcheck]="spellcheck" [core-auto-focus]="autoFocus"
[disabled]="disabled" role="searchbox" (ionFocus)="focus($event)">
</ion-input>
<ion-button slot="end" fill="clear" type="submit" size="small" [attr.aria-label]="searchLabel"
<ion-button slot="end" fill="clear" type="submit" [attr.aria-label]="searchLabel"
[disabled]="disabled || !searchText || (searchText.length < lengthCheck)">
<ion-icon name="fas-search" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-button>
<ion-button *ngIf="showClear" slot="end" fill="clear" size="small"
<ion-button *ngIf="showClear" slot="end" fill="clear"
[attr.aria-label]="'core.clearsearch' | translate" [disabled]="searched == '' || disabled"
(click)="clearForm()">
<ion-icon name="fas-backspace" slot="icon-only" aria-hidden="true"></ion-icon>

4
src/theme/globals.variables.scss
View File

@ -228,7 +228,7 @@ $core-login-text-color-dark: $white !default;
$core-star-color: $brand-color !default;
$core-large-avatar-size: 90px !default;
$core-avatar-size: 40px !default;
$core-avatar-size: 44px !default;
$core-send-message-input-background: $gray !default;
$core-send-message-input-color: $black !default;
@ -252,7 +252,7 @@ $addon-messages-avatar-size: 30px !default;
$addon-messages-discussion-badge: $primary !default;
$addon-messages-discussion-badge-text: $white !default;
$addon-forum-avatar-size: 28px !default;
$addon-forum-avatar-size: 44px !default;
$addon-forum-border-color: $gray !default;
$addon-forum-highlight-color: $gray-lighter !default;

21
src/theme/theme.base.scss
View File

@ -1,4 +1,4 @@
@import "./globals.mixins.ionic.scss";
@import "./globals.scss";
// Common styles.
.text-left { text-align: left; }
@ -126,7 +126,9 @@ ion-button.button-small ion-icon.faicon[slot] {
font-size: 1.5em !important;
}
[dir=rtl] ion-icon.icon-flip-rtl {
[dir=rtl] ion-icon.icon-flip-rtl,
[dir=rtl] ion-item::part(detail-icon),
[dir=rtl] ion-icon.item-detail-icon {
transform: scaleX(-1);
}
@ -206,7 +208,7 @@ ion-toolbar {
// Modals.
.core-modal-fullscreen .modal-wrapper {
position: absolute;
// @todo @include position(0 !important, null, null, 0 !important);
@include position(0 !important, null, null, 0 !important);
display: block;
width: 100% !important;
height: 100% !important;
@ -218,11 +220,10 @@ ion-toolbar {
@media only screen and (min-height: 400px) and (min-width: 300px) {
.core-modal-lateral {
// @todo @include core-split-area-end();
.modal-wrapper {
position: absolute;
@include position(0 !important, 0 !important, 0 !important, auto);
@include position(0 !important, 0 !important, 0 !important, unset !important);
display: block;
height: 100% !important;
width: auto;
@ -425,6 +426,16 @@ ion-select::part(text) {
text-decoration: underline;
}
core-block ion-item-divider .core-button-spinner {
display: flex;
align-items: center;
@include margin-horizontal(10px);
ion-badge.core-course-download-courses-progress {
@include margin(null, 12px, null, null);
}
}
// Horizontal scrolling elements
.core-horizontal-scroll {
display: flex;