Fix screen reader text for cards

src/content/add-to-app/index.md

@@ -124,17 +124,17 @@ Android and iOS:
 <div class="card-grid">
   <a class="card outlined-card" href="/add-to-app/android/project-setup">
     <div class="card-header text-center">
-      <header class="card-title">Android</header>
+      <span class="card-title">Android</span>
     </div>
   </a>
   <a class="card outlined-card" href="/add-to-app/ios/project-setup">
     <div class="card-header text-center">
-      <header class="card-title">iOS</header>
+      <span class="card-title">iOS</span>
     </div>
   </a>
   <a class="card outlined-card" href="/platform-integration/web/embedding-flutter-web#embedded-mode">
     <div class="card-header text-center">
-      <header class="card-title">Web</header>
+      <span class="card-title">Web</span>
     </div>
   </a>
 </div>
@@ -147,17 +147,17 @@ see our API usage guides at the following links:
 <div class="card-grid">
   <a class="card outlined-card" href="/add-to-app/android/add-flutter-screen">
     <div class="card-header text-center">
-      <header class="card-title">Android</header>
+      <span class="card-title">Android</span>
     </div>
   </a>
   <a class="card outlined-card" href="/add-to-app/ios/add-flutter-screen">
     <div class="card-header text-center">
-      <header class="card-title">iOS</header>
+      <span class="card-title">iOS</span>
     </div>
   </a>
   <a class="card outlined-card" href="/platform-integration/web/embedding-flutter-web#manage-flutter-views-from-js">
     <div class="card-header text-center">
-      <header class="card-title">Web</header>
+      <span class="card-title">Web</span>
     </div>
   </a>
 </div>

src/content/get-started/install/chromeos/index.md

@@ -14,7 +14,7 @@ js: [{url: '/assets/js/temp/chromeos-install-redirector.js'}]
 
 <div class="card-grid narrow">
 {% for target in target-list %}
-  <a class="card outlined-card install-card card-chromeos" id="install-{{os | remove: ' ' | downcase}}" href="/get-started/install/{{os | remove: ' ' | downcase}}/{{target | downcase}}">
+  <a class="card outlined-card install-card card-chromeos" id="install-{{os | remove: ' ' | downcase}}" href="/get-started/install/{{os | remove: ' ' | downcase}}/{{target | downcase}}" aria-label="ChromeOS setup instructions for first deploying to {{target}}">
     {% assign icon = target | downcase -%}
     <div class="card-leading">
       {% if icon == 'android' -%}
@@ -24,7 +24,7 @@ js: [{url: '/assets/js/temp/chromeos-install-redirector.js'}]
       {% endif -%}
     </div>
     <div class="card-header text-center">
-      <header class="card-title">{{target}}</header>
+      <span class="card-title">{{target}}</span>
       {% if icon == 'android' -%}
         <span class="card-subtitle">Recommended</span>
       {% endif -%}

src/content/get-started/install/index.md

@@ -8,12 +8,12 @@ js: [{url: '/assets/js/page/install-current.js'}]
 
 <div class="card-grid narrow">
 {% for os in os-list %}
-  <a class="card outlined-card install-card" id="install-{{os | remove: ' ' | downcase}}" href="/get-started/install/{{os | remove: ' ' | downcase}}">
+  <a class="card outlined-card install-card" id="install-{{os | remove: ' ' | downcase}}" href="/get-started/install/{{os | remove: ' ' | downcase}}" aria-label="{{os}} setup instructions">
     <div class="card-leading">
       <img src="/assets/images/docs/brand-svg/{{os | downcase}}.svg" width="72" height="72" aria-hidden="true" alt="{{os}} logo">
     </div>
     <div class="card-header text-center">
-      <header class="card-title">{{os}}</header>
+      <span class="card-title">{{os}}</span>
     </div>
   </a>
 {% endfor %}

src/content/get-started/install/linux/index.md

@@ -14,7 +14,7 @@ js: [{url: '/assets/js/temp/linux-install-redirector.js'}]
 
 <div class="card-grid narrow">
 {% for target in target-list %}
-  <a class="card outlined-card install-card card-linux" id="install-{{os | remove: ' ' | downcase}}" href="/get-started/install/{{os | remove: ' ' | downcase}}/{{target | downcase}}">
+  <a class="card outlined-card install-card card-linux" id="install-{{os | remove: ' ' | downcase}}" href="/get-started/install/{{os | remove: ' ' | downcase}}/{{target | downcase}}" aria-label="Linux setup instructions for first deploying to {{target}}">
     {% assign icon = target | downcase -%}
     <div class="card-leading">
       {% if icon == 'desktop' -%}
