From 62b117f18d02e13ba2bf5ba83993de8d787a4275 Mon Sep 17 00:00:00 2001
From: harperl-lgtm <81855102+harperl-lgtm@users.noreply.github.com>
Date: Fri, 21 Oct 2022 14:23:58 -0400
Subject: [PATCH] CardsDemo-HeadingNavigation-SelectedStatus-Localization
 (#812)

* CardsDemo-HeadingNavigation-SelectedStatus-Localization

* made newly added semantics messages more general, added comma to improve announcement
---
 lib/codeviewer/code_segments.dart  | 193 +++++++++++++++++++++++++----
 lib/demos/material/cards_demo.dart |  79 +++++++-----
 lib/l10n/intl_en.arb               |  32 +++--
 lib/l10n/intl_en_US.xml            |  32 +++--
 pubspec.lock                       |   4 +-
 5 files changed, 270 insertions(+), 70 deletions(-)

diff --git a/lib/codeviewer/code_segments.dart b/lib/codeviewer/code_segments.dart
index 0e1f0d68d8..da1cd44bcb 100644
--- a/lib/codeviewer/code_segments.dart
+++ b/lib/codeviewer/code_segments.dart
@@ -5572,12 +5572,27 @@ class CodeSegments {
       TextSpan(style: codeStyle.baseStyle, text: '\u000a                child'),
       TextSpan(style: codeStyle.punctuationStyle, text: ':'),
       TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.classStyle, text: 'Semantics'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '('),
+      TextSpan(
+          style: codeStyle.baseStyle, text: '\u000a                  label'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+      TextSpan(style: codeStyle.baseStyle, text: ' destination'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '.'),
+      TextSpan(style: codeStyle.baseStyle, text: 'title'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ','),
+      TextSpan(
+          style: codeStyle.baseStyle, text: '\u000a                  child'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
       TextSpan(style: codeStyle.classStyle, text: 'TravelDestinationContent'),
       TextSpan(style: codeStyle.punctuationStyle, text: '('),
       TextSpan(style: codeStyle.baseStyle, text: 'destination'),
       TextSpan(style: codeStyle.punctuationStyle, text: ':'),
       TextSpan(style: codeStyle.baseStyle, text: ' destination'),
       TextSpan(style: codeStyle.punctuationStyle, text: '),'),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a                '),
+      TextSpan(style: codeStyle.punctuationStyle, text: '),'),
       TextSpan(style: codeStyle.baseStyle, text: '\u000a              '),
       TextSpan(style: codeStyle.punctuationStyle, text: '),'),
       TextSpan(style: codeStyle.baseStyle, text: '\u000a            '),
@@ -5805,12 +5820,27 @@ class CodeSegments {
           style: codeStyle.baseStyle, text: '\u000a                  child'),
       TextSpan(style: codeStyle.punctuationStyle, text: ':'),
       TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.classStyle, text: 'Semantics'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '('),
+      TextSpan(
+          style: codeStyle.baseStyle, text: '\u000a                    label'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+      TextSpan(style: codeStyle.baseStyle, text: ' destination'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '.'),
+      TextSpan(style: codeStyle.baseStyle, text: 'title'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ','),
+      TextSpan(
+          style: codeStyle.baseStyle, text: '\u000a                    child'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
       TextSpan(style: codeStyle.classStyle, text: 'TravelDestinationContent'),
       TextSpan(style: codeStyle.punctuationStyle, text: '('),
       TextSpan(style: codeStyle.baseStyle, text: 'destination'),
       TextSpan(style: codeStyle.punctuationStyle, text: ':'),
       TextSpan(style: codeStyle.baseStyle, text: ' destination'),
       TextSpan(style: codeStyle.punctuationStyle, text: '),'),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a                  '),
+      TextSpan(style: codeStyle.punctuationStyle, text: '),'),
       TextSpan(style: codeStyle.baseStyle, text: '\u000a                '),
       TextSpan(style: codeStyle.punctuationStyle, text: '),'),
       TextSpan(style: codeStyle.baseStyle, text: '\u000a              '),
@@ -5936,6 +5966,32 @@ class CodeSegments {
       TextSpan(style: codeStyle.punctuationStyle, text: ').'),
       TextSpan(style: codeStyle.baseStyle, text: 'colorScheme'),
       TextSpan(style: codeStyle.punctuationStyle, text: ';'),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a    '),
+      TextSpan(style: codeStyle.keywordStyle, text: 'final'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.classStyle, text: 'String'),
+      TextSpan(style: codeStyle.baseStyle, text: ' selectedStatus '),
+      TextSpan(style: codeStyle.punctuationStyle, text: '='),
+      TextSpan(style: codeStyle.baseStyle, text: ' isSelected\u000a        '),
+      TextSpan(style: codeStyle.punctuationStyle, text: '?'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.classStyle, text: 'GalleryLocalizations'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '.'),
+      TextSpan(style: codeStyle.baseStyle, text: 'of'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '('),
+      TextSpan(style: codeStyle.baseStyle, text: 'context'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ')!.'),
+      TextSpan(style: codeStyle.baseStyle, text: 'selected\u000a        '),
+      TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.classStyle, text: 'GalleryLocalizations'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '.'),
+      TextSpan(style: codeStyle.baseStyle, text: 'of'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '('),
+      TextSpan(style: codeStyle.baseStyle, text: 'context'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ')!.'),
+      TextSpan(style: codeStyle.baseStyle, text: 'notSelected'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ';'),
       TextSpan(style: codeStyle.baseStyle, text: '\u000a\u000a    '),
       TextSpan(style: codeStyle.keywordStyle, text: 'return'),
       TextSpan(style: codeStyle.baseStyle, text: ' '),
@@ -5979,7 +6035,7 @@ class CodeSegments {
       TextSpan(style: codeStyle.baseStyle, text: '\u000a            '),
       TextSpan(style: codeStyle.classStyle, text: 'SectionTitle'),
       TextSpan(style: codeStyle.punctuationStyle, text: '('),
-      TextSpan(style: codeStyle.baseStyle, text: '\u000a                title'),
+      TextSpan(style: codeStyle.baseStyle, text: 'title'),
       TextSpan(style: codeStyle.punctuationStyle, text: ':'),
       TextSpan(style: codeStyle.baseStyle, text: ' '),
       TextSpan(style: codeStyle.classStyle, text: 'GalleryLocalizations'),
@@ -5988,7 +6044,7 @@ class CodeSegments {
       TextSpan(style: codeStyle.punctuationStyle, text: '('),
       TextSpan(style: codeStyle.baseStyle, text: 'context'),
       TextSpan(style: codeStyle.punctuationStyle, text: ')!.'),
-      TextSpan(style: codeStyle.baseStyle, text: 'cardsDemoSelectable'),
+      TextSpan(style: codeStyle.baseStyle, text: 'selectable'),
       TextSpan(style: codeStyle.punctuationStyle, text: '),'),
       TextSpan(style: codeStyle.baseStyle, text: '\u000a            '),
       TextSpan(style: codeStyle.classStyle, text: 'SizedBox'),
@@ -6130,12 +6186,61 @@ class CodeSegments {
       TextSpan(style: codeStyle.punctuationStyle, text: '),'),
       TextSpan(
           style: codeStyle.baseStyle, text: '\u000a                      '),
+      TextSpan(style: codeStyle.classStyle, text: 'Semantics'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '('),
+      TextSpan(
+          style: codeStyle.baseStyle,
+          text: '\u000a                        label'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(
+          style: codeStyle.stringStyle,
+          text: '\u0027\u0024{destination.title}, \u0024selectedStatus\u0027'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ','),
+      TextSpan(
+          style: codeStyle.baseStyle,
+          text: '\u000a                        onLongPressHint'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+      TextSpan(
+          style: codeStyle.baseStyle,
+          text: ' isSelected\u000a                            '),
+      TextSpan(style: codeStyle.punctuationStyle, text: '?'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.classStyle, text: 'GalleryLocalizations'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '.'),
+      TextSpan(style: codeStyle.baseStyle, text: 'of'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '('),
+      TextSpan(style: codeStyle.baseStyle, text: 'context'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ')!.'),
+      TextSpan(
+          style: codeStyle.baseStyle,
+          text: 'deselect\u000a                            '),
+      TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.classStyle, text: 'GalleryLocalizations'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '.'),
+      TextSpan(style: codeStyle.baseStyle, text: 'of'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '('),
+      TextSpan(style: codeStyle.baseStyle, text: 'context'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ')!.'),
+      TextSpan(style: codeStyle.baseStyle, text: 'select'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ','),
+      TextSpan(
+          style: codeStyle.baseStyle,
+          text: '\u000a                        child'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+      TextSpan(
+          style: codeStyle.baseStyle,
+          text: '\u000a                            '),
       TextSpan(style: codeStyle.classStyle, text: 'TravelDestinationContent'),
       TextSpan(style: codeStyle.punctuationStyle, text: '('),
       TextSpan(style: codeStyle.baseStyle, text: 'destination'),
       TextSpan(style: codeStyle.punctuationStyle, text: ':'),
       TextSpan(style: codeStyle.baseStyle, text: ' destination'),
       TextSpan(style: codeStyle.punctuationStyle, text: '),'),
+      TextSpan(
+          style: codeStyle.baseStyle, text: '\u000a                      '),
+      TextSpan(style: codeStyle.punctuationStyle, text: '),'),
       TextSpan(
           style: codeStyle.baseStyle, text: '\u000a                      '),
       TextSpan(style: codeStyle.classStyle, text: 'Align'),
@@ -6215,6 +6320,8 @@ class CodeSegments {
       TextSpan(style: codeStyle.punctuationStyle, text: '],'),
       TextSpan(style: codeStyle.baseStyle, text: '\u000a                  '),
       TextSpan(style: codeStyle.punctuationStyle, text: '),'),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a                  '),
+      TextSpan(style: codeStyle.commentStyle, text: '//),'),
       TextSpan(style: codeStyle.baseStyle, text: '\u000a                '),
       TextSpan(style: codeStyle.punctuationStyle, text: '),'),
       TextSpan(style: codeStyle.baseStyle, text: '\u000a              '),
@@ -6584,19 +6691,41 @@ class CodeSegments {
           style: codeStyle.baseStyle, text: '\u000a                  child'),
       TextSpan(style: codeStyle.punctuationStyle, text: ':'),
       TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.classStyle, text: 'Semantics'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '('),
+      TextSpan(
+          style: codeStyle.baseStyle,
+          text: '\u000a                    container'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.keywordStyle, text: 'true'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ','),
+      TextSpan(
+          style: codeStyle.baseStyle, text: '\u000a                    header'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.keywordStyle, text: 'true'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ','),
+      TextSpan(
+          style: codeStyle.baseStyle, text: '\u000a                    child'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
       TextSpan(style: codeStyle.classStyle, text: 'Text'),
       TextSpan(style: codeStyle.punctuationStyle, text: '('),
       TextSpan(
           style: codeStyle.baseStyle,
-          text: '\u000a                    destination'),
+          text: '\u000a                      destination'),
       TextSpan(style: codeStyle.punctuationStyle, text: '.'),
       TextSpan(style: codeStyle.baseStyle, text: 'title'),
       TextSpan(style: codeStyle.punctuationStyle, text: ','),
       TextSpan(
-          style: codeStyle.baseStyle, text: '\u000a                    style'),
+          style: codeStyle.baseStyle,
+          text: '\u000a                      style'),
       TextSpan(style: codeStyle.punctuationStyle, text: ':'),
       TextSpan(style: codeStyle.baseStyle, text: ' titleStyle'),
       TextSpan(style: codeStyle.punctuationStyle, text: ','),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a                    '),
+      TextSpan(style: codeStyle.punctuationStyle, text: '),'),
       TextSpan(style: codeStyle.baseStyle, text: '\u000a                  '),
       TextSpan(style: codeStyle.punctuationStyle, text: '),'),
       TextSpan(style: codeStyle.baseStyle, text: '\u000a                '),
@@ -6614,9 +6743,19 @@ class CodeSegments {
           style: codeStyle.commentStyle,
           text: '// Description and share/explore buttons.'),
       TextSpan(style: codeStyle.baseStyle, text: '\u000a        '),
+      TextSpan(style: codeStyle.classStyle, text: 'Semantics'),
+      TextSpan(style: codeStyle.punctuationStyle, text: '('),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a          container'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
+      TextSpan(style: codeStyle.keywordStyle, text: 'true'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ','),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a          child'),
+      TextSpan(style: codeStyle.punctuationStyle, text: ':'),
+      TextSpan(style: codeStyle.baseStyle, text: ' '),
       TextSpan(style: codeStyle.classStyle, text: 'Padding'),
       TextSpan(style: codeStyle.punctuationStyle, text: '('),
-      TextSpan(style: codeStyle.baseStyle, text: '\u000a          padding'),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a            padding'),
       TextSpan(style: codeStyle.punctuationStyle, text: ':'),
       TextSpan(style: codeStyle.baseStyle, text: ' '),
       TextSpan(style: codeStyle.keywordStyle, text: 'const'),
@@ -6636,35 +6775,37 @@ class CodeSegments {
       TextSpan(style: codeStyle.baseStyle, text: ' '),
       TextSpan(style: codeStyle.numberStyle, text: '0'),
       TextSpan(style: codeStyle.punctuationStyle, text: '),'),
-      TextSpan(style: codeStyle.baseStyle, text: '\u000a          child'),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a            child'),
       TextSpan(style: codeStyle.punctuationStyle, text: ':'),
       TextSpan(style: codeStyle.baseStyle, text: ' '),
       TextSpan(style: codeStyle.classStyle, text: 'DefaultTextStyle'),
       TextSpan(style: codeStyle.punctuationStyle, text: '('),
-      TextSpan(style: codeStyle.baseStyle, text: '\u000a            softWrap'),
+      TextSpan(
+          style: codeStyle.baseStyle, text: '\u000a              softWrap'),
       TextSpan(style: codeStyle.punctuationStyle, text: ':'),
       TextSpan(style: codeStyle.baseStyle, text: ' '),
       TextSpan(style: codeStyle.keywordStyle, text: 'false'),
       TextSpan(style: codeStyle.punctuationStyle, text: ','),
-      TextSpan(style: codeStyle.baseStyle, text: '\u000a            overflow'),
+      TextSpan(
+          style: codeStyle.baseStyle, text: '\u000a              overflow'),
       TextSpan(style: codeStyle.punctuationStyle, text: ':'),
       TextSpan(style: codeStyle.baseStyle, text: ' '),
       TextSpan(style: codeStyle.classStyle, text: 'TextOverflow'),
       TextSpan(style: codeStyle.punctuationStyle, text: '.'),
       TextSpan(style: codeStyle.baseStyle, text: 'ellipsis'),
       TextSpan(style: codeStyle.punctuationStyle, text: ','),
-      TextSpan(style: codeStyle.baseStyle, text: '\u000a            style'),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a              style'),
       TextSpan(style: codeStyle.punctuationStyle, text: ':'),
       TextSpan(style: codeStyle.baseStyle, text: ' descriptionStyle'),
       TextSpan(style: codeStyle.punctuationStyle, text: ','),
-      TextSpan(style: codeStyle.baseStyle, text: '\u000a            child'),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a              child'),
       TextSpan(style: codeStyle.punctuationStyle, text: ':'),
       TextSpan(style: codeStyle.baseStyle, text: ' '),
       TextSpan(style: codeStyle.classStyle, text: 'Column'),
       TextSpan(style: codeStyle.punctuationStyle, text: '('),
       TextSpan(
           style: codeStyle.baseStyle,
-          text: '\u000a              crossAxisAlignment'),
+          text: '\u000a                crossAxisAlignment'),
       TextSpan(style: codeStyle.punctuationStyle, text: ':'),
       TextSpan(style: codeStyle.baseStyle, text: ' '),
       TextSpan(style: codeStyle.classStyle, text: 'CrossAxisAlignment'),
@@ -6672,22 +6813,23 @@ class CodeSegments {
       TextSpan(style: codeStyle.baseStyle, text: 'start'),
       TextSpan(style: codeStyle.punctuationStyle, text: ','),
       TextSpan(
-          style: codeStyle.baseStyle, text: '\u000a              children'),
+          style: codeStyle.baseStyle, text: '\u000a                children'),
       TextSpan(style: codeStyle.punctuationStyle, text: ':'),
       TextSpan(style: codeStyle.baseStyle, text: ' '),
       TextSpan(style: codeStyle.punctuationStyle, text: '['),
-      TextSpan(style: codeStyle.baseStyle, text: '\u000a                '),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a                  '),
       TextSpan(
           style: codeStyle.commentStyle,
           text:
               '// This array contains the three line description on each card'),
-      TextSpan(style: codeStyle.baseStyle, text: '\u000a                '),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a                  '),
       TextSpan(style: codeStyle.commentStyle, text: '// demo.'),
-      TextSpan(style: codeStyle.baseStyle, text: '\u000a                '),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a                  '),
       TextSpan(style: codeStyle.classStyle, text: 'Padding'),
       TextSpan(style: codeStyle.punctuationStyle, text: '('),
       TextSpan(
-          style: codeStyle.baseStyle, text: '\u000a                  padding'),
+          style: codeStyle.baseStyle,
+          text: '\u000a                    padding'),
       TextSpan(style: codeStyle.punctuationStyle, text: ':'),
       TextSpan(style: codeStyle.baseStyle, text: ' '),
       TextSpan(style: codeStyle.keywordStyle, text: 'const'),
@@ -6702,19 +6844,20 @@ class CodeSegments {
       TextSpan(style: codeStyle.numberStyle, text: '8'),
       TextSpan(style: codeStyle.punctuationStyle, text: '),'),
       TextSpan(
-          style: codeStyle.baseStyle, text: '\u000a                  child'),
+          style: codeStyle.baseStyle, text: '\u000a                    child'),
       TextSpan(style: codeStyle.punctuationStyle, text: ':'),
       TextSpan(style: codeStyle.baseStyle, text: ' '),
       TextSpan(style: codeStyle.classStyle, text: 'Text'),
       TextSpan(style: codeStyle.punctuationStyle, text: '('),
       TextSpan(
           style: codeStyle.baseStyle,
-          text: '\u000a                    destination'),
+          text: '\u000a                      destination'),
       TextSpan(style: codeStyle.punctuationStyle, text: '.'),
       TextSpan(style: codeStyle.baseStyle, text: 'description'),
       TextSpan(style: codeStyle.punctuationStyle, text: ','),
       TextSpan(
-          style: codeStyle.baseStyle, text: '\u000a                    style'),
+          style: codeStyle.baseStyle,
+          text: '\u000a                      style'),
       TextSpan(style: codeStyle.punctuationStyle, text: ':'),
       TextSpan(style: codeStyle.baseStyle, text: ' descriptionStyle'),
       TextSpan(style: codeStyle.punctuationStyle, text: '.'),
@@ -6727,26 +6870,28 @@ class CodeSegments {
       TextSpan(style: codeStyle.punctuationStyle, text: '.'),
       TextSpan(style: codeStyle.baseStyle, text: 'black54'),
       TextSpan(style: codeStyle.punctuationStyle, text: '),'),
-      TextSpan(style: codeStyle.baseStyle, text: '\u000a                  '),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a                    '),
       TextSpan(style: codeStyle.punctuationStyle, text: '),'),
-      TextSpan(style: codeStyle.baseStyle, text: '\u000a                '),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a                  '),
       TextSpan(style: codeStyle.punctuationStyle, text: '),'),
-      TextSpan(style: codeStyle.baseStyle, text: '\u000a                '),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a                  '),
       TextSpan(style: codeStyle.classStyle, text: 'Text'),
       TextSpan(style: codeStyle.punctuationStyle, text: '('),
       TextSpan(style: codeStyle.baseStyle, text: 'destination'),
       TextSpan(style: codeStyle.punctuationStyle, text: '.'),
       TextSpan(style: codeStyle.baseStyle, text: 'city'),
       TextSpan(style: codeStyle.punctuationStyle, text: '),'),
-      TextSpan(style: codeStyle.baseStyle, text: '\u000a                '),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a                  '),
       TextSpan(style: codeStyle.classStyle, text: 'Text'),
       TextSpan(style: codeStyle.punctuationStyle, text: '('),
       TextSpan(style: codeStyle.baseStyle, text: 'destination'),
       TextSpan(style: codeStyle.punctuationStyle, text: '.'),
       TextSpan(style: codeStyle.baseStyle, text: 'location'),
       TextSpan(style: codeStyle.punctuationStyle, text: '),'),
-      TextSpan(style: codeStyle.baseStyle, text: '\u000a              '),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a                '),
       TextSpan(style: codeStyle.punctuationStyle, text: '],'),
+      TextSpan(style: codeStyle.baseStyle, text: '\u000a              '),
+      TextSpan(style: codeStyle.punctuationStyle, text: '),'),
       TextSpan(style: codeStyle.baseStyle, text: '\u000a            '),
       TextSpan(style: codeStyle.punctuationStyle, text: '),'),
       TextSpan(style: codeStyle.baseStyle, text: '\u000a          '),
diff --git a/lib/demos/material/cards_demo.dart b/lib/demos/material/cards_demo.dart
index 845fa5afbf..bac4c0cca2 100644
--- a/lib/demos/material/cards_demo.dart
+++ b/lib/demos/material/cards_demo.dart
@@ -95,7 +95,10 @@ class TravelDestinationItem extends StatelessWidget {
                 // This ensures that the Card's children are clipped correctly.
                 clipBehavior: Clip.antiAlias,
                 shape: shape,
-                child: TravelDestinationContent(destination: destination),
+                child: Semantics(
+                  label: destination.title,
+                  child: TravelDestinationContent(destination: destination),
+                ),
               ),
             ),
           ],
@@ -141,7 +144,10 @@ class TappableTravelDestinationItem extends StatelessWidget {
                       Theme.of(context).colorScheme.onSurface.withOpacity(0.12),
                   // Generally, material cards do not have a highlight overlay.
                   highlightColor: Colors.transparent,
-                  child: TravelDestinationContent(destination: destination),
+                  child: Semantics(
+                    label: destination.title,
+                    child: TravelDestinationContent(destination: destination),
+                  ),
                 ),
               ),
             ),
@@ -172,6 +178,9 @@ class SelectableTravelDestinationItem extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final colorScheme = Theme.of(context).colorScheme;
+    final String selectedStatus = isSelected
+        ? GalleryLocalizations.of(context)!.selected
+        : GalleryLocalizations.of(context)!.notSelected;
 
     return SafeArea(
       top: false,
@@ -180,8 +189,7 @@ class SelectableTravelDestinationItem extends StatelessWidget {
         padding: const EdgeInsets.all(8),
         child: Column(
           children: [
-            SectionTitle(
-                title: GalleryLocalizations.of(context)!.cardsDemoSelectable),
+            SectionTitle(title: GalleryLocalizations.of(context)!.selectable),
             SizedBox(
               height: height,
               child: Card(
@@ -205,7 +213,14 @@ class SelectableTravelDestinationItem extends StatelessWidget {
                             ? colorScheme.primary.withOpacity(0.08)
                             : Colors.transparent,
                       ),
-                      TravelDestinationContent(destination: destination),
+                      Semantics(
+                        label: '${destination.title}, $selectedStatus',
+                        onLongPressHint: isSelected
+                            ? GalleryLocalizations.of(context)!.deselect
+                            : GalleryLocalizations.of(context)!.select,
+                        child:
+                            TravelDestinationContent(destination: destination),
+                      ),
                       Align(
                         alignment: Alignment.topRight,
                         child: Padding(
@@ -220,6 +235,7 @@ class SelectableTravelDestinationItem extends StatelessWidget {
                       ),
                     ],
                   ),
+                  //),
                 ),
               ),
             ),
@@ -292,9 +308,13 @@ class TravelDestinationContent extends StatelessWidget {
                 child: FittedBox(
                   fit: BoxFit.scaleDown,
                   alignment: Alignment.centerLeft,
-                  child: Text(
-                    destination.title,
-                    style: titleStyle,
+                  child: Semantics(
+                    container: true,
+                    header: true,
+                    child: Text(
+                      destination.title,
+                      style: titleStyle,
+                    ),
                   ),
                 ),
               ),
@@ -302,27 +322,30 @@ class TravelDestinationContent extends StatelessWidget {
           ),
         ),
         // Description and share/explore buttons.
-        Padding(
-          padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
-          child: DefaultTextStyle(
-            softWrap: false,
-            overflow: TextOverflow.ellipsis,
-            style: descriptionStyle,
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                // This array contains the three line description on each card
-                // demo.
-                Padding(
-                  padding: const EdgeInsets.only(bottom: 8),
-                  child: Text(
-                    destination.description,
-                    style: descriptionStyle.copyWith(color: Colors.black54),
+        Semantics(
+          container: true,
+          child: Padding(
+            padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
+            child: DefaultTextStyle(
+              softWrap: false,
+              overflow: TextOverflow.ellipsis,
+              style: descriptionStyle,
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  // This array contains the three line description on each card
+                  // demo.
+                  Padding(
+                    padding: const EdgeInsets.only(bottom: 8),
+                    child: Text(
+                      destination.description,
+                      style: descriptionStyle.copyWith(color: Colors.black54),
+                    ),
                   ),
-                ),
-                Text(destination.city),
-                Text(destination.location),
-              ],
+                  Text(destination.city),
+                  Text(destination.location),
+                ],
+              ),
             ),
           ),
         ),
diff --git a/lib/l10n/intl_en.arb b/lib/l10n/intl_en.arb
index fec97b9322..c7228f9abe 100644
--- a/lib/l10n/intl_en.arb
+++ b/lib/l10n/intl_en.arb
@@ -17,6 +17,26 @@
       }
     }
   },
+  "deselect": "Deselect",
+  "@deselect": {
+    "description": "Deselect a (selectable) item"
+  },
+  "notSelected": "Not selected",
+  "@notSelected": {
+    "description": "Indicates the status of a (selectable) item not being selected"
+  },
+  "select": "Select",
+  "@select": {
+    "description": "Select a (selectable) item"
+  },
+  "selectable": "Selectable (long press)",
+  "@selectable": {
+    "description": "Indicates the associated piece of UI is selectable by long pressing it"
+  },
+  "selected": "Selected",
+  "@selected": {
+    "description": "Indicates status of a (selectable) item being selected"
+  },
   "signIn": "SIGN IN",
   "@signIn": {
     "description": "Sign in label to sign into website."
@@ -45,14 +65,6 @@
   "@backToGallery": {
     "description": "Semantic label for back button to exit a study and return to the gallery home page."
   },
-  "cardsDemoTappable": "Tappable",
-  "@cardsDemoTappable": {
-    "description": "The user can tap this button"
-  },
-  "cardsDemoSelectable": "Selectable (long press)",
-  "@cardsDemoSelectable": {
-    "description": "If the user taps and hold this card. The card will toggled between on and off."
-  },
   "cardsDemoExplore": "Explore",
   "@cardsDemoExplore": {
     "description": "Click to see more about the content in the cards demo."
@@ -75,6 +87,10 @@
       }
     }
   },
+  "cardsDemoTappable": "Tappable",
+  "@cardsDemoTappable": {
+    "description": "The user can tap this button"
+  },
   "cardsDemoTravelDestinationTitle1": "Top 10 Cities to Visit in Tamil Nadu",
   "@cardsDemoTravelDestinationTitle1": {
     "description": "The top 10 cities that you can visit in Tamil Nadu"
diff --git a/lib/l10n/intl_en_US.xml b/lib/l10n/intl_en_US.xml
index cfa8ca0b07..20078c08ea 100644
--- a/lib/l10n/intl_en_US.xml
+++ b/lib/l10n/intl_en_US.xml
@@ -13,6 +13,26 @@
     name="aboutDialogDescription"
     description="A description about how to view the source code for this app."
     >To see the source code for this app, please visit the {repoLink}.</string>
+  <string
+    name="deselect"
+    description="Deselect a (selectable) item"
+    >Deselect</string>
+  <string
+    name="notSelected"
+    description="Indicates the status of a (selectable) item not being selected"
+    >Not selected</string>
+  <string
+    name="select"
+    description="Select a (selectable) item"
+    >Select</string>
+  <string
+    name="selectable"
+    description="Indicates the associated piece of UI is selectable by long pressing it"
+    >Selectable (long press)</string>
+  <string
+    name="selected"
+    description="Indicates status of a (selectable) item being selected"
+    >Selected</string>
   <string
     name="signIn"
     description="Sign in label to sign into website."
@@ -41,14 +61,6 @@
     name="backToGallery"
     description="Semantic label for back button to exit a study and return to the gallery home page."
     >Back to Gallery</string>
-  <string
-    name="cardsDemoTappable"
-    description="The user can tap this button"
-    >Tappable</string>
-  <string
-    name="cardsDemoSelectable"
-    description="If the user taps and hold this card. The card will toggled between on and off."
-    >Selectable (long press)</string>
   <string
     name="cardsDemoExplore"
     description="Click to see more about the content in the cards demo."
@@ -61,6 +73,10 @@
     name="cardsDemoShareSemantics"
     description="Semantics label for Share. Label tells user to share the destinationName to the user. Example Share Tamil"
     >Share {destinationName}</string>
+  <string
+    name="cardsDemoTappable"
+    description="The user can tap this button"
+    >Tappable</string>
   <string
     name="cardsDemoTravelDestinationTitle1"
     description="The top 10 cities that you can visit in Tamil Nadu"
diff --git a/pubspec.lock b/pubspec.lock
index 33af817ce8..8ccbc788d4 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -616,7 +616,7 @@ packages:
       name: stream_channel
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.0"
+    version: "2.1.1"
   string_scanner:
     dependency: "direct dev"
     description:
@@ -728,7 +728,7 @@ packages:
       name: vector_math
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.3"
+    version: "2.1.4"
   vm_service:
     dependency: transitive
     description: