Reader: Update the active filter button behavior (#22567)

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."
+        )
+    }
 }