EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3320 survey: Improve radio buttons a11y

main
Pau Ferrer Ocaña 2021-06-10 16:33:30 +02:00
parent 67e6a45b2d
commit a21c7597d7
3 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/addons/mod/survey/components/index/addon-mod-survey-index.html
View File

@ -79,7 +79,7 @@
<!-- Subquestion --> <!-- Subquestion -->
<ion-radio-group [(ngModel)]="answers[question.name]" [required]="question.required" [name]="question.name"> <ion-radio-group [(ngModel)]="answers[question.name]" [required]="question.required" [name]="question.name">
<ion-row *ngIf="question.parent !== 0" class="ion-align-items-center ion-padding" [class.even]="isEven"> <ion-row *ngIf="question.parent !== 0" class="ion-align-items-center ion-padding-horizontal" [class.even]="isEven">
<ion-col size="7"> <ion-col size="7">
<ion-label id="addon-mod_survey-{{question.id}}"> <ion-label id="addon-mod_survey-{{question.id}}">
@ -91,9 +91,10 @@
<!-- Tablet view: radio buttons --> <!-- Tablet view: radio buttons -->
<ion-col class="ion-hide-md-down ion-text-center" size="1" <ion-col class="ion-hide-md-down ion-text-center" size="1"
*ngFor="let option of question.optionsArray; let value=index;"> *ngFor="let option of question.optionsArray; let value=index;"
>
<!-- Empty slot to avoid errors on migration tslint checks --> <!-- Empty slot to avoid errors on migration tslint checks -->
<ion-radio [value]="value + 1" [attr.aria-labelledby]="'addon-mod_survey-'+question.id" slot=""> <ion-radio [value]="value + 1" [attr.aria-label]="question.num + '. '+question.text + ': ' + option">
</ion-radio> </ion-radio>
</ion-col> </ion-col>
<ion-col class="ion-hide-md-up" size="5"> <ion-col class="ion-hide-md-up" size="5">

6
src/addons/mod/survey/components/index/index.scss
View File

@ -17,6 +17,12 @@
.even { .even {
background-color: var(--even-background); background-color: var(--even-background);
} }
ion-radio {
height: var(--a11y-min-target-size);
width: var(--a11y-min-target-size);
padding: 12px;
}
} }
:host-context(body.dark) { :host-context(body.dark) {

5
src/theme/components/format-text.scss
View File

@ -180,6 +180,11 @@ core-format-text {
ion-icon { ion-icon {
flex: 1; flex: 1;
align-self: center; align-self: center;
/** Fix iOS icon size */
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
} }
&:hover { &:hover {