From 0687245ebf8181777398a5b581a304d9cfd2fea7 Mon Sep 17 00:00:00 2001
From: Chris Bracken <chris@bracken.jp>
Date: Fri, 14 Jan 2022 18:32:14 -0800
Subject: [PATCH] Photo search: Wrap tree node in Semantics widget (#988)

The results tree view nodes are each a Row widget containing an
IconButton (which in this case is blank) and an InkWell. In order to
expose this as a tappable widget in screen readers, we wrap the tree
nodes in a Semantics widget that performs the same function as the
InkWell would when tapped.
---
 .../desktop_photo_search/lib/main.dart        | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/experimental/desktop_photo_search/lib/main.dart b/experimental/desktop_photo_search/lib/main.dart
index bde89adc9..8fbae1404 100644
--- a/experimental/desktop_photo_search/lib/main.dart
+++ b/experimental/desktop_photo_search/lib/main.dart
@@ -12,6 +12,7 @@ import 'package:menubar/menubar.dart' as menubar;
 import 'package:provider/provider.dart';
 
 import 'src/model/photo_search_model.dart';
+import 'src/unsplash/photo.dart';
 import 'src/unsplash/unsplash.dart';
 import 'src/widgets/about_dialog.dart';
 import 'src/widgets/photo_details.dart';
@@ -151,6 +152,12 @@ class UnsplashHomePage extends StatelessWidget {
   }
 
   TreeNode _buildSearchEntry(SearchEntry searchEntry) {
+    void selectPhoto(Photo photo) {
+      searchEntry.model.selectedPhoto = photo;
+    }
+
+    String labelForPhoto(Photo photo) => 'Photo by ${photo.user!.name}';
+
     return TreeNode(
       content: Expanded(
         child: Text(searchEntry.query),
@@ -159,14 +166,16 @@ class UnsplashHomePage extends StatelessWidget {
           .map<TreeNode>(
             (photo) => TreeNode(
               content: Expanded(
-                child: InkWell(
-                  onTap: () {
-                    searchEntry.model.selectedPhoto = photo;
-                  },
-                  child: Padding(
-                    padding: const EdgeInsets.all(12.0),
-                    child: Text(
-                      'Photo by ${photo.user!.name}',
+                child: Semantics(
+                  button: true,
+                  onTap: () => selectPhoto(photo),
+                  label: labelForPhoto(photo),
+                  excludeSemantics: true,
+                  child: InkWell(
+                    onTap: () => selectPhoto(photo),
+                    child: Padding(
+                      padding: const EdgeInsets.all(12.0),
+                      child: Text(labelForPhoto(photo)),
                     ),
                   ),
                 ),