Fixes part of #40 and Fixes part of #42: Highfi ItemSelectionInteract…

…ion + A11y (#3170) * Highfi work finished * Nit space in comment * A11y support * Added tests * Nit fix * Ignored failing test cases Co-authored-by: Rajat Talesra <[email protected]>
oppia · May 11, 2021 · ed0f274 · ed0f274
1 parent 91bc858
commit ed0f274
Show file tree

Hide file tree

Showing 12 changed files with 95 additions and 201 deletions.
diff --git a/app/src/main/res/layout-land/selection_interaction_item.xml b/app/src/main/res/layout-land/selection_interaction_item.xml
diff --git a/app/src/main/res/layout-sw600dp-land/selection_interaction_item.xml b/app/src/main/res/layout-sw600dp-land/selection_interaction_item.xml
diff --git a/app/src/main/res/layout-sw600dp-port/selection_interaction_item.xml b/app/src/main/res/layout-sw600dp-port/selection_interaction_item.xml
diff --git a/app/src/main/res/layout/feedback_item.xml b/app/src/main/res/layout/feedback_item.xml
@@ -39,7 +39,7 @@
     app:explorationViewPaddingStart="@{@dimen/feedback_item_exploration_view_padding_start}"
     app:explorationViewPaddingTop="@{@dimen/feedback_item_exploration_view_padding_top}"
     app:questionSplitViewMarginApplicable="@{!viewModel.hasConversationView &amp;&amp; viewModel.isSplitView}"
-    app:questionSplitViewMarginBottom="@{@dimen/feedback_item_question_split_view_margin_bottom}"
+    app:questionSplitViewMarginBottom="@{@dimen/space_0dp}"
     app:questionSplitViewMarginEnd="@{@dimen/feedback_item_question_split_view_margin_end}"
     app:questionSplitViewMarginStart="@{@dimen/feedback_item_question_split_view_margin_start}"
     app:questionSplitViewMarginTop="@{@dimen/feedback_item_question_split_view_margin_top}"
@@ -49,7 +49,7 @@
     app:questionSplitViewPaddingStart="@{@dimen/space_0dp}"
     app:questionSplitViewPaddingTop="@{@dimen/space_0dp}"
     app:questionViewMarginApplicable="@{!viewModel.hasConversationView &amp;&amp; !viewModel.isSplitView}"
-    app:questionViewMarginBottom="@{@dimen/feedback_item_question_view_margin_bottom}"
+    app:questionViewMarginBottom="@{@dimen/space_0dp}"
     app:questionViewMarginEnd="@{@dimen/feedback_item_question_view_margin_end}"
     app:questionViewMarginStart="@{@dimen/feedback_item_question_view_margin_start}"
     app:questionViewMarginTop="@{@dimen/feedback_item_question_view_margin_top}"

diff --git a/app/src/main/res/layout/item_selection_interaction_items.xml b/app/src/main/res/layout/item_selection_interaction_items.xml
@@ -17,28 +17,30 @@
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:gravity="center_vertical"
+    android:importantForAccessibility="yes"
     android:minHeight="48dp"
     android:onClick="@{(v) -> viewModel.handleItemClicked()}"
-    android:paddingTop="8dp"
-    android:paddingBottom="8dp">
+    android:paddingTop="12dp"
+    android:paddingBottom="12dp">
 
     <androidx.appcompat.widget.AppCompatCheckBox
       android:id="@+id/item_selection_checkbox"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:checked="@{viewModel.answerSelected}"
       android:clickable="false"
+      android:focusable="false"
+      android:labelFor="@id/item_selection_contents_text_view"
       app:buttonTint="@color/oppiaDarkBlue" />
 
     <TextView
       android:id="@+id/item_selection_contents_text_view"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
-      android:layout_marginStart="4dp"
+      android:layout_marginStart="8dp"
+      android:layout_marginTop="4dp"
       android:layout_toEndOf="@+id/item_selection_checkbox"
       android:fontFamily="sans-serif"
-      android:paddingTop="4dp"
-      android:paddingBottom="4dp"
       android:text="@{htmlContent}"
       android:textColor="@color/oppiaDarkBlue"
       android:textSize="16sp" />

diff --git a/app/src/main/res/layout/multiple_choice_interaction_items.xml b/app/src/main/res/layout/multiple_choice_interaction_items.xml
@@ -17,28 +17,30 @@
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:gravity="center_vertical"
+    android:importantForAccessibility="yes"
     android:minHeight="48dp"
     android:onClick="@{(v) -> viewModel.handleItemClicked()}"
-    android:paddingTop="8dp"
-    android:paddingBottom="8dp">
+    android:paddingTop="12dp"
+    android:paddingBottom="12dp">
 
     <androidx.appcompat.widget.AppCompatRadioButton
       android:id="@+id/multiple_choice_radio_button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:checked="@{viewModel.answerSelected}"
       android:clickable="false"
+      android:focusable="false"
+      android:labelFor="@id/multiple_choice_content_text_view"
       app:buttonTint="@color/oppiaDarkBlue" />
 
     <TextView
       android:id="@+id/multiple_choice_content_text_view"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
-      android:layout_marginStart="4dp"
+      android:layout_marginStart="12dp"
+      android:layout_marginTop="4dp"
       android:layout_toEndOf="@+id/multiple_choice_radio_button"
       android:fontFamily="sans-serif"
-      android:paddingTop="4dp"
-      android:paddingBottom="4dp"
       android:text="@{htmlContent}"
       android:textColor="@color/oppiaDarkBlue"
       android:textSize="16sp" />

diff --git a/app/src/main/res/layout/selection_interaction_item.xml b/app/src/main/res/layout/selection_interaction_item.xml
@@ -23,7 +23,9 @@
     android:descendantFocusability="beforeDescendants"
     android:focusableInTouchMode="true"
     android:orientation="vertical"
+    android:paddingStart="@dimen/selection_interaction_item_padding_start"
     android:paddingTop="12dp"
+    android:paddingEnd="@dimen/selection_interaction_item_padding_end"
     android:paddingBottom="12dp"
     app:layoutMarginEnd="@{viewModel.hasConversationView ? @dimen/selection_interaction_item_conversation_view_margin_end : @dimen/selection_interaction_item_non_conversation_view_margin_end}"
     app:layoutMarginStart="@{viewModel.hasConversationView ? @dimen/selection_interaction_item_conversation_view_margin_start : @dimen/selection_interaction_item_non_conversation_view_margin_start}"
@@ -33,9 +35,7 @@
     <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
-      android:layout_marginStart="16dp"
       android:layout_marginTop="4dp"
-      android:layout_marginEnd="16dp"
       android:layout_marginBottom="4dp"
       android:fontFamily="sans-serif-light"
       android:text="@string/item_selection_text"
@@ -48,8 +48,6 @@
       android:id="@+id/selection_interaction_recyclerview"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
-      android:layout_marginStart="12dp"
-      android:layout_marginEnd="12dp"
       android:divider="@android:color/transparent"
       app:allOptionsItemInputType="@{viewModel.getSelectionItemInputType()}"
       app:data="@{viewModel.choiceItems}"

diff --git a/app/src/main/res/values-land/dimens.xml b/app/src/main/res/values-land/dimens.xml
@@ -128,11 +128,13 @@
   <dimen name="feedback_item_question_split_view_margin_start">32dp</dimen>
   <dimen name="feedback_item_question_split_view_margin_top">24dp</dimen>
   <dimen name="feedback_item_question_split_view_margin_end">32dp</dimen>
-  <dimen name="feedback_item_question_split_view_margin_bottom">8dp</dimen>
 
   <!-- Feedback Item: Question View -->
   <dimen name="feedback_item_question_view_margin_start">64dp</dimen>
   <dimen name="feedback_item_question_view_margin_top">24dp</dimen>
   <dimen name="feedback_item_question_view_margin_end">64dp</dimen>
-  <dimen name="feedback_item_question_view_margin_bottom">8dp</dimen>
+
+  <!-- Selection Interaction Item -->
+  <dimen name="selection_interaction_item_padding_start">16dp</dimen>
+  <dimen name="selection_interaction_item_padding_end">16dp</dimen>
 </resources>
diff --git a/app/src/main/res/values-sw600dp-land/dimens.xml b/app/src/main/res/values-sw600dp-land/dimens.xml
@@ -178,11 +178,13 @@
   <dimen name="feedback_item_question_split_view_margin_start">32dp</dimen>
   <dimen name="feedback_item_question_split_view_margin_top">24dp</dimen>
   <dimen name="feedback_item_question_split_view_margin_end">32dp</dimen>
-  <dimen name="feedback_item_question_split_view_margin_bottom">8dp</dimen>
 
   <!-- Feedback Item: Question View -->
   <dimen name="feedback_item_question_view_margin_start">192dp</dimen>
   <dimen name="feedback_item_question_view_margin_top">24dp</dimen>
   <dimen name="feedback_item_question_view_margin_end">192dp</dimen>
-  <dimen name="feedback_item_question_view_margin_bottom">8dp</dimen>
+
+  <!-- Selection Interaction Item -->
+  <dimen name="selection_interaction_item_padding_start">24dp</dimen>
+  <dimen name="selection_interaction_item_padding_end">24dp</dimen>
 </resources>
diff --git a/app/src/main/res/values-sw600dp-port/dimens.xml b/app/src/main/res/values-sw600dp-port/dimens.xml
@@ -183,11 +183,13 @@
   <dimen name="feedback_item_question_split_view_margin_start">32dp</dimen>
   <dimen name="feedback_item_question_split_view_margin_top">24dp</dimen>
   <dimen name="feedback_item_question_split_view_margin_end">32dp</dimen>
-  <dimen name="feedback_item_question_split_view_margin_bottom">8dp</dimen>
 
   <!-- Feedback Item: Question View -->
   <dimen name="feedback_item_question_view_margin_start">128dp</dimen>
   <dimen name="feedback_item_question_view_margin_top">24dp</dimen>
   <dimen name="feedback_item_question_view_margin_end">128dp</dimen>
-  <dimen name="feedback_item_question_view_margin_bottom">8dp</dimen>
+
+  <!-- Selection Interaction Item -->
+  <dimen name="selection_interaction_item_padding_start">24dp</dimen>
+  <dimen name="selection_interaction_item_padding_end">24dp</dimen>
 </resources>
diff --git a/app/src/main/res/values/dimens.xml b/app/src/main/res/values/dimens.xml
@@ -384,11 +384,13 @@
   <dimen name="feedback_item_question_split_view_margin_start">32dp</dimen>
   <dimen name="feedback_item_question_split_view_margin_top">24dp</dimen>
   <dimen name="feedback_item_question_split_view_margin_end">32dp</dimen>
-  <dimen name="feedback_item_question_split_view_margin_bottom">8dp</dimen>
 
   <!-- Feedback Item: Question View -->
   <dimen name="feedback_item_question_view_margin_start">32dp</dimen>
   <dimen name="feedback_item_question_view_margin_top">24dp</dimen>
   <dimen name="feedback_item_question_view_margin_end">32dp</dimen>
-  <dimen name="feedback_item_question_view_margin_bottom">8dp</dimen>
+
+  <!-- Selection Interaction Item -->
+  <dimen name="selection_interaction_item_padding_start">16dp</dimen>
+  <dimen name="selection_interaction_item_padding_end">16dp</dimen>
 </resources>