Merge pull request #10741 from wordpress-mobile/issue/10734-accessibi…

…lity-reader-filters Accessibility : Reader Improvements
wordpress-mobile · Nov 14, 2019 · 3f99349 · 3f99349
2 parents 8ca3935 + 26635f4
commit 3f99349
Show file tree

Hide file tree

Showing 14 changed files with 110 additions and 21 deletions.
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/ActionableEmptyView.kt b/WordPress/src/main/java/org/wordpress/android/ui/ActionableEmptyView.kt
@@ -1,6 +1,7 @@
 package org.wordpress.android.ui
 
 import android.content.Context
+import android.text.TextUtils
 import android.util.AttributeSet
 import android.view.Gravity
 import android.view.View
@@ -36,7 +37,11 @@ class ActionableEmptyView : LinearLayout {
         initView(context, attrs)
     }
 
-    constructor(context: Context, attrs: AttributeSet, defStyle: Int) : super(context, attrs, defStyle) {
+    constructor(context: Context, attrs: AttributeSet, defStyle: Int) : super(
+            context,
+            attrs,
+            defStyle
+    ) {
         initView(context, attrs)
     }
 
@@ -55,9 +60,17 @@ class ActionableEmptyView : LinearLayout {
         bottomImage = layout.findViewById(R.id.bottom_image)
 
         attrs.let {
-            val typedArray = context.obtainStyledAttributes(it, R.styleable.ActionableEmptyView, 0, 0)
-
-            val imageResource = typedArray.getResourceId(R.styleable.ActionableEmptyView_aevImage, 0)
+            val typedArray = context.obtainStyledAttributes(
+                    it,
+                    R.styleable.ActionableEmptyView,
+                    0,
+                    0
+            )
+
+            val imageResource = typedArray.getResourceId(
+                    R.styleable.ActionableEmptyView_aevImage,
+                    0
+            )
             val titleAttribute = typedArray.getString(R.styleable.ActionableEmptyView_aevTitle)
             val subtitleAttribute = typedArray.getString(R.styleable.ActionableEmptyView_aevSubtitle)
             val buttonAttribute = typedArray.getString(R.styleable.ActionableEmptyView_aevButton)
@@ -99,17 +112,38 @@ class ActionableEmptyView : LinearLayout {
         val params: RelativeLayout.LayoutParams
 
         if (isSearching) {
-            params = RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT)
-            layout.setPadding(0, context.resources.getDimensionPixelSize(R.dimen.margin_extra_extra_large), 0, 0)
+            params = RelativeLayout.LayoutParams(
+                    LayoutParams.MATCH_PARENT,
+                    LayoutParams.WRAP_CONTENT
+            )
+            layout.setPadding(
+                    0,
+                    context.resources.getDimensionPixelSize(R.dimen.margin_extra_extra_large),
+                    0,
+                    0
+            )
 
             image.visibility = View.GONE
             button.visibility = View.GONE
         } else {
-            params = RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
+            params = RelativeLayout.LayoutParams(
+                    LayoutParams.MATCH_PARENT,
+                    LayoutParams.MATCH_PARENT
+            )
             layout.setPadding(0, 0, 0, 0)
         }
 
         params.topMargin = topMargin
         layout.layoutParams = params
     }
+
+    fun announceEmptyStateForAccessibility() {
+        val subTitle = if (!TextUtils.isEmpty(subtitle.contentDescription)) {
+            subtitle.contentDescription
+        } else {
+            subtitle.text
+        }
+
+        announceForAccessibility("${title.text}.$subTitle")
+    }
 }
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/reader/ReaderPostListFragment.java b/WordPress/src/main/java/org/wordpress/android/ui/reader/ReaderPostListFragment.java
@@ -1312,6 +1312,8 @@ private void setEmptyTitleAndDescriptionForBookmarksList() {
         mActionableEmptyView.image.setVisibility(View.VISIBLE);
         mActionableEmptyView.title.setText(R.string.reader_empty_saved_posts_title);
         mActionableEmptyView.subtitle.setText(ssb);
+        mActionableEmptyView.subtitle
+                .setContentDescription(getString(R.string.reader_empty_saved_posts_content_description));
         mActionableEmptyView.subtitle.setVisibility(View.VISIBLE);
         mActionableEmptyView.button.setText(R.string.reader_empty_followed_blogs_button_followed);
         mActionableEmptyView.button.setVisibility(View.VISIBLE);
@@ -1375,6 +1377,7 @@ private void setEmptyTitleDescriptionAndButton(@NonNull String title, String des
     private void showEmptyView() {
         if (isAdded()) {
             mActionableEmptyView.setVisibility(View.VISIBLE);
+            mActionableEmptyView.announceEmptyStateForAccessibility();
         }
     }
 
@@ -1429,6 +1432,7 @@ public void onDataLoaded(boolean isEmpty) {
                 }
             } else {
                 hideEmptyView();
+                announceListStateForAccessibility();
                 if (mRestorePosition > 0) {
                     AppLog.d(T.READER, "reader post list > restoring position");
                     mRecyclerView.scrollRecycleViewToPosition(mRestorePosition);
@@ -1471,6 +1475,13 @@ && getFragmentManager().findFragmentByTag(tag) == null) {
                 }
             };
 
+    private void announceListStateForAccessibility() {
+        if (getView() != null) {
+            getView().announceForAccessibility(getString(R.string.reader_acessibility_list_loaded,
+                    getPostAdapter().getItemCount()));
+        }
+    }
+
     private void showBookmarksSavedLocallyDialog() {
         mBookmarksSavedLocallyDialog = new AlertDialog.Builder(getActivity())
                 .setTitle(getString(R.string.reader_save_posts_locally_dialog_title))
@@ -2306,7 +2317,6 @@ public void onScrollToTop() {
     public static void resetLastUpdateDate() {
         mLastAutoUpdateDt = null;
     }
-
     private class LoadTagsTask extends AsyncTask<Void, Void, ReaderTagList> {
         private final FilteredRecyclerView.FilterCriteriaAsyncLoaderListener mFilterCriteriaLoaderListener;
 

diff --git a/WordPress/src/main/java/org/wordpress/android/ui/reader/adapters/ReaderPostAdapter.java b/WordPress/src/main/java/org/wordpress/android/ui/reader/adapters/ReaderPostAdapter.java
@@ -66,6 +66,7 @@
 import org.wordpress.android.util.GravatarUtils;
 import org.wordpress.android.util.NetworkUtils;
 import org.wordpress.android.util.ToastUtils;
+import org.wordpress.android.util.ViewUtilsKt;
 import org.wordpress.android.util.analytics.AnalyticsUtils;
 import org.wordpress.android.util.image.ImageManager;
 import org.wordpress.android.util.image.ImageType;
@@ -237,6 +238,10 @@ private class ReaderPostViewHolder extends RecyclerView.ViewHolder {
             ViewGroup postHeaderView = itemView.findViewById(R.id.layout_post_header);
             mFollowButton = postHeaderView.findViewById(R.id.follow_button);
 
+            ViewUtilsKt.expandTouchTargetArea(mLayoutDiscover, R.dimen.reader_discover_layout_extra_padding, true);
+            ViewUtilsKt.expandTouchTargetArea(mVisit, R.dimen.reader_visit_layout_extra_padding, false);
+            ViewUtilsKt.expandTouchTargetArea(mImgMore, R.dimen.reader_more_image_extra_padding, false);
+
             // show post in internal browser when "visit" is clicked
             View.OnClickListener visitListener = new View.OnClickListener() {
                 @Override

diff --git a/WordPress/src/main/java/org/wordpress/android/ui/reader/adapters/ReaderTagAdapter.java b/WordPress/src/main/java/org/wordpress/android/ui/reader/adapters/ReaderTagAdapter.java
@@ -23,6 +23,7 @@
 import org.wordpress.android.util.AppLog.T;
 import org.wordpress.android.util.NetworkUtils;
 import org.wordpress.android.util.ToastUtils;
+import org.wordpress.android.util.ViewUtilsKt;
 
 import java.lang.ref.WeakReference;
 
@@ -136,6 +137,7 @@ class TagViewHolder extends RecyclerView.ViewHolder {
             mTxtTagName = (TextView) view.findViewById(R.id.text_topic);
             mBtnRemove = (ImageButton) view.findViewById(R.id.btn_remove);
             ReaderUtils.setBackgroundToRoundRipple(mBtnRemove);
+            ViewUtilsKt.expandTouchTargetArea(mBtnRemove, R.dimen.reader_remove_button_extra_padding, false);
         }
     }
 

diff --git a/WordPress/src/main/java/org/wordpress/android/ui/reader/views/ReaderSiteHeaderView.java b/WordPress/src/main/java/org/wordpress/android/ui/reader/views/ReaderSiteHeaderView.java
@@ -22,6 +22,7 @@
 import org.wordpress.android.util.PhotonUtils.Quality;
 import org.wordpress.android.util.ToastUtils;
 import org.wordpress.android.util.UrlUtils;
+import org.wordpress.android.util.ViewUtilsKt;
 import org.wordpress.android.util.image.ImageManager;
 import org.wordpress.android.util.image.ImageType;
 
@@ -66,6 +67,7 @@ public ReaderSiteHeaderView(Context context, AttributeSet attrs, int defStyleAtt
     private void initView(Context context) {
         View view = inflate(context, R.layout.reader_site_header_view, this);
         mFollowButton = view.findViewById(R.id.follow_button);
+        ViewUtilsKt.expandTouchTargetArea(mFollowButton, R.dimen.reader_follow_button_extra_padding, false);
     }
 
     public void setOnFollowListener(OnFollowListener listener) {

diff --git a/WordPress/src/main/java/org/wordpress/android/util/ViewUtils.kt b/WordPress/src/main/java/org/wordpress/android/util/ViewUtils.kt
@@ -1,8 +1,11 @@
 package org.wordpress.android.util
 
+import android.graphics.Rect
 import android.os.Build.VERSION
 import android.os.Build.VERSION_CODES
+import android.view.TouchDelegate
 import android.view.View
+import androidx.annotation.DimenRes
 
 fun View.setVisible(visible: Boolean) {
     this.visibility = if (visible) View.VISIBLE else View.GONE
@@ -13,3 +16,22 @@ fun View.redirectContextClickToLongPressListener() {
         this.setOnContextClickListener { it.performLongClick() }
     }
 }
+
+fun View.expandTouchTargetArea(@DimenRes dimenRes: Int, heightOnly: Boolean = false) {
+    val pixels = context.resources.getDimensionPixelSize(dimenRes)
+    val parent = this.parent as View
+
+    parent.post {
+        val touchTargetRect = Rect()
+        getHitRect(touchTargetRect)
+        touchTargetRect.top -= pixels
+        touchTargetRect.bottom += pixels
+
+        if (!heightOnly) {
+            touchTargetRect.right += pixels
+            touchTargetRect.left -= pixels
+        }
+
+        parent.touchDelegate = TouchDelegate(touchTargetRect, this)
+    }
+}
diff --git a/WordPress/src/main/res/layout/actionable_empty_view.xml b/WordPress/src/main/res/layout/actionable_empty_view.xml
@@ -11,6 +11,7 @@
         android:layout_width="match_parent" >
 
         <LinearLayout
+            android:importantForAccessibility="yes"
             android:layout_height="wrap_content"
             android:layout_width="match_parent"
             android:gravity="center"
@@ -19,7 +20,7 @@
             <ImageView
                 android:id="@+id/image"
                 android:adjustViewBounds="true"
-                android:contentDescription="@string/content_description_person_reading_device_notification"
+                android:importantForAccessibility="no"
                 android:layout_height="wrap_content"
                 android:layout_marginBottom="@dimen/margin_extra_large"
                 android:layout_marginTop="@dimen/margin_extra_large"

diff --git a/WordPress/src/main/res/layout/filtered_list_component.xml b/WordPress/src/main/res/layout/filtered_list_component.xml
@@ -24,6 +24,7 @@
                 android:id="@+id/filter_spinner"
                 style="@style/FilteredRecyclerViewSpinner.WordPress"
                 android:layout_width="wrap_content"
+                android:minHeight="@dimen/min_touch_target_sz"
                 android:layout_height="wrap_content"
                 android:overlapAnchor="false"
                 tools:ignore="UnusedAttribute"/>
@@ -46,7 +47,9 @@
                 android:id="@+id/recycler_view"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
-                android:scrollbars="vertical"/>
+                android:scrollbars="vertical"
+                android:importantForAccessibility="no"
+                />
 
         </org.wordpress.android.util.widgets.CustomSwipeRefreshLayout>
 

diff --git a/WordPress/src/main/res/layout/reader_activity_subs.xml b/WordPress/src/main/res/layout/reader_activity_subs.xml
@@ -46,28 +46,27 @@
         android:layout_alignParentBottom="true"
         android:gravity="center_vertical"
         android:orientation="horizontal"
-        android:paddingBottom="@dimen/margin_medium"
-        android:paddingTop="@dimen/margin_small"
-        android:paddingStart="@dimen/margin_medium"
-        android:paddingEnd="@dimen/margin_extra_large">
+        >
 
         <EditText
+            android:paddingStart="@dimen/margin_large"
+            android:paddingEnd="@dimen/margin_medium"
             android:textSize="@dimen/text_sz_medium"
             android:textAlignment="viewStart"
-            android:gravity="start"
             android:id="@+id/edit_add"
             style="@style/ReaderEditText.Topic"
             android:layout_width="0dp"
+            android:minHeight="@dimen/min_touch_target_sz"
             android:layout_height="wrap_content"
             android:layout_weight="1"
             android:hint="@string/reader_hint_add_tag_or_url" />
 
         <ImageButton
             android:id="@+id/btn_add"
+            android:padding="@dimen/margin_extra_medium_large"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:background="?android:selectableItemBackground"
-            android:padding="@dimen/margin_small"
             android:contentDescription="@string/add"
             android:src="@drawable/ic_reader_follow_white_24dp"
             android:tint="@color/primary_40" />

diff --git a/WordPress/src/main/res/layout/reader_cardview_post.xml b/WordPress/src/main/res/layout/reader_cardview_post.xml
@@ -35,7 +35,7 @@
                 android:layout_centerVertical="true"
                 android:layout_marginEnd="@dimen/reader_card_avatar_margin_end"
                 android:src="@drawable/bg_rectangle_neutral_10_globe_32dp"
-                android:contentDescription="@string/reader_blavatar_desc"
+                android:importantForAccessibility="no"
                 style="@style/ReaderImageView.Avatar">
             </ImageView>
 
@@ -192,7 +192,7 @@
                 android:layout_height="wrap_content"
                 android:layout_width="wrap_content"
                 android:maxLines="3"
-                android:textColor="@color/neutral_30"
+                android:textColor="@color/neutral_50"
                 android:textSize="@dimen/text_sz_medium"
                 tools:text="text_attribution"
                 style="@style/ReaderTextView" >

diff --git a/WordPress/src/main/res/layout/reader_site_header_view.xml b/WordPress/src/main/res/layout/reader_site_header_view.xml
@@ -46,7 +46,7 @@
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:layout_below="@+id/text_blog_name"
-            android:textColor="@color/neutral_40"
+            android:textColor="@color/neutral_50"
             android:textSize="@dimen/text_sz_small"
             tools:text="text_domain"
             android:layout_toStartOf="@+id/follow_button"
@@ -103,7 +103,7 @@
                 android:id="@+id/text_blog_follow_count"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:textColor="@color/neutral_40"
+                android:textColor="@color/neutral_50"
                 android:textSize="@dimen/text_sz_small"
                 tools:text="12 followers" />
 

diff --git a/WordPress/src/main/res/values/dimens.xml b/WordPress/src/main/res/values/dimens.xml
@@ -164,6 +164,13 @@
     <!-- max size for images in Reader comments -->
     <dimen name="reader_comment_max_image_size">160dp</dimen>
 
+    <!-- Increased touch targets to make views more accessible -->
+    <dimen name="reader_discover_layout_extra_padding">16dp</dimen>
+    <dimen name="reader_visit_layout_extra_padding">12dp</dimen>
+    <dimen name="reader_remove_button_extra_padding">12dp</dimen>
+    <dimen name="reader_more_image_extra_padding">12dp</dimen>
+    <dimen name="reader_follow_button_extra_padding">32dp</dimen>
+
     <dimen name="empty_list_title_text_size">24sp</dimen>
     <dimen name="empty_list_title_side_margin">32dp</dimen>
     <dimen name="empty_list_title_bottom_margin">8dp</dimen>

diff --git a/WordPress/src/main/res/values/reader_styles.xml b/WordPress/src/main/res/values/reader_styles.xml
@@ -62,7 +62,7 @@
     <!-- EditTexts -->
     <style name="ReaderEditText" parent="android:Widget.EditText">
         <item name="android:textSize">@dimen/text_sz_large</item>
-        <item name="android:textColorHint">@color/neutral_40</item>
+        <item name="android:textColorHint">@color/neutral_50</item>
     </style>
     <style name="ReaderEditText.Topic" parent="ReaderEditText">
         <item name="android:background">@android:color/transparent</item>

diff --git a/WordPress/src/main/res/values/strings.xml b/WordPress/src/main/res/values/strings.xml
@@ -1555,6 +1555,9 @@
     <!-- title shown for untitled posts and blogs -->
     <string name="reader_untitled_post">(Untitled)</string>
 
+    <!-- accessibility announcement when list loads -->
+    <string name="reader_acessibility_list_loaded">"The list has loaded with %1$d items."</string>
+
     <!-- activity titles -->
     <string name="reader_title_deeplink">WordPress Reader</string>
     <string name="reader_title_applog">Application log</string>
@@ -1689,6 +1692,7 @@
     <string name="reader_empty_posts_liked_description">Posts that you like will appear here</string>
     <string name="reader_empty_saved_posts_title">No posts saved — yet!</string>
     <string name="reader_empty_saved_posts_description">Tap %s to save a post to your list.</string>
+    <string name="reader_empty_saved_posts_content_description">Tap the Add to Save Posts button to save a post to your list.</string>
     <string name="reader_empty_comments">No comments yet</string>
     <string name="reader_empty_posts_in_blog">This site is empty</string>
     <string name="reader_empty_search_title">No results found</string>