TextInputView accessibility improvements (#38)

* Update material version

* Update hint content description to include error and counter

* Improve counter message

* Update content description where text has been entered

* Tidy up and update changelog

* ensure character count is updated each time

* Tidy up

* Fix space in annoucement

* tidy up

Author: jemmaSlater

CHANGELOG.md

@@ -16,9 +16,13 @@ Allowed headings:
 
 ## [Unreleased]
 
-### Changed
+### Added
 
 * Added ability to set error content descriptions on `TextInputView`
+
+### Changed
+
+* Improved content description for `TextInputView` to announce the error and counter status along with the hint on talkback.
 * Upgrade target and compile sdk versions to 30
 * Upgrade Gradle plugin to 4.1.3
 * Upgrade Kotlin version to 1.4.20

README.md

@@ -285,7 +285,7 @@ multi_column_row.setText1AsHeading(true)
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     app:text="@string/text"
-    app:overrideHintContentDescription="@string/content_description"
+    app:hintContentDescription="@string/content_description"
     app:counterEnabled="true"
     app:counterMaxLength="@integer/max_length"
     app:hintText="@string/hint_text" />

components/src/main/java/uk/gov/hmrc/components/molecule/input/TextInputView.kt

@@ -16,6 +16,8 @@
 package uk.gov.hmrc.components.molecule.input
 
 import android.content.Context
+import android.os.Build.VERSION
+import android.os.Build.VERSION_CODES.O
 import android.os.Bundle
 import android.os.Parcelable
 import android.text.InputFilter
@@ -52,14 +54,15 @@ open class TextInputView @JvmOverloads constructor(
             binding.root.id = value
         }
 
+    private var hintContentDescription: String? = null
+
     init {
 
         attrs?.let {
             val typedArray = context.theme.obtainStyledAttributes(it, R.styleable.TextInputView, 0, 0)
 
             val textString = typedArray.getString(R.styleable.TextInputView_text) ?: ""
-            val overrideHintContentDescription = typedArray.getString(
-                R.styleable.TextInputView_overrideHintContentDescription)
+            val hintTextContentDescription = typedArray.getString(R.styleable.TextInputView_hintContentDescription)
             val hintText = typedArray.getString(R.styleable.TextInputView_hintText) ?: ""
             val errorText = typedArray.getString(R.styleable.TextInputView_errorText) ?: ""
             val counterMaxLength = typedArray.getInt(R.styleable.TextInputView_counterMaxLength, NO_MAX_LENGTH)
@@ -70,8 +73,7 @@ open class TextInputView @JvmOverloads constructor(
             val maxLength = typedArray.getInt(R.styleable.TextInputView_android_maxLength, -1)
 
             setText(textString)
-            overrideHintContentDescription(overrideHintContentDescription)
-            setHint(hintText)
+            setHint(hintText, hintTextContentDescription)
             setError(errorText)
             setCounterMaxLength(counterMaxLength)
             setCounterEnabled(counterEnabled)
@@ -108,30 +110,20 @@ open class TextInputView @JvmOverloads constructor(
 
     fun getText(): String? = getEditText().text?.toString()
 
-    fun overrideHintContentDescription(contentDescription: CharSequence?) {
-        contentDescription ?: return
-
-        binding.root.apply {
-            setTextInputAccessibilityDelegate(object : TextInputLayout.AccessibilityDelegate(this) {
-                override fun onInitializeAccessibilityNodeInfo(host: View, info: AccessibilityNodeInfoCompat) {
-                    super.onInitializeAccessibilityNodeInfo(host, info)
-                    val before = info.text.toString()
-                    val after = before.replace(hint.toString(), contentDescription.toString())
-                    info.text = after
-                }
-            })
-        }
-    }
-
-    fun setHint(hint: CharSequence) {
+    fun setHint(hint: CharSequence, contentDescription: CharSequence? = null) {
         binding.root.hint = hint
+        hintContentDescription = (contentDescription ?: hint).toString()
+        updateTextInputViewContentDescription()
     }
 
     fun getError() = binding.root.error
 
     fun setError(errorText: CharSequence?, errorContentDescription: CharSequence? = null) {
         binding.root.error = errorText
-        binding.root.errorContentDescription = errorContentDescription ?: errorText
+        binding.root.errorContentDescription = errorContentDescription ?: if (!errorText.isNullOrEmpty()) {
+            context.getString(R.string.accessibility_error_prefix, errorText)
+        } else null
+        updateTextInputViewContentDescription()
     }
 
     fun setErrorText(@StringRes error: Int?, @StringRes errorContentDescription: Int? = null) {
@@ -145,10 +137,12 @@ open class TextInputView @JvmOverloads constructor(
 
     fun setCounterMaxLength(maxLength: Int) {
         binding.root.counterMaxLength = maxLength
+        updateTextInputViewContentDescription()
     }
 
     fun setCounterEnabled(enabled: Boolean) {
         binding.root.isCounterEnabled = enabled
+        updateTextInputViewContentDescription()
     }
 
     fun setPrefixText(prefixText: CharSequence?) {
@@ -177,6 +171,53 @@ open class TextInputView @JvmOverloads constructor(
 
     fun getEditText(): TextInputEditText = binding.root.findViewWithTag("edit_text")
 
+    private fun updateTextInputViewContentDescription() {
+        binding.root.apply {
+            setTextInputAccessibilityDelegate(object : TextInputLayout.AccessibilityDelegate(this) {
+                override fun onInitializeAccessibilityNodeInfo(host: View, info: AccessibilityNodeInfoCompat) {
+                    super.onInitializeAccessibilityNodeInfo(host, info)
+
+                    val customHint = hintContentDescription ?: hint
+
+                    val error = if (errorContentDescription.isNullOrEmpty()) "" else ", $errorContentDescription"
+
+                    val counter = if (isCounterEnabled) {
+                        val currentChars = if (getText().isNullOrEmpty()) 0 else getText()!!.length
+                        val maxLength = counterMaxLength
+
+                        val limitExceededText = if (currentChars > maxLength) {
+                            "${context.getString(R.string.accessibility_counter_limit_exceeded)} "
+                        } else ""
+
+                        val counterText = context.getString(
+                            R.string.accessibility_counter_state,
+                            currentChars.toString(),
+                            maxLength.toString())
+
+                        ", $limitExceededText$counterText"
+                    } else ""
+
+                    val newContentDescription = "$customHint$error$counter"
+
+                    val showingText = !getText().isNullOrEmpty()
+                    if (VERSION.SDK_INT >= O) {
+                        if (showingText) {
+                            info.hintText = newContentDescription
+                        } else {
+                            info.text = newContentDescription
+                        }
+                    } else {
+                        // Due to a TalkBack bug, setHintText has no effect in APIs < 26 so we append the hint to
+                        // the text announcement. The resulting announcement is the same as in APIs >= 26.
+                        info.text = if (showingText) {
+                            getText() + ", " + newContentDescription
+                        } else newContentDescription
+                    }
+                }
+            })
+        }
+    }
+
     companion object {
         private const val STATE_TEXT = "STATE_TEXT"
         private const val STATE_SUPER = "STATE_SUPER"

components/src/main/res/values/attrs.xml

@@ -39,7 +39,7 @@
         <!-- Text to display. -->
         <attr name="text" />
         <!-- Hint content description. -->
-        <attr name="overrideHintContentDescription" format="string" />
+        <attr name="hintContentDescription" format="string" />
         <!-- Hint text. -->
         <attr name="hintText" format="string" />
         <!-- Error text. -->

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

@@ -37,6 +37,9 @@
     <string name="accessibility_radio_button">radio button</string>
     <string name="accessibility_list_position">%1d of %2d</string>
     <string name="accessibility_tab_position">tab %1d of %2d</string>
+    <string name="accessibility_error_prefix">Error: %s</string>
+    <string name="accessibility_counter_state">%1$s characters of %2$s used</string>
+    <string name="accessibility_counter_limit_exceeded">Character limit exceeded</string>
 
     <string name="currency_input_prefix">£</string>
 </resources>

sample/src/main/res/layout/fragment_text_input.xml

@@ -30,7 +30,6 @@
                 android:layout_marginStart="@dimen/hmrc_spacing_16"
                 android:layout_marginTop="@dimen/hmrc_spacing_16"
                 android:layout_marginEnd="@dimen/hmrc_spacing_16"
-                app:contentDescription="@string/text_input_placeholder_hint"
                 app:counterEnabled="true"
                 app:counterMaxLength="@integer/text_input_placeholder_max_length"
                 app:hintText="@string/text_input_placeholder_hint" />
@@ -57,7 +56,9 @@
                     android:layout_marginStart="@dimen/hmrc_spacing_16"
                     android:layout_marginTop="@dimen/hmrc_spacing_16"
                     android:layout_marginEnd="@dimen/hmrc_spacing_16"
-                    app:overrideHintContentDescription="@string/text_input_example_1_content_description"
+                    app:counterEnabled="true"
+                    app:counterMaxLength="@integer/text_input_placeholder_max_length"
+                    app:hintContentDescription="@string/text_input_example_1_content_description"
                     app:hintText="@string/text_input_example_1_hint" />
 
                 <uk.gov.hmrc.components.molecule.input.TextInputView