fix(android): NavigationButton was read as "Button" by screenreaders. (…

…#5949) The navigation button for the vision-impaired users were always read as: "Button" by the TalkBack service on Android.
NativeScript · Jun 14, 2018 · 0e04cb4 · 0e04cb4
1 parent b0afd3a
commit 0e04cb4
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/tests/app/ui/action-bar/action-bar-tests.android.ts b/tests/app/ui/action-bar/action-bar-tests.android.ts
@@ -32,6 +32,19 @@ export function test_navigationButton_visibility() {
     TKUnit.assertNull(toolbar.getNavigationIcon(), "Visibility does not work");
 }
 
+export function test_navigationButton_contentDecription() {
+    const actionItem = new ActionItem();
+    actionItem.icon = "~/small-image.png";
+    const actionItemText = "NavButton with small-image";
+    actionItem.text = actionItemText;
+    const page = actionTestsCommon.createPageAndNavigate();
+    page.actionBar.navigationButton = actionItem;
+
+    const toolbar = <android.support.v7.widget.Toolbar>page.actionBar.nativeViewProtected;
+
+    TKUnit.assertEqual(toolbar.getNavigationContentDescription(), actionItemText, "Navigation Button should have an content decription");
+}
+
 export function test_set_actionView_to_attached_actionItem_propagates_context() {
     const actionItem = new ActionItem();
     const actionButton = new Button();
@@ -72,4 +85,4 @@ export function test_add_actionItem_with_actionView_propagates_context() {
     TKUnit.assertNull(actionButton._context, "Action button context should be null before added");
     actionItem.actionView = actionButton;
     TKUnit.assertNotNull(actionButton._context, "Action button context should not be null after add");
-}
+}
diff --git a/tns-core-modules/ui/action-bar/action-bar.android.ts b/tns-core-modules/ui/action-bar/action-bar.android.ts
@@ -223,6 +223,9 @@ export class ActionBar extends ActionBarBase {
                 this.nativeViewProtected.setNavigationIcon(drawableOrId);
             }
 
+            // Set navigation content descripion, used by screen readers for the vision-impaired users
+            this.nativeViewProtected.setNavigationContentDescription(navButton.text || null);
+
             let navBtn = new WeakRef(navButton);
             this.nativeViewProtected.setNavigationOnClickListener(new android.view.View.OnClickListener({
                 onClick: function (v) {
@@ -285,7 +288,7 @@ export class ActionBar extends ActionBarBase {
             let menuItem = menu.add(android.view.Menu.NONE, item._getItemId(), android.view.Menu.NONE, item.text + "");
 
             if (item.actionView && item.actionView.android) {
-                // With custom action view, the menuitem cannot be displayed in a popup menu. 
+                // With custom action view, the menuitem cannot be displayed in a popup menu.
                 item.android.position = "actionBar";
                 menuItem.setActionView(item.actionView.android);
                 ActionBar._setOnClickListener(item);
@@ -376,7 +379,7 @@ export class ActionBar extends ActionBarBase {
             }
 
             // Fallback to hardcoded falue if we don't find TextView instance...
-            // using new TextView().getTextColors().getDefaultColor() returns different value: -1979711488 
+            // using new TextView().getTextColors().getDefaultColor() returns different value: -1979711488
             defaultTitleTextColor = tv ? tv.getTextColors().getDefaultColor() : -570425344;
         }
 
@@ -468,4 +471,4 @@ function getIconVisibility(iconVisibility: string): boolean {
 
 function getSystemResourceId(systemIcon: string): number {
     return android.content.res.Resources.getSystem().getIdentifier(systemIcon, "drawable", "android");
-}
+}