[iOS][WidgetKit] A11y improvements

Add missing strings in the generated files.
Set keys type as LocalizedStringKey to enable lookups.
Wrap small widgets so they act as one whole tap target.

Bug: N/A
Change-Id: Ife034a1913d4417a71352acabf99c2f77a324d13
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2539401Reviewed-by: Gauthier Ambard <gambard@chromium.org>
Commit-Queue: Javier Flores <javierrobles@chromium.org>
Cr-Commit-Position: refs/heads/master@{#827779}

ios/chrome/widget_kit_extension/dino_game_widget.swift

@@ -26,25 +26,31 @@ struct DinoGameWidgetEntryView: View {
   var entry: Provider.Entry
   @Environment(\.redactionReasons) var redactionReasons
   var body: some View {
-    ZStack {
-      Image(redactionReasons.isEmpty ? background : backgroundPlaceholder)
-        .resizable()
-        .unredacted()
-      VStack(alignment: .leading, spacing: 0) {
-        Spacer()
-          .frame(minWidth: 0, maxWidth: .infinity)
-        HStack {
-          Text("IDS_IOS_WIDGET_KIT_EXTENSION_GAME_TITLE")
-            .foregroundColor(Color("widget_text_color"))
-            .fontWeight(.semibold)
-            .font(.subheadline)
-            .lineLimit(1)
+    // We wrap this widget in a link on top of using `widgetUrl` so that the voice over will treat
+    // the widget as one tap target. Without the wrapping, voice over treats the content within
+    // the widget as multiple tap targets.
+    Link(destination: WidgetConstants.DinoGameWidget.url) {
+      ZStack {
+        Image(redactionReasons.isEmpty ? background : backgroundPlaceholder)
+          .resizable()
+          .unredacted()
+        VStack(alignment: .leading, spacing: 0) {
           Spacer()
+            .frame(minWidth: 0, maxWidth: .infinity)
+          HStack {
+            Text("IDS_IOS_WIDGET_KIT_EXTENSION_GAME_TITLE")
+              .foregroundColor(Color("widget_text_color"))
+              .fontWeight(.semibold)
+              .font(.subheadline)
+              .lineLimit(1)
+            Spacer()
+          }
+          .padding([.leading, .bottom], 16)
         }
-        .padding([.leading, .bottom], 16)
       }
     }
     .widgetURL(WidgetConstants.DinoGameWidget.url)
-    .accessibility(label: Text("IDS_IOS_WIDGET_KIT_EXTENSION_GAME_A11Y_LABEL"))
+    .accessibility(
+      label: Text("IDS_IOS_WIDGET_KIT_EXTENSION_GAME_A11Y_LABEL"))
   }
 }

ios/chrome/widget_kit_extension/quick_actions_widget.swift

@@ -26,11 +26,11 @@ struct QuickActionsWidgetEntryView: View {
   @Environment(\.redactionReasons) var redactionReasons
   private let searchAreaHeight: CGFloat = 92
   private let separatorHeight: CGFloat = 32
-  private let incognitoA11yLabel =
+  private let incognitoA11yLabel: LocalizedStringKey =
     "IDS_IOS_WIDGET_KIT_EXTENSION_QUICK_ACTIONS_INCOGNITO_A11Y_LABEL"
-  private let voiceSearchA11yLabel =
+  private let voiceSearchA11yLabel: LocalizedStringKey =
     "IDS_IOS_WIDGET_KIT_EXTENSION_QUICK_ACTIONS_VOICE_SEARCH_A11Y_LABEL"
-  private let qrA11yLabel =
+  private let qrA11yLabel: LocalizedStringKey =
     "IDS_IOS_WIDGET_KIT_EXTENSION_QUICK_ACTIONS_QR_SCAN_A11Y_LABEL"
   var body: some View {
     VStack(spacing: 0) {
@@ -75,10 +75,10 @@ struct QuickActionsWidgetEntryView: View {
         Rectangle()
           .foregroundColor(Color("widget_actions_row_background_color"))
           .frame(minWidth: 0, maxWidth: .infinity)
-        HStack() {
+        HStack {
           // Show interactive buttons if the widget is fully loaded, and show
           // the custom placeholder otherwise.
-          if (redactionReasons.isEmpty) {
+          if redactionReasons.isEmpty {
             Link(destination: WidgetConstants.QuickActionsWidget.incognitoUrl) {
               Image("widget_incognito_icon")
                 .frame(minWidth: 0, maxWidth: .infinity)

ios/chrome/widget_kit_extension/search_widget.swift

@@ -24,36 +24,40 @@ struct SearchWidgetEntryView: View {
   var entry: Provider.Entry
 
   var body: some View {
-    ZStack {
-      Color("widget_background_color")
-        .unredacted()
-      VStack(alignment: .leading, spacing: 0) {
-        ZStack {
-          RoundedRectangle(cornerRadius: 26)
-            .frame(height: 52)
-            .foregroundColor(Color("widget_search_bar_color"))
-          HStack(spacing: 0) {
-            Image("widget_chrome_logo")
-              .clipShape(Circle())
-              .padding(.leading, 8)
-              .unredacted()
-            Spacer()
+    // We wrap this widget in a link on top of using `widgetUrl` so that the voice over will treat
+    // the widget as one tap target. Without the wrapping, voice over treats the content within
+    // the widget as multiple tap targets.
+    Link(destination: WidgetConstants.SearchWidget.url) {
+      ZStack {
+        Color("widget_background_color")
+          .unredacted()
+        VStack(alignment: .leading, spacing: 0) {
+          ZStack {
+            RoundedRectangle(cornerRadius: 26)
+              .frame(height: 52)
+              .foregroundColor(Color("widget_search_bar_color"))
+            HStack(spacing: 0) {
+              Image("widget_chrome_logo")
+                .clipShape(Circle())
+                .padding(.leading, 8)
+                .unredacted()
+              Spacer()
+            }
           }
+          .frame(minWidth: 0, maxWidth: .infinity)
+          .padding([.leading, .trailing], 11)
+          .padding(.top, 16)
+          Spacer()
+          Text("IDS_IOS_WIDGET_KIT_EXTENSION_SEARCH_TITLE")
+            .foregroundColor(Color("widget_text_color"))
+            .fontWeight(.semibold)
+            .font(.subheadline)
+            .padding([.leading, .bottom, .trailing], 16)
         }
-        .frame(minWidth: 0, maxWidth: .infinity)
-        .padding([.leading, .trailing], 11)
-        .padding(.top, 16)
-        Spacer()
-        Text("IDS_IOS_WIDGET_KIT_EXTENSION_SEARCH_TITLE")
-          .foregroundColor(Color("widget_text_color"))
-          .fontWeight(.semibold)
-          .font(.subheadline)
-          .padding([.leading, .bottom, .trailing], 16)
       }
     }
     .widgetURL(WidgetConstants.SearchWidget.url)
     .accessibility(
-      label: Text("IDS_IOS_WIDGET_KIT_EXTENSION_SEARCH_A11Y_LABEL")
-    )
+      label: Text("IDS_IOS_WIDGET_KIT_EXTENSION_SEARCH_A11Y_LABEL"))
   }
 }

ios/chrome/widget_kit_extension/widget_kit_extension_localize_strings_config.plist

@@ -17,6 +17,10 @@
 				<string>IDS_IOS_WIDGET_KIT_EXTENSION_GAME_DESCRIPTION</string>
 				<string>IDS_IOS_WIDGET_KIT_EXTENSION_GAME_DISPLAY_NAME</string>
 				<string>IDS_IOS_WIDGET_KIT_EXTENSION_GAME_TITLE</string>
+				<string>IDS_IOS_WIDGET_KIT_EXTENSION_QUICK_ACTIONS_VOICE_SEARCH_A11Y_LABEL</string>
+				<string>IDS_IOS_WIDGET_KIT_EXTENSION_QUICK_ACTIONS_QR_SCAN_A11Y_LABEL</string>
+				<string>IDS_IOS_WIDGET_KIT_EXTENSION_QUICK_ACTIONS_INCOGNITO_A11Y_LABEL</string>
+				<string>IDS_IOS_WIDGET_KIT_EXTENSION_QUICK_ACTIONS_SEARCH_A11Y_LABEL</string>
 				<string>IDS_IOS_WIDGET_KIT_EXTENSION_QUICK_ACTIONS_DESCRIPTION</string>
 				<string>IDS_IOS_WIDGET_KIT_EXTENSION_QUICK_ACTIONS_DISPLAY_NAME</string>
 				<string>IDS_IOS_WIDGET_KIT_EXTENSION_QUICK_ACTIONS_TITLE</string>