Merge pull request #25 from hmrc/accessibility/warnings_and_info_mess…

…ages

Add ability to update content description for InformationMessageCardView

CHANGELOG.md

@@ -16,6 +16,10 @@ Allowed headings:
 
 ## [Unreleased]
 
+### Added
+
+* Added ability for `InformationMessageCardView` to add a custom content description to headline
+
 ## [3.8.0] - 2021-02-04
 
 ### Changed

README.md

@@ -646,6 +646,7 @@ If you need padding on your dividers, you can set `android:dividerPadding="@dime
     android:layout_height="wrap_content"
     android:layout_margin="@dimen/hmrc_spacing_16"
     app:headline="@string/info_message_placeholder_headline"
+    app:headlineContentDescription="@string/headlineContentDescription"
     app:headlineIcon="@drawable/ic_info"
     app:type="urgent" />
 ```

components/src/main/java/uk/gov/hmrc/components/molecule/warning/WarningView.kt

@@ -67,6 +67,10 @@ class WarningView @JvmOverloads constructor(
 
     fun setText(@StringRes id: Int) = setText(context.getString(id))
 
+    fun updateContentDescription(textContentDescription: String) {
+        contentDescription = textContentDescription
+    }
+
     fun setTextColor(@ColorRes textColor: Int) {
         binding.text.setTextColor(ContextCompat.getColor(context, textColor))
     }

components/src/main/java/uk/gov/hmrc/components/organism/information/InformationMessageCardView.kt

@@ -48,11 +48,13 @@ class InformationMessageCardView @JvmOverloads constructor(
         }
 
     init {
-
         attrs?.let { attributeSet ->
             val typedArray = context.theme
                 .obtainStyledAttributes(attributeSet, R.styleable.InformationMessageCardView, 0, 0)
             setHeadline(typedArray.getString(R.styleable.InformationMessageCardView_headline))
+            typedArray.getString(R.styleable.InformationMessageCardView_headlineContentDescription)?.let {
+                setHeadlineContentDescription(it)
+            }
             setHeadlineIcon(typedArray.getResourceId(R.styleable.InformationMessageCardView_headlineIcon, NO_ICON))
             val typeOrdinal = typedArray.getInt(R.styleable.InformationMessageCardView_type, -1)
             if (typeOrdinal != -1) {
@@ -71,6 +73,10 @@ class InformationMessageCardView @JvmOverloads constructor(
         binding.warningView.setText(headline)
     }
 
+    fun setHeadlineContentDescription(contentDesc: String) {
+        binding.warningView.updateContentDescription(contentDesc)
+    }
+
     fun setHeadlineIcon(resId: Int) {
         binding.warningView.setIcon(resId)
     }

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

@@ -250,6 +250,8 @@
     <declare-styleable name="InformationMessageCardView">
         <!-- Headline to display at top of card. -->
         <attr name="headline" />
+        <!-- Headline content description. -->
+        <attr name="headlineContentDescription" />
         <!-- Icon to display next to the headline text. -->
         <attr name="headlineIcon" format="reference" />
         <!-- Type of message -->

sample/src/main/java/uk/gov/hmrc/components/sample/organisms/InformationMessageCardFragment.kt

@@ -44,6 +44,9 @@ class InformationMessageCardFragment : BaseComponentsFragment() {
                 SecondaryButton(requireContext()).apply { setText(R.string.info_message_placeholder_headline_button) }
             ))
 
+        binding.infoMessageExample1
+            .setHeadlineContentDescription(getString(R.string.info_message_example_1_headline_content_description))
+
         binding.infoMessageExample2.setHeadlineButtons(listOf(
             SecondaryButton(requireContext()).apply { setText(R.string.info_message_example_2_button) }
         ))

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

@@ -58,6 +58,7 @@
             android:layout_margin="@dimen/hmrc_spacing_16"
             app:type="notice"
             app:headline="@string/info_message_example_3_headline"
+            app:headlineContentDescription="@string/info_message_example_3_headline_content_description"
             app:headlineIcon="@drawable/components_ic_warning" />
 
     </LinearLayout>

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

@@ -334,11 +334,13 @@
     <string name="info_message_placeholder_headline">Headline</string>
     <string name="info_message_placeholder_headline_button">Headline button</string>
     <string name="info_message_example_1_headline">Info message</string>
+    <string name="info_message_example_1_headline_content_description">Info message content description</string>
     <string name="info_message_example_1_button_primary">A primary action</string>
     <string name="info_message_example_1_button_secondary">A secondary action</string>
     <string name="info_message_example_2_headline">Warning message</string>
     <string name="info_message_example_2_button">Do something</string>
     <string name="info_message_example_3_headline">Notice message</string>
+    <string name="info_message_example_3_headline_content_description">Notice message content description</string>
 
     <!--  Menu Panel Row View  -->
     <string name="menu_panel_placeholder_title">Title</string>