@@ -26,7 +26,7 @@ js: [{url: '/assets/js/temp/linux-install-redirector.js'}]
       {% endif -%}
     </div>
     <div class="card-header text-center">
-      <header class="card-title">{{target}}</header>
+      <span class="card-title">{{target}}</span>
       {% if icon == 'android' -%}
         <span class="card-subtitle">Recommended</span>
       {% endif -%}

src/content/get-started/install/macos/index.md

@@ -21,7 +21,7 @@ js: [{url: '/assets/js/temp/macos-install-redirector.js'}]
   {% assign targetlink = target | downcase %}
   {% endcase %}
 
-  <a class="card outlined-card install-card card-macos" id="install-{{os | downcase}}" href="/get-started/install/{{os | downcase}}/{{targetlink}}">
+  <a class="card outlined-card install-card card-macos" id="install-{{os | downcase}}" href="/get-started/install/{{os | downcase}}/{{targetlink}}" aria-label="macOS setup instructions for first deploying to {{target}}">
     {% assign icon = target | downcase -%}
     <div class="card-leading">
       {% case icon %}
@@ -36,7 +36,7 @@ js: [{url: '/assets/js/temp/macos-install-redirector.js'}]
       {% endcase -%}
     </div>
     <div class="card-header text-center">
-      <header class="card-title">{{target}}</header>
+      <span class="card-title">{{target}}</span>
       {% if icon == 'ios' -%}
         <span class="card-subtitle">Recommended</span>
       {% endif -%}

src/content/get-started/install/windows/index.md

@@ -20,7 +20,7 @@ js: [{url: '/assets/js/temp/windows-install-redirector.js'}]
   {% else %}
   {% assign targetlink = target | downcase %}
   {% endcase %}
-  <a class="card outlined-card install-card card-windows" id="install-{{os | downcase}}" href="/get-started/install/{{os | downcase}}/{{targetlink}}">
+  <a class="card outlined-card install-card card-windows" id="install-{{os | downcase}}" href="/get-started/install/{{os | downcase}}/{{targetlink}}" aria-label="Windows setup instructions for first deploying to {{target}}">
     {% assign icon = target | downcase -%}
     <div class="card-leading">
       {% case icon %}
@@ -33,7 +33,7 @@ js: [{url: '/assets/js/temp/windows-install-redirector.js'}]
       {% endcase -%}
     </div>
     <div class="card-header text-center">
-      <header class="card-title">{{target}}</header>
+      <span class="card-title">{{target}}</span>
       {% if icon == 'android' -%}
         <span class="card-subtitle">Recommended</span>
       {% endif -%}

src/content/index.md

@@ -8,7 +8,7 @@ description: Get started with Flutter. Widgets, examples, updates, and API docs
 {% for card in docs_cards -%}
   <a class="card outlined-card" href="{{card.url}}">
     <div class="card-header">
-      <header class="card-title">{{card.name}}</header>
+      <span class="card-title">{{card.name}}</span>
     </div>
     <div class="card-content">
       <p>{{card.description}}</p>

src/content/platform-integration/android/install-android/index.md

@@ -40,7 +40,7 @@ or the platform you already have set up.
       <span class="material-symbols" aria-hidden="true">phone_android</span>
     </div>
     <div class="card-header text-center">
-      <header class="card-title">
+      <span class="card-title">
         Make Android and
         {% if target contains "iOS" -%}
         {{target}} apps on macOS
@@ -49,7 +49,7 @@ or the platform you already have set up.
         {%- else -%}
         {{target}} desktop apps
         {%- endif -%}
-      </header>
+      </span>
     </div>
   </a>
 {% endfor %}

src/content/platform-integration/ios/install-ios/index.md

@@ -27,7 +27,7 @@ or the platform you already have set up.
       <span class="material-symbols" aria-hidden="true">phone_iphone</span>
     </div>
     <div class="card-header text-center">
-      <header class="card-title">Make iOS and {{ target }}{% if target == 'macOS' %} desktop{% endif %} apps</header>
+      <span class="card-title">Make iOS and {{ target }}{% if target == 'macOS' %} desktop{% endif %} apps</span>
     </div>
   </a>
 {% endfor %}

src/content/platform-integration/linux/install-linux/index.md

@@ -23,7 +23,7 @@ or the platform you already have set up.
       {% endcase -%}
     </div>
     <div class="card-header text-center">
-      <header class="card-title">Make {{ target }} and Linux desktop apps</header>
+      <span class="card-title">Make {{ target }} and Linux desktop apps</span>
     </div>
   </a>
 {% endfor %}

src/content/platform-integration/macos/install-macos/index.md

@@ -27,7 +27,7 @@ or the platform you already have set up.
       <span class="material-symbols" aria-hidden="true">laptop_mac</span>
     </div>
     <div class="card-header text-center">
