Merge pull request woocommerce#6027 from woocommerce/issue/5806-order…

…-creation-status-accessibility Issue/5806 order creation status accessibility
wzieba · Mar 21, 2022 · 9799162 · 9799162
2 parents 1053f3e + 30d93be
commit 9799162
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 29 deletions.
diff --git a/...main/kotlin/com/woocommerce/android/ui/orders/details/views/OrderDetailOrderStatusView.kt b/...main/kotlin/com/woocommerce/android/ui/orders/details/views/OrderDetailOrderStatusView.kt
@@ -1,7 +1,6 @@
 package com.woocommerce.android.ui.orders.details.views
 
 import android.content.Context
-import android.os.Build
 import android.util.AttributeSet
 import android.view.LayoutInflater
 import android.view.View
@@ -15,7 +14,6 @@ import com.woocommerce.android.extensions.isToday
 import com.woocommerce.android.model.Order
 import com.woocommerce.android.model.Order.OrderStatus
 import com.woocommerce.android.ui.orders.OrderStatusTag
-import com.woocommerce.android.widgets.tags.TagView
 
 typealias EditStatusClickListener = (View) -> Unit
 
@@ -29,8 +27,9 @@ class OrderDetailOrderStatusView @JvmOverloads constructor(
     private var mode: Mode = Mode.OrderEdit
 
     fun updateStatus(orderStatus: OrderStatus) {
-        binding.orderStatusOrderTags.removeAllViews()
-        binding.orderStatusOrderTags.addView(getTagView(orderStatus))
+        binding.orderStatusOrderTags.contentDescription =
+            context.getString(R.string.orderstatus_contentDesc_withStatus, orderStatus.label)
+        binding.orderStatusOrderTags.tag = OrderStatusTag(orderStatus)
     }
 
     fun updateOrder(order: Order) {
@@ -64,25 +63,13 @@ class OrderDetailOrderStatusView @JvmOverloads constructor(
         }
     }
 
-    private fun getTagView(orderStatus: OrderStatus): TagView {
-        val orderTag = OrderStatusTag(orderStatus)
-        val tagView = TagView(context)
-        tagView.tag = orderTag
-        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.O) {
-            tagView.isFocusableInTouchMode = true
-        } else {
-            tagView.focusable = View.FOCUSABLE
-        }
-        return tagView
-    }
-
     fun initView(mode: Mode, editOrderStatusClickListener: EditStatusClickListener) {
         this.mode = mode
         when (mode) {
             Mode.OrderEdit -> {
                 binding.orderStatusEditButton.isVisible = false
                 binding.orderStatusEditImage.isVisible = true
-                with(binding.orderStatusEdit) {
+                with(binding.orderStatusContainer) {
                     isClickable = true
                     isFocusable = true
                     setOnClickListener(editOrderStatusClickListener)
@@ -92,7 +79,6 @@ class OrderDetailOrderStatusView @JvmOverloads constructor(
                 binding.orderStatusEditImage.isVisible = false
                 with(binding.orderStatusEditButton) {
                     isVisible = true
-                    text = context.getString(R.string.edit)
                     setOnClickListener(editOrderStatusClickListener)
                 }
             }

diff --git a/WooCommerce/src/main/res/layout/order_detail_order_status.xml b/WooCommerce/src/main/res/layout/order_detail_order_status.xml
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <merge xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="wrap_content">
@@ -26,22 +27,22 @@
             android:layout_marginBottom="@dimen/minor_00"
             tools:text="George Carlin" />
 
-        <LinearLayout
-            android:id="@+id/orderStatus_edit"
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:id="@+id/orderStatus_container"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:background="?attr/selectableItemBackground"
-            android:contentDescription="@string/orderdetail_change_order_status"
+            android:focusable="false"
             android:gravity="center_vertical"
             android:orientation="horizontal">
 
-            <com.woocommerce.android.widgets.FlowLayout
+            <com.woocommerce.android.widgets.tags.TagView
                 android:id="@+id/orderStatus_orderTags"
-                android:layout_width="0dp"
+                android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_marginStart="@dimen/major_100"
-                android:layout_weight="1"
-                android:contentDescription="@string/orderstatus_contentDesc" />
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent" />
 
             <androidx.appcompat.widget.AppCompatImageView
                 android:id="@+id/orderStatus_editImage"
@@ -50,15 +51,21 @@
                 android:importantForAccessibility="no"
                 android:paddingHorizontal="@dimen/major_100"
                 android:paddingVertical="@dimen/major_75"
-                android:src="@drawable/ic_edit_pencil" />
+                android:src="@drawable/ic_edit_pencil"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintEnd_toStartOf="@+id/orderStatus_editButton"
+                app:layout_constraintTop_toTopOf="parent" />
 
             <com.google.android.material.button.MaterialButton
                 android:id="@+id/orderStatus_editButton"
                 style="@style/Woo.Button.TextButton.Secondary"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:contentDescription="@string/order_creation_status_edit_content_description"
-                android:text="@string/edit" />
-        </LinearLayout>
+                android:text="@string/edit"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintTop_toTopOf="parent" />
+        </androidx.constraintlayout.widget.ConstraintLayout>
     </LinearLayout>
 </merge>
diff --git a/WooCommerce/src/main/res/values/strings.xml b/WooCommerce/src/main/res/values/strings.xml
@@ -878,6 +878,7 @@
     <string name="orderstatus_cancelled">Cancelled</string>
     <string name="orderstatus_refunded">Refunded</string>
     <string name="orderstatus_contentDesc">Order status</string>
+    <string name="orderstatus_contentDesc_withStatus">Order status: %s</string>
     <!--
         Add Shipment Tracking Labels
     -->