Update the active filter button behavior

Tapping on the active filter now shows the filter list. To reset
the active filter, the user must tap on the Close icon.

In addition, this also improves accessibility:
* The active filter button now separates between the Close button
  and the active filter button, since they are now different.
* Added an accessibility hint for the active filter to inform the
  user that tapping the active filter will open the filter list.
* Added an accessibility label for the Search icon button.

Author: dvdchr

WordPress/Classes/ViewRelated/Reader/Tab Navigation/ReaderNavigationMenu.swift

@@ -51,45 +51,50 @@ struct ReaderNavigationMenu: View {
                 Image(uiImage: .gridicon(.search)
                     .withRenderingMode(.alwaysTemplate))
                     .foregroundStyle(Colors.searchIcon)
+                    .padding(4.0)
             }
+            .accessibilityLabel(Text(Strings.searchFilterAccessibilityLabel))
         }
     }
 
     @ViewBuilder
     var streamFilterView: some View {
         ForEach(filters) { filter in
-            Button {
-                if hasActiveFilter {
-                    viewModel.resetStreamFilter()
-                } else {
-                    viewModel.didTapStreamFilterButton(with: filter)
-                }
-            } label: {
-                streamFilterChip(title: viewModel.activeStreamFilter?.topic.title ?? filter.title, isSelected: hasActiveFilter)
-            }
-            .transition(
-                .asymmetric(insertion: .slide, removal: .move(edge: .leading))
-                .combined(with: .opacity)
-            )
+            streamFilterChip(filter: filter, isSelected: hasActiveFilter)
+                .transition(
+                    .asymmetric(insertion: .slide, removal: .move(edge: .leading))
+                    .combined(with: .opacity)
+                )
         }
     }
 
     @ViewBuilder
-    func streamFilterChip(title: String, isSelected: Bool = false) -> some View {
+    func streamFilterChip(filter: FilterProvider, isSelected: Bool) -> some View {
         HStack(alignment: .center, spacing: 8.0) {
-            Text(title)
-                .font(.subheadline)
-                .fontWeight(.semibold)
-                .foregroundStyle(isSelected ? Colors.StreamFilter.selectedText : Colors.StreamFilter.text)
+            Button {
+                viewModel.didTapStreamFilterButton(with: filter)
+            } label: {
+                Text(viewModel.activeStreamFilter?.topic.title ?? filter.title)
+                    .font(.subheadline)
+                    .fontWeight(.semibold)
+                    .foregroundStyle(isSelected ? Colors.StreamFilter.selectedText : Colors.StreamFilter.text)
+            }
+            .accessibilityLabel(Text(filterAccessibilityLabel(for: filter)))
+            .accessibilityHint(Text(isSelected ? Strings.activeFilterAccessibilityHint : String()))
 
             if isSelected {
-                Image("reader-menu-close")
-                    .frame(width: 24.0, height: 24.0)
-                    .foregroundStyle(Colors.StreamFilter.selectedText)
+                Button {
+                    withAnimation(.easeInOut) {
+                        viewModel.resetStreamFilter()
+                    }
+                } label: {
+                    Image("reader-menu-close")
+                        .frame(width: 24.0, height: 24.0)
+                        .foregroundStyle(Colors.StreamFilter.selectedText)
+                }
+                .accessibilityLabel(Text(Strings.resetFilterAccessibilityLabel))
             }
         }
-        // the inherent padding from the close image bumps the content height, so we'll need to reduce the padding
-        // when the close button is shown.
         .padding(.vertical, 6.0)
         .padding(.leading, 16.0)
         .padding(.trailing, isSelected ? 8.0 : 16.0)
@@ -98,6 +103,13 @@ struct ReaderNavigationMenu: View {
         .clipShape(Capsule())
     }
 
+    private func filterAccessibilityLabel(for filter: FilterProvider) -> String {
+        guard let activeFilter = viewModel.activeStreamFilter else {
+            return filter.title
+        }
+        return String(format: Strings.activeFilterAccessibilityStringFormat, activeFilter.topic.title)
+    }
+
     struct Colors {
         static let searchIcon: Color = Color(uiColor: .text)
 
@@ -109,4 +121,35 @@ struct ReaderNavigationMenu: View {
         }
     }
 
+    struct Strings {
+        static let activeFilterAccessibilityStringFormat = NSLocalizedString(
+            "reader.navigation.menu.activeFilter.a11y.label",
+            value: "Filtered by %1$@",
+            comment: """
+                Accessibility label for when the user has an active filter.
+                This informs the user that the currently displayed stream is being filtered.
+                """
+        )
+
+        static let activeFilterAccessibilityHint = NSLocalizedString(
+            "reader.navigation.menu.filter.a11y.hint",
+            value: "Opens the filter list",
+            comment: """
+                Accessibility hint that informs the user that the filter list will be opened when they interact
+                with the filter chip button.
+                """
+        )
+
+        static let resetFilterAccessibilityLabel = NSLocalizedString(
+            "reader.navigation.menu.reset.a11y.label",
+            value: "Reset",
+            comment: "Accessibility label for the Close icon button, to reset the active filter."
+        )
+
+        static let searchFilterAccessibilityLabel = NSLocalizedString(
+            "reader.navigation.menu.search.a11y.label",
+            value: "Search",
+            comment: "Accessibility label for the Search icon."
+        )
+    }
 }