-      <header class="card-title">Make {{ target }} and macOS desktop apps</header>
+      <span class="card-title">Make {{ target }} and macOS desktop apps</span>
     </div>
   </a>
 {% endfor %}

src/content/platform-integration/windows/install-windows/index.md

@@ -25,7 +25,7 @@ or the platform you already have set up.
       <span class="material-symbols" aria-hidden="true">desktop_windows</span>
     </div>
     <div class="card-header text-center">
-      <header class="card-title">Make Windows desktop and {{ target }} apps</header>
+      <span class="card-title">Make Windows desktop and {{ target }} apps</span>
     </div>
   </a>
 {% endfor %}

src/content/reference/create-new-app.md

@@ -15,50 +15,50 @@ choose your preferred environment and follow the corresponding instructions.
 <div class="card-grid">
   <a class="card outlined-card" href="#vs-code">
     <div class="card-header">
-      <header class="card-title">VS Code</header>
+      <span class="card-title">VS Code</span>
     </div>
     <div class="card-content">
       <p>Create a new Flutter app without leaving VS Code.</p>
     </div>
   </a>
   <a class="card outlined-card" href="#android-studio">
     <div class="card-header">
-      <header class="card-title">Android Studio</header>
+      <span class="card-title">Android Studio</span>
     </div>
     <div class="card-content">
       <p>Create a new Flutter app without leaving Android Studio.</p>
     </div>
   </a>
   <a class="card outlined-card" href="#intellij">
     <div class="card-header">
-      <header class="card-title">IntelliJ</header>
+      <span class="card-title">IntelliJ</span>
     </div>
     <div class="card-content">
       <p>Create a new Flutter app without leaving your IntelliJ-based IDE.</p>
     </div>
   </a>
   <a class="card outlined-card" href="#project-idx">
     <div class="card-header">
-      <header class="card-title">Project IDX</header>
+      <span class="card-title">Project IDX</span>
     </div>
     <div class="card-content">
       <p>For quick and easy setup, create a new Flutter app in Project IDX.</p>
     </div>
   </a>
   <a class="card outlined-card" href="#terminal">
     <div class="card-header">
-      <header class="card-title">Terminal</header>
+      <span class="card-title">Terminal</span>
     </div>
     <div class="card-content">
       <p>For maximum flexibility, create a new Flutter app from the command line.</p>
     </div>
   </a>
   <a class="card outlined-card" href="/add-to-app#get-started">
     <div class="card-header">
-      <header class="card-title">
+      <span class="card-title">
         <span>Add to app</span>
         <span class="material-symbols" aria-hidden="true" style="font-size: 1rem;">open_in_new</span>
-      </header>
+      </span>
     </div>
     <div class="card-content">
       <p>Create a new Flutter module to embed in an existing app.</p>

src/content/reference/widgets.md

@@ -33,7 +33,7 @@ our [videos](/resources/videos) page.
       {% endif -%}
     </div>
     <div class="card-header">
-      <header class="card-title">{{comp.name}}</header>
+      <span class="card-title">{{comp.name}}</span>
     </div>
     <div class="card-content">
       <p class="card-text">{{ comp.description | truncatewords: 25 }}</p>

src/content/ui/navigation/deep-linking.md

@@ -41,12 +41,12 @@ To get started, see our cookbooks for Android and iOS:
 <div class="card-grid">
   <a class="card outlined-card" href="/cookbook/navigation/set-up-app-links">
     <div class="card-header text-center">
-      <header class="card-title">Android</header>
+      <span class="card-title">Android</span>
     </div>
   </a>
   <a class="card outlined-card" href="/cookbook/navigation/set-up-universal-links">
     <div class="card-header text-center">
-      <header class="card-title">iOS</header>
+      <span class="card-title">iOS</span>
     </div>
   </a>
 </div>

src/content/ui/widgets/index.md

@@ -19,7 +19,7 @@ Flutter ships with two design systems as part of the SDK.
   {%- if section.name == "Cupertino" or section.name == "Material components" -%}
     <a class="card outlined-card" href="{{page.url}}{{section.id}}">
       <div class="card-header">
-        <header class="card-title">{{section.name}}</header>
+        <span class="card-title">{{section.name}}</span>
       </div>
       <div class="card-content">
         <p>{{section.description}}</p>
@@ -46,7 +46,7 @@ like input, layout, and text.
   {%- if section.name != "Cupertino" and section.name != "Material components" and section.name != "Material 2 components" -%}
     <a class="card outlined-card" href="{{page.url}}{{section.id}}">
       <div class="card-header">
-        <header class="card-title">{{section.name}}</header>
+        <span class="card-title">{{section.name}}</span>
       </div>
       <div class="card-content">
         <p>{{section.description}}</p>