From a21c7597d798ced0930ae8203d94dde820ff6db4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 10 Jun 2021 16:33:30 +0200
Subject: [PATCH] MOBILE-3320 survey: Improve radio buttons a11y

---
 .../survey/components/index/addon-mod-survey-index.html    | 7 ++++---
 src/addons/mod/survey/components/index/index.scss          | 6 ++++++
 src/theme/components/format-text.scss                      | 5 +++++
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/addons/mod/survey/components/index/addon-mod-survey-index.html b/src/addons/mod/survey/components/index/addon-mod-survey-index.html
index 6f024a1d5..c3f2ea353 100644
--- a/src/addons/mod/survey/components/index/addon-mod-survey-index.html
+++ b/src/addons/mod/survey/components/index/addon-mod-survey-index.html
@@ -79,7 +79,7 @@
 
                 <!-- Subquestion -->
                 <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-label id="addon-mod_survey-{{question.id}}">
@@ -91,9 +91,10 @@
 
                         <!-- Tablet view: radio buttons -->
                         <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 -->
-                            <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-col>
                         <ion-col class="ion-hide-md-up" size="5">
diff --git a/src/addons/mod/survey/components/index/index.scss b/src/addons/mod/survey/components/index/index.scss
index 261e20841..87933f475 100644
--- a/src/addons/mod/survey/components/index/index.scss
+++ b/src/addons/mod/survey/components/index/index.scss
@@ -17,6 +17,12 @@
     .even {
         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) {
diff --git a/src/theme/components/format-text.scss b/src/theme/components/format-text.scss
index 423de0eaa..06176a466 100644
--- a/src/theme/components/format-text.scss
+++ b/src/theme/components/format-text.scss
@@ -180,6 +180,11 @@ core-format-text {
         ion-icon {
             flex: 1;
             align-self: center;
+            /** Fix iOS icon size */
+            margin: 0 auto;
+            position: absolute;
+            left: 0;
+            right: 0;
         }
 
         &:hover {