Fixes #3906: Incorrect output for rich text in hints and solution (#4666

)

## Explanation
Fixes #3906: Fixed the overall accessibility of Hints and Solution as
follows:
- Parse HTML to normal string for content description
- Improved flow of screen reader by removing repetitive content
description.
- Changed content description of expand_list_icon and also improve the
flow by making expand_list_icon clickable and not clickable based on
talkback reader.

## Essential Checklist
<!-- Please tick the relevant boxes by putting an "x" in them. -->
- [x] The PR title and explanation each start with "Fix #bugnum: " (If
this PR fixes part of an issue, prefix the title with "Fix part of
#bugnum: ...".)
- [x] Any changes to
[scripts/assets](https://github.com/oppia/oppia-android/tree/develop/scripts/assets)
files have their rationale included in the PR explanation.
- [x] The PR follows the [style
guide](https://github.com/oppia/oppia-android/wiki/Coding-style-guide).
- [x] The PR does not contain any unnecessary code changes from Android
Studio
([reference](https://github.com/oppia/oppia-android/wiki/Guidance-on-submitting-a-PR#undo-unnecessary-changes)).
- [x] The PR is made from a branch that's **not** called "develop" and
is up-to-date with "develop".
- [x] The PR is **assigned** to the appropriate reviewers
([reference](https://github.com/oppia/oppia-android/wiki/Guidance-on-submitting-a-PR#clarification-regarding-assignees-and-reviewers-section)).

### Video for Hints



https://user-images.githubusercontent.com/43074241/198126083-88b1ea29-3726-43e5-895e-de64166a6515.mp4


### Video for Solution



https://user-images.githubusercontent.com/43074241/198126121-59b56e5c-4003-4047-a6c9-4595430f3a8b.mp4

app/src/main/java/org/oppia/android/app/hintsandsolution/HintsAndSolutionDialogFragmentPresenter.kt

@@ -20,6 +20,7 @@ import org.oppia.android.databinding.HintsAndSolutionFragmentBinding
 import org.oppia.android.databinding.HintsSummaryBinding
 import org.oppia.android.databinding.ReturnToLessonButtonItemBinding
 import org.oppia.android.databinding.SolutionSummaryBinding
+import org.oppia.android.util.accessibility.AccessibilityService
 import org.oppia.android.util.gcsresource.DefaultResourceBucketName
 import org.oppia.android.util.parser.html.ExplorationHtmlParserEntityType
 import org.oppia.android.util.parser.html.HtmlParser
@@ -39,6 +40,8 @@ class HintsAndSolutionDialogFragmentPresenter @Inject constructor(
   private val multiTypeBuilderFactory: BindableAdapter.MultiTypeBuilder.Factory
 ) {
 
+  @Inject
+  lateinit var accessibilityService: AccessibilityService
   private var index: Int? = null
   private var expandedItemsList = ArrayList<Int>()
   private var isHintRevealed: Boolean? = null
@@ -228,11 +231,25 @@ class HintsAndSolutionDialogFragmentPresenter @Inject constructor(
       }
     }
 
+    binding.expandHintListIcon.setOnClickListener {
+      if (hintsViewModel.isHintRevealed.get()!!) {
+        expandOrCollapseItem(position)
+      }
+    }
+
     binding.root.setOnClickListener {
       if (hintsViewModel.isHintRevealed.get()!!) {
         expandOrCollapseItem(position)
       }
     }
+
+    if (accessibilityService.isScreenReaderEnabled()) {
+      binding.root.isClickable = false
+      binding.expandHintListIcon.isClickable = true
+    } else {
+      binding.root.isClickable = true
+      binding.expandHintListIcon.isClickable = false
+    }
   }
 
   private fun expandOrCollapseItem(position: Int) {
@@ -289,11 +306,25 @@ class HintsAndSolutionDialogFragmentPresenter @Inject constructor(
       }
     }
 
+    binding.expandSolutionListIcon.setOnClickListener {
+      if (solutionViewModel.isSolutionRevealed.get()!!) {
+        expandOrCollapseItem(position)
+      }
+    }
+
     binding.root.setOnClickListener {
       if (solutionViewModel.isSolutionRevealed.get()!!) {
         expandOrCollapseItem(position)
       }
     }
+
+    if (accessibilityService.isScreenReaderEnabled()) {
+      binding.root.isClickable = false
+      binding.expandSolutionListIcon.isClickable = true
+    } else {
+      binding.root.isClickable = true
+      binding.expandSolutionListIcon.isClickable = false
+    }
   }
 
   private fun bindReturnToLessonViewModel(

app/src/main/java/org/oppia/android/app/hintsandsolution/HintsViewModel.kt

@@ -12,6 +12,7 @@ import org.oppia.android.app.translation.AppLanguageResourceHandler
 import org.oppia.android.domain.hintsandsolution.isHintRevealed
 import org.oppia.android.domain.hintsandsolution.isSolutionRevealed
 import org.oppia.android.domain.translation.TranslationController
+import org.oppia.android.util.parser.html.CustomHtmlContentHandler
 import javax.inject.Inject
 
 private const val DEFAULT_HINT_AND_SOLUTION_SUMMARY = ""
@@ -79,11 +80,14 @@ class HintsViewModel @Inject constructor(
     return itemList
   }
 
-  fun computeHintListDropDownIconContentDescription(): String {
-    return resourceHandler.getStringInLocaleWithWrapping(
-      R.string.show_hide_hint_list,
-      hintsAndSolutionSummary.get() ?: DEFAULT_HINT_AND_SOLUTION_SUMMARY
-    )
+  fun computeHintContentDescription(): String {
+    return hintsAndSolutionSummary.get()?.let {
+      CustomHtmlContentHandler.fromHtml(
+        it,
+        imageRetriever = null,
+        customTagHandlers = mapOf()
+      ).toString()
+    } ?: DEFAULT_HINT_AND_SOLUTION_SUMMARY
   }
 
   private fun addHintToList(hintIndex: Int, hint: Hint) {

app/src/main/java/org/oppia/android/app/hintsandsolution/SolutionViewModel.kt

@@ -2,6 +2,7 @@ package org.oppia.android.app.hintsandsolution
 
 import androidx.databinding.ObservableField
 import androidx.lifecycle.ViewModel
+import org.oppia.android.util.parser.html.CustomHtmlContentHandler
 
 /** [ViewModel] for Solution in [HintsAndSolutionDialogFragment]. */
 class SolutionViewModel : HintsAndSolutionItemViewModel() {
@@ -14,4 +15,14 @@ class SolutionViewModel : HintsAndSolutionItemViewModel() {
   val title = ObservableField<String>("")
   val isSolutionRevealed = ObservableField<Boolean>(false)
   val solutionCanBeRevealed = ObservableField<Boolean>(false)
+
+  fun computeSolutionContentDescription(): String {
+    return solutionSummary.get()?.let {
+      CustomHtmlContentHandler.fromHtml(
+        it,
+        imageRetriever = null,
+        customTagHandlers = mapOf()
+      ).toString()
+    } ?: ""
+  }
 }

app/src/main/res/layout/hints_summary.xml

@@ -17,7 +17,8 @@
 
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
-    android:layout_height="wrap_content">
+    android:layout_height="wrap_content"
+    android:importantForAccessibility="no">
 
     <com.google.android.material.card.MaterialCardView
       android:id="@+id/hint_summary_container"
@@ -85,16 +86,16 @@
             app:layout_constraintStart_toEndOf="@+id/hint_title"
             app:layout_constraintTop_toTopOf="parent" />
 
-          <ImageView
-            android:id="@+id/expand_list_icon"
+          <ImageButton
+            android:id="@+id/expand_hint_list_icon"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_gravity="center_vertical"
             android:layout_marginStart="8dp"
             android:layout_marginTop="8dp"
             android:layout_marginEnd="8dp"
             android:layout_marginBottom="4dp"
-            android:contentDescription="@{viewModel.computeHintListDropDownIconContentDescription()}"
+            android:contentDescription="@{isListExpanded? @string/hide_hint : @string/reveal_hint}"
             android:minWidth="48dp"
             android:minHeight="48dp"
             android:padding="8dp"
@@ -123,6 +124,7 @@
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:background="@color/component_color_hints_and_solution_summary_bottom_background_color"
+          android:contentDescription="@{viewModel.computeHintContentDescription()}"
           android:fontFamily="sans-serif"
           android:paddingStart="12dp"
           android:paddingTop="16dp"

app/src/main/res/layout/solution_summary.xml

@@ -17,7 +17,8 @@
 
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
-    android:layout_height="wrap_content">
+    android:layout_height="wrap_content"
+    android:importantForAccessibility="no">
 
     <com.google.android.material.card.MaterialCardView
       android:id="@+id/solution_summary_container"
@@ -84,16 +85,16 @@
             app:layout_constraintStart_toEndOf="@+id/hint_title"
             app:layout_constraintTop_toTopOf="parent" />
 
-          <ImageView
-            android:id="@+id/expand_list_icon"
+          <ImageButton
+            android:id="@+id/expand_solution_list_icon"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_gravity="center_vertical"
             android:layout_marginStart="8dp"
             android:layout_marginTop="8dp"
             android:layout_marginEnd="8dp"
             android:layout_marginBottom="4dp"
-            android:contentDescription="@string/show_hide_solution_list"
+            android:contentDescription="@{isListExpanded? @string/hide_solution : @string/show_solution}"
             android:minWidth="48dp"
             android:minHeight="48dp"
             android:padding="8dp"
@@ -131,6 +132,7 @@
           <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
+            android:importantForAccessibility="yes"
             android:orientation="horizontal">
 
             <TextView
@@ -157,6 +159,7 @@
           <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
+            android:importantForAccessibility="yes"
             android:orientation="vertical">
 
             <TextView
@@ -175,6 +178,7 @@
               style="@style/TextViewStart"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
+              android:contentDescription="@{viewModel.computeSolutionContentDescription()}"
               android:fontFamily="sans-serif"
               android:textColor="@color/component_color_hints_and_solutions_fragment_description_color"
               android:textSize="16sp" />

app/src/main/res/values-ar/strings.xml

@@ -355,8 +355,6 @@
   <string name="hints_toolbar_title">الملاحظات</string>
   <string name="reveal_solution">عرض الحل</string>
   <string name="reveal_hint" fuzzy="true">عرض الملاحظة</string>
-  <string name="show_hide_hint_list">عرض/إخفاء قائمة الملاحظات الخاصة ب%s</string>
-  <string name="show_hide_solution_list">عرض/إخفاء الحل</string>
   <string name="the_only_solution_is">الحل الوحيد هو :</string>
   <string name="this_will_reveal_the_solution">سوف يتم إظهار الحل. هل أنت متأكد؟</string>
   <string name="reveal">إظهار</string>

app/src/main/res/values-pt-rBR/strings.xml

@@ -383,11 +383,8 @@
   <string name="show_hints_and_solution">Mostrar dicas e solução</string>
   <string name="hints_andSolution_close_icon_description">Navegar para cima</string>
   <string name="hints_toolbar_title">Dicas</string>
-  <string name="show_solution">Exibir</string>
   <string name="reveal_solution">Revelar Solução</string>
   <string name="reveal_hint">Revelar Dica</string>
-  <string name="show_hide_hint_list">Mostrar/Esconder lista de dicas de %s</string>
-  <string name="show_hide_solution_list">Mostrar/Esconder solução</string>
   <string name="the_only_solution_is">A única solução é :</string>
   <string name="this_will_reveal_the_solution">Isso revelará a solução. Tem certeza?</string>
   <string name="reveal">Revelar</string>

app/src/main/res/values-sw/strings.xml

@@ -362,8 +362,6 @@
   <string name="hints_toolbar_title">Vidokezo</string>
   <string name="reveal_solution">Fichua Suluhisho</string>
   <string name="reveal_hint" fuzzy="true">Fichua Kidokezo</string>
-  <string name="show_hide_hint_list">Onyesha/Ficha orodha ya vidokezo ya %s</string>
-  <string name="show_hide_solution_list">Onyesha/Ficha suluhisho</string>
   <string name="the_only_solution_is">Suluhisho pekee ni:</string>
   <string name="this_will_reveal_the_solution">Hii itafichua suluhisho. Una uhakika?</string>
   <string name="reveal">Fichua</string>

app/src/main/res/values/strings.xml

@@ -440,11 +440,11 @@
   <string name="hint_list_item_number">Hint %s</string>
   <string name="hints_andSolution_close_icon_description">Navigate up</string>
   <string name="hints_toolbar_title">Hints</string>
-  <string name="show_solution">Show</string>
+  <string name="show_solution">Show solution</string>
   <string name="reveal_solution">Reveal Solution</string>
   <string name="reveal_hint">Show Hint</string>
-  <string name="show_hide_hint_list">Show/Hide hint list of %s</string>
-  <string name="show_hide_solution_list">Show/Hide solution</string>
+  <string name="hide_hint">Hide Hint</string>
+  <string name="hide_solution">Hide solution</string>
   <string name="the_only_solution_is">The only solution is :  </string>
   <string name="this_will_reveal_the_solution">This will reveal the solution. Are you sure?</string>
   <string name="reveal">Reveal</string>