Merge pull request #883 from wordpress-mobile/issue/accessible-formatting-toolbar

Accessibility : Improve TalkBack behavior of the formatting toolbar

Author: khaykov

aztec/src/main/kotlin/org/wordpress/aztec/toolbar/AztecToolbar.kt

@@ -32,6 +32,7 @@ import org.wordpress.aztec.R
 import org.wordpress.aztec.plugins.IMediaToolbarButton
 import org.wordpress.aztec.plugins.IToolbarButton
 import org.wordpress.aztec.source.SourceViewEditText
+import org.wordpress.aztec.util.convertToButtonAccessibilityProperties
 import java.util.Arrays
 import java.util.ArrayList
 import java.util.Locale
@@ -407,6 +408,7 @@ class AztecToolbar : FrameLayout, IAztecToolbar, OnMenuItemClickListener {
 
         setAdvancedState()
         setupMediaToolbar()
+        setupToolbarButtonsForAccessibility()
 
         for (toolbarAction in ToolbarAction.values()) {
             val button = findViewById<ToggleButton>(toolbarAction.buttonId)
@@ -434,7 +436,33 @@ class AztecToolbar : FrameLayout, IAztecToolbar, OnMenuItemClickListener {
         toolbarButtonPlugins.add(buttonPlugin)
 
         val button = findViewById<ToggleButton>(buttonPlugin.action.buttonId)
-        button.setOnClickListener { _: View -> buttonPlugin.toggle() }
+        button.setOnClickListener { buttonPlugin.toggle() }
+
+        setupMediaButtonForAccessibility(buttonPlugin)
+    }
+
+    private fun setupMediaButtonForAccessibility(buttonPlugin: IToolbarButton) {
+        val button = findViewById<ToggleButton>(buttonPlugin.action.buttonId)
+
+        if (buttonPlugin is IMediaToolbarButton) {
+            button.convertToButtonAccessibilityProperties()
+        }
+    }
+
+    private fun setupToolbarButtonsForAccessibility() {
+        val targetActions = listOf(ToolbarAction.ADD_MEDIA_EXPAND,
+                ToolbarAction.ADD_MEDIA_COLLAPSE,
+                ToolbarAction.HORIZONTAL_RULE,
+                ToolbarAction.HEADING,
+                ToolbarAction.LIST,
+                ToolbarAction.LINK
+        )
+
+        ToolbarAction.values().forEach { action ->
+            if (targetActions.contains(action)) {
+                findViewById<ToggleButton>(action.buttonId).convertToButtonAccessibilityProperties()
+            }
+        }
     }
 
     fun highlightActionButtons(toolbarActions: ArrayList<IToolbarAction>) {

aztec/src/main/kotlin/org/wordpress/aztec/util/Extensions.kt

@@ -5,7 +5,15 @@ import android.content.Context
 import android.text.Editable
 import android.text.Spannable
 import android.text.Spanned
+import android.view.View
+import android.view.accessibility.AccessibilityNodeInfo.ACTION_CLICK
+import android.widget.Button
+import android.widget.ToggleButton
+import androidx.core.view.AccessibilityDelegateCompat
+import androidx.core.view.ViewCompat
+import androidx.core.view.accessibility.AccessibilityNodeInfoCompat
 import org.wordpress.aztec.AztecParser
+import org.wordpress.aztec.R
 
 fun Editable.getLast(kind: Class<*>): Any? {
     val spans = this.getSpans(0, this.length, kind)
@@ -55,4 +63,19 @@ fun ClipData.Item.coerceToHtmlText(parser: AztecParser): String {
     }
 
     return text.toString()
-}
+}
+
+/**
+ * Some of the toggle button controls that exist on the Aztec formatting toolbar act as buttons but are
+ * announced as switches so this function converts the accessibility properties to that of a button.
+ */
+fun ToggleButton.convertToButtonAccessibilityProperties() {
+    ViewCompat.setAccessibilityDelegate(this, object : AccessibilityDelegateCompat() {
+        override fun onInitializeAccessibilityNodeInfo(host: View?, info: AccessibilityNodeInfoCompat?) {
+            super.onInitializeAccessibilityNodeInfo(host, info)
+            info?.className = Button::class.java.name
+            info?.isCheckable = false
+            info?.addAction(AccessibilityNodeInfoCompat.AccessibilityActionCompat(ACTION_CLICK, context.getString(R.string.accessibility_action_click_label)))
+        }
+    })
+}

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

@@ -3,6 +3,7 @@
     <!-- GENERAL -->
     <string name="cursor_moved">Cursor moved</string>
     <string name="samsung_disabled_custom_clipboard">Sorry, this feature is disabled on Android %1$s. Please use the Paste action instead.</string>
+    <string name="accessibility_action_click_label">activate</string>
 
     <!-- LINK DIALOG -->
     <string name="link_dialog_title">Insert link</string>

wordpress-comments/src/main/java/org/wordpress/aztec/plugins/wpcomments/toolbar/MoreToolbarButton.kt

@@ -16,6 +16,7 @@ import org.wordpress.aztec.plugins.wpcomments.spans.WordPressCommentSpan
 import org.wordpress.aztec.spans.IAztecNestable
 import org.wordpress.aztec.toolbar.AztecToolbar
 import org.wordpress.aztec.toolbar.IToolbarAction
+import org.wordpress.aztec.util.convertToButtonAccessibilityProperties
 
 class MoreToolbarButton(val visualEditor: AztecText) : IToolbarButton {
     override val action: IToolbarAction = CommentsToolbarAction.MORE
@@ -54,7 +55,9 @@ class MoreToolbarButton(val visualEditor: AztecText) : IToolbarButton {
     }
 
     override fun inflateButton(parent: ViewGroup) {
-        LayoutInflater.from(context).inflate(R.layout.more_button, parent)
+        val rootView = LayoutInflater.from(context).inflate(R.layout.more_button, parent)
+        val button = rootView.findViewById<ToggleButton>(R.id.format_bar_button_more)
+        button.convertToButtonAccessibilityProperties()
     }
 
     override fun toolbarStateAboutToChange(toolbar: AztecToolbar, enable: Boolean) {

wordpress-comments/src/main/java/org/wordpress/aztec/plugins/wpcomments/toolbar/PageToolbarButton.kt

@@ -6,6 +6,7 @@ import android.text.Spanned
 import android.view.KeyEvent
 import android.view.LayoutInflater
 import android.view.ViewGroup
+import android.widget.ToggleButton
 import org.wordpress.aztec.AztecText
 import org.wordpress.aztec.Constants
 import org.wordpress.aztec.plugins.IToolbarButton
@@ -14,6 +15,7 @@ import org.wordpress.aztec.plugins.wpcomments.spans.WordPressCommentSpan
 import org.wordpress.aztec.spans.IAztecNestable
 import org.wordpress.aztec.toolbar.AztecToolbar
 import org.wordpress.aztec.toolbar.IToolbarAction
+import org.wordpress.aztec.util.convertToButtonAccessibilityProperties
 
 class PageToolbarButton(val visualEditor: AztecText) : IToolbarButton {
 
@@ -49,7 +51,9 @@ class PageToolbarButton(val visualEditor: AztecText) : IToolbarButton {
     }
 
     override fun inflateButton(parent: ViewGroup) {
-        LayoutInflater.from(context).inflate(R.layout.page_button, parent)
+        val rootView = LayoutInflater.from(context).inflate(R.layout.page_button, parent)
+        val button = rootView.findViewById<ToggleButton>(R.id.format_bar_button_page)
+        button.convertToButtonAccessibilityProperties()
     }
 
     override fun toolbarStateAboutToChange(toolbar: AztecToolbar, enable: Boolean) {