Merge pull request #596 from pvagner/a11y

more a11y tweaks

CHANGES.md

@@ -10,7 +10,7 @@ Improvements:
  - Handle read markers (#84)
 
 Other changes:
- -
+ - Accessibility improvements to read receipts in the room timeline and reactions emoji chooser
 
 Bugfix:
  - Fix issue on upload error in loop (#587)

vector/src/main/java/im/vector/riotx/core/ui/views/ReadReceiptsView.kt

@@ -28,6 +28,7 @@ import im.vector.riotx.features.home.room.detail.timeline.item.ReadReceiptData
 import kotlinx.android.synthetic.main.view_read_receipts.view.*
 
 private const val MAX_RECEIPT_DISPLAYED = 5
+private const val MAX_RECEIPT_DESCRIBED = 4
 
 class ReadReceiptsView @JvmOverloads constructor(
         context: Context,
@@ -51,6 +52,7 @@ class ReadReceiptsView @JvmOverloads constructor(
         setOnClickListener(clickListener)
         if (readReceipts.isNotEmpty()) {
             isVisible = true
+            val displayNames = arrayListOf<String>()
             for (index in 0 until MAX_RECEIPT_DISPLAYED) {
                 val receiptData = readReceipts.getOrNull(index)
                 if (receiptData == null) {
@@ -58,6 +60,9 @@ class ReadReceiptsView @JvmOverloads constructor(
                 } else {
                     receiptAvatars[index].visibility = View.VISIBLE
                     avatarRenderer.render(receiptData.avatarUrl, receiptData.userId, receiptData.displayName, receiptAvatars[index])
+                    if (null !=receiptData.displayName && displayNames.size <MAX_RECEIPT_DESCRIBED) {
+                        displayNames.add(receiptData.displayName);
+                    }
                 }
             }
             if (readReceipts.size > MAX_RECEIPT_DISPLAYED) {
@@ -68,6 +73,14 @@ class ReadReceiptsView @JvmOverloads constructor(
             } else {
                 receiptMore.visibility = View.GONE
             }
+            when (displayNames.size) {
+                0 -> setContentDescription(context.getResources().getQuantityString(R.plurals.fallback_users_read, readReceipts.size))
+                1 -> setContentDescription(context.getString(R.string.one_user_read, displayNames.get(0)))
+                2 -> setContentDescription(context.getString(R.string.two_users_read, displayNames.get(0), displayNames.get(1)))
+                3 -> setContentDescription(context.getString(R.string.three_users_read, displayNames.get(0), displayNames.get(1), displayNames.get(2)))
+                else -> setContentDescription(context.getString(R.string.two_and_some_others_read,
+                    displayNames.get(0), displayNames.get(1), (readReceipts.size -2)))
+            }
         } else {
             isVisible = false
         }

vector/src/main/java/im/vector/riotx/features/home/room/detail/RoomDetailFragment.kt

@@ -260,9 +260,9 @@ class RoomDetailFragment :
         roomDetailViewModel.selectSubscribe(RoomDetailViewState::sendMode) { mode ->
             when (mode) {
                 is SendMode.REGULAR -> renderRegularMode(mode.text)
-                is SendMode.EDIT    -> renderSpecialMode(mode.timelineEvent, R.drawable.ic_edit, mode.text)
+                is SendMode.EDIT    -> renderSpecialMode(mode.timelineEvent, R.drawable.ic_edit, R.string.edit, mode.text)
-                is SendMode.QUOTE   -> renderSpecialMode(mode.timelineEvent, R.drawable.ic_quote, mode.text)
+                is SendMode.QUOTE   -> renderSpecialMode(mode.timelineEvent, R.drawable.ic_quote, R.string.quote, mode.text)
-                is SendMode.REPLY   -> renderSpecialMode(mode.timelineEvent, R.drawable.ic_reply, mode.text)
+                is SendMode.REPLY   -> renderSpecialMode(mode.timelineEvent, R.drawable.ic_reply, R.string.reply, mode.text)
             }
         }
 
@@ -357,10 +357,12 @@ class RoomDetailFragment :
         composerLayout.collapse()
 
         updateComposerText(text)
+        composerLayout.sendButton.setContentDescription(getString(R.string.send))
     }
 
     private fun renderSpecialMode(event: TimelineEvent,
                                   @DrawableRes iconRes: Int,
+                                 descriptionRes: Int,
                                   defaultContent: String) {
         commandAutocompletePolicy.enabled = false
         //switch to expanded bar
@@ -384,6 +386,8 @@ class RoomDetailFragment :
         updateComposerText(defaultContent)
 
         composerLayout.composerRelatedMessageActionIcon.setImageDrawable(ContextCompat.getDrawable(requireContext(), iconRes))
+        composerLayout.sendButton.setContentDescription(getString(descriptionRes))
+
 
         avatarRenderer.render(event.senderAvatar, event.root.senderId
                                                   ?: "", event.senderName, composerLayout.composerRelatedMessageAvatar)
@@ -592,6 +596,7 @@ class RoomDetailFragment :
                 Timber.w("Send button is locked")
                 return@setOnClickListener
             }
+            composerLayout.sendButton.setContentDescription(getString(R.string.send))
             val textMessage = composerLayout.composerEditText.text.toString()
             if (textMessage.isNotBlank()) {
                 lockSendButton = true

vector/src/main/java/im/vector/riotx/features/login/LoginFragment.kt

@@ -143,6 +143,7 @@ class LoginFragment : VectorBaseFragment() {
         passwordField.showPassword(passwordShown)
 
         passwordReveal.setImageResource(if (passwordShown) R.drawable.ic_eye_closed_black else R.drawable.ic_eye_black)
+        passwordReveal.setContentDescription(if (passwordShown) getString(R.string.a11y_hide_password) else getString(R.string.a11y_show_password))
     }
 
     override fun invalidate() = withState(viewModel) { state ->

vector/src/main/java/im/vector/riotx/features/reactions/EmojiReactionPickerActivity.kt

@@ -92,7 +92,10 @@ class EmojiReactionPickerActivity : VectorBaseActivity(), EmojiCompatFontProvide
             it.rawData?.categories?.let { categories ->
                 for (category in categories) {
                     val s = category.emojis[0]
-                    tabLayout.addTab(tabLayout.newTab().setText(it.rawData!!.emojis[s]!!.emojiString()))
+                    val newTab =tabLayout.newTab()
+                    newTab.setText(it.rawData!!.emojis[s]!!.emojiString())
+                    newTab.setContentDescription(category.name)
+                    tabLayout.addTab(newTab)
                 }
                 tabLayout.addOnTabSelectedListener(tabLayoutSelectionListener)
             }

vector/src/main/java/im/vector/riotx/features/reactions/EmojiRecyclerAdapter.kt

@@ -258,6 +258,7 @@ class EmojiRecyclerAdapter(val dataSource: EmojiDataSource? = null, var reaction
             emojiView.emoji = s
             if (s != null) {
                 emojiView.mLayout = getStaticLayoutForEmoji(s)
+                emojiView.setContentDescription(s)
                 placeHolder.visibility = View.GONE
 //                emojiView.visibility = View.VISIBLE
             } else {

vector/src/main/res/layout/fragment_login.xml

@@ -87,6 +87,7 @@
                     android:layout_marginTop="8dp"
                     android:background="?attr/selectableItemBackground"
                     android:scaleType="center"
+                    android:contentDescription="@string/a11y_show_password"
                     android:src="@drawable/ic_eye_black"
                     android:tint="?attr/colorAccent" />
 

vector/src/main/res/layout/fragment_room_detail.xml

@@ -166,6 +166,7 @@
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_margin="16dp"
+        android:contentDescription="@string/a11y_jump_to_bottom"
         android:src="@drawable/chevron_down"
         app:backgroundTint="#FFFFFF"
         app:badgeBackgroundColor="@color/riotx_accent"

vector/src/main/res/layout/merge_composer_layout.xml

@@ -71,8 +71,8 @@
         android:layout_width="22dp"
         android:layout_height="22dp"
         android:background="?android:attr/selectableItemBackground"
-        android:contentDescription="@string/action_close"
         android:src="@drawable/ic_close_round"
+        android:contentDescription="@string/cancel"
         android:tint="@color/riotx_notice"
         tools:ignore="MissingConstraints" />
 
@@ -89,8 +89,8 @@
         android:layout_width="0dp"
         android:layout_height="0dp"
         android:background="?android:attr/selectableItemBackground"
-        android:contentDescription="@string/send_attachment"
         android:src="@drawable/ic_attachment"
+        android:contentDescription="@string/option_send_files"
         android:tint="?attr/colorAccent"
         tools:ignore="MissingConstraints" />
 

vector/src/main/res/layout/view_read_receipts.xml

@@ -15,6 +15,7 @@
         android:background="?vctr_pill_receipt"
         android:paddingStart="4dp"
         android:paddingEnd="4dp"
+        android:importantForAccessibility = "no"
         tools:text="999+" />
 
     <ImageView

vector/src/main/res/values/strings_riotX.xml

@@ -21,6 +21,19 @@
     <string name="a11y_create_direct_message">Create a new direct conversation</string>
     <string name="a11y_create_room">Create a new room</string>
     <string name="a11y_close_keys_backup_banner">Close keys backup banner</string>
+    <string name="a11y_show_password">Show password</string>
+    <string name="a11y_hide_password">Hide password</string>
+    <string name="a11y_jump_to_bottom">Jump to bottom</string>
+
+    <!-- Read receipts list a11y -->
+    <string name="two_and_some_others_read">%s, %s and %d others read</string>
+    <string name="three_users_read">%s, %s and %s read</string>
+    <string name="two_users_read">%s and %s read</string>
+    <string name="one_user_read">%s read</string>
+    <plurals name="fallback_users_read">
+        <item quantity="one">1 user read</item>
+        <item quantity="other">%d users read</item>
+    </plurals>
 
     <string name="error_file_too_big">"The file '%1$s' (%2$s) is too large to upload. The limit is %3$s."</string>