Fix #3432: [A11y] Content description for rich text based images

utility/src/main/java/org/oppia/android/util/parser/html/CustomHtmlContentHandler.kt

@@ -113,6 +113,8 @@ class CustomHtmlContentHandler private constructor(
  customTagHandlers.getValue(tag).handleClosingTag(output)
  customTagHandlers.getValue(tag)
  .handleTag(attributes, openTagIndex, output.length, output, imageRetriever)
+ customTagHandlers.getValue(tag)
+ .handleContentDescription(attributes, openTagIndex, output.length, output)
  }
  }
  }
@@ -163,6 +165,21 @@ class CustomHtmlContentHandler private constructor(
  * @param output the destination [Editable] to which spans can be added
  */
  fun handleClosingTag(output: Editable) {}
+
+ /**
+ * Called when a custom tag is encountered. This is always called after the closing tag.
+ *
+ * @param attributes the tag's attributes
+ * @param openIndex the index in the output [Editable] at which this tag begins
+ * @param closeIndex the index in the output [Editable] at which this tag ends
+ * @param output the destination [Editable] to which spans can be added
+ */
+ fun handleContentDescription(
+ attributes: Attributes,
+ openIndex: Int,
+ closeIndex: Int,
+ output: Editable
+ ) {}
  }
 
  /**

utility/src/main/java/org/oppia/android/util/parser/html/ImageTagHandler.kt

@@ -2,13 +2,15 @@ package org.oppia.android.util.parser.html
 
 import android.text.Editable
 import android.text.Spannable
+import android.text.SpannableStringBuilder
 import android.text.style.ImageSpan
 import org.oppia.android.util.logging.ConsoleLogger
 import org.xml.sax.Attributes
 
 /** The custom tag corresponding to [ImageTagHandler]. */
 const val CUSTOM_IMG_TAG = "oppia-noninteractive-image"
 private const val CUSTOM_IMG_FILE_PATH_ATTRIBUTE = "filepath-with-value"
+private const val CUSTOM_IMG_ALT_TEXT_ATTRIBUTE = "alt-with-value"
 
 /**
  * A custom tag handler for supporting custom Oppia images parsed with [CustomHtmlContentHandler].
@@ -43,6 +45,25 @@ class ImageTagHandler(
  endIndex,
  Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
  )
- } else consoleLogger.e("ImageTagHandler", "Failed to parse image tag")
+ } else consoleLogger.e("ImageTagHandler", "Failed to parse $CUSTOM_IMG_FILE_PATH_ATTRIBUTE")
+ }
+
+ override fun handleContentDescription(
+ attributes: Attributes,
+ openIndex: Int,
+ closeIndex: Int,
+ output: Editable
+ ) {
+ val contentDescription = attributes.getJsonStringValue(CUSTOM_IMG_ALT_TEXT_ATTRIBUTE)
+ if (contentDescription != null) {
+ val spannableBuilder = SpannableStringBuilder(contentDescription)
+ spannableBuilder.setSpan(
+ contentDescription,
+ /* start= */0,
+ /* end= */ contentDescription.length,
+ Spannable.SPAN_INCLUSIVE_EXCLUSIVE
+ )
+ output.replace(openIndex, closeIndex, spannableBuilder)
+ } else consoleLogger.e("ImageTagHandler", "Failed to parse $CUSTOM_IMG_ALT_TEXT_ATTRIBUTE")
  }
 }

utility/src/test/java/org/oppia/android/util/parser/html/ImageTagHandlerTest.kt

@@ -50,6 +50,10 @@ private const val IMAGE_TAG_WITHOUT_FILEPATH_MARKUP =
  "<oppia-noninteractive-image alt-with-value=\"&amp;quot;alt text 2&amp;quot;\" " +
  "caption-with-value=\"&amp;quot;&amp;quot;\"></oppia-noninteractive-image>"
 
+private const val IMAGE_TAG_WITHOUT_ALT_VALUE_MARKUP =
+ "<oppia-noninteractive-image caption-with-value=\"&amp;quot;&amp;quot;\" " +
+ "filepath-with-value=\"&amp;quot;test_image1.png&amp;quot;\"></oppia-noninteractive-image>"
+
 /** Tests for [ImageTagHandler]. */
 @RunWith(AndroidJUnit4::class)
 @LooperMode(LooperMode.Mode.PAUSED)
@@ -109,7 +113,7 @@ class ImageTagHandlerTest {
  fun testParseHtml_withImageCardMarkup_hasNoReadableText() {
  val parsedHtml =
  CustomHtmlContentHandler.fromHtml(
- html = IMAGE_TAG_MARKUP_1,
+ html = IMAGE_TAG_WITHOUT_ALT_VALUE_MARKUP,
  imageRetriever = mockImageRetriever,
  customTagHandlers = tagHandlersWithImageTagSupport
  )
@@ -120,6 +124,22 @@ class ImageTagHandlerTest {
  assertThat(parsedHtmlStr.first().isObjectReplacementCharacter()).isTrue()
  }
 
+ @Test
+ fun testParseHtml_withImageCardMarkup_missingAltValue_hasReadableText() {
+ val parsedHtml =
+ CustomHtmlContentHandler.fromHtml(
+ html = IMAGE_TAG_MARKUP_1,
+ imageRetriever = mockImageRetriever,
+ customTagHandlers = tagHandlersWithImageTagSupport
+ )
+
+ // The image only adds a control character, so there aren't any human-readable characters.
+ val parsedHtmlStr = parsedHtml.toString()
+ val parsedContentDescription = "alt text 1"
+ assertThat(parsedHtmlStr).hasLength(parsedContentDescription.length)
+ assertThat(parsedHtmlStr.first().isObjectReplacementCharacter()).isFalse()
+ }
+
  @Test
  fun testParseHtml_withImageCardMarkup_missingFilename_doesNotIncludeImageSpan() {
  val parsedHtml =