Skip to content

Commit 8b7d5b5

Browse files
parloughparlough
authored
Fix screen reader text for cards (#11801)
Fixes the remaining issues listed in #10534 Closes #10534
1 parent f2e6a4c commit 8b7d5b5

File tree

16 files changed

+35
-35
lines changed

16 files changed

+35
-35
lines changed

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -124,17 +124,17 @@ Android and iOS:
124124
<div class="card-grid">
125125
<a class="card outlined-card" href="/add-to-app/android/project-setup">
126126
<div class="card-header text-center">
127-
<header class="card-title">Android</header>
127+
<span class="card-title">Android</span>
128128
</div>
129129
</a>
130130
<a class="card outlined-card" href="/add-to-app/ios/project-setup">
131131
<div class="card-header text-center">
132-
<header class="card-title">iOS</header>
132+
<span class="card-title">iOS</span>
133133
</div>
134134
</a>
135135
<a class="card outlined-card" href="/platform-integration/web/embedding-flutter-web#embedded-mode">
136136
<div class="card-header text-center">
137-
<header class="card-title">Web</header>
137+
<span class="card-title">Web</span>
138138
</div>
139139
</a>
140140
</div>
@@ -147,17 +147,17 @@ see our API usage guides at the following links:
147147
<div class="card-grid">
148148
<a class="card outlined-card" href="/add-to-app/android/add-flutter-screen">
149149
<div class="card-header text-center">
150-
<header class="card-title">Android</header>
150+
<span class="card-title">Android</span>
151151
</div>
152152
</a>
153153
<a class="card outlined-card" href="/add-to-app/ios/add-flutter-screen">
154154
<div class="card-header text-center">
155-
<header class="card-title">iOS</header>
155+
<span class="card-title">iOS</span>
156156
</div>
157157
</a>
158158
<a class="card outlined-card" href="/platform-integration/web/embedding-flutter-web#manage-flutter-views-from-js">
159159
<div class="card-header text-center">
160-
<header class="card-title">Web</header>
160+
<span class="card-title">Web</span>
161161
</div>
162162
</a>
163163
</div>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ js: [{url: '/assets/js/temp/chromeos-install-redirector.js'}]
1414

1515
<div class="card-grid narrow">
1616
{% for target in target-list %}
17-
<a class="card outlined-card install-card card-chromeos" id="install-{{os | remove: ' ' | downcase}}" href="/get-started/install/{{os | remove: ' ' | downcase}}/{{target | downcase}}">
17+
<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}}">
1818
{% assign icon = target | downcase -%}
1919
<div class="card-leading">
2020
{% if icon == 'android' -%}
@@ -24,7 +24,7 @@ js: [{url: '/assets/js/temp/chromeos-install-redirector.js'}]
2424
{% endif -%}
2525
</div>
2626
<div class="card-header text-center">
27-
<header class="card-title">{{target}}</header>
27+
<span class="card-title">{{target}}</span>
2828
{% if icon == 'android' -%}
2929
<span class="card-subtitle">Recommended</span>
3030
{% endif -%}

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ js: [{url: '/assets/js/page/install-current.js'}]
88

99
<div class="card-grid narrow">
1010
{% for os in os-list %}
11-
<a class="card outlined-card install-card" id="install-{{os | remove: ' ' | downcase}}" href="/get-started/install/{{os | remove: ' ' | downcase}}">
11+
<a class="card outlined-card install-card" id="install-{{os | remove: ' ' | downcase}}" href="/get-started/install/{{os | remove: ' ' | downcase}}" aria-label="{{os}} setup instructions">
1212
<div class="card-leading">
1313
<img src="/assets/images/docs/brand-svg/{{os | downcase}}.svg" width="72" height="72" aria-hidden="true" alt="{{os}} logo">
1414
</div>
1515
<div class="card-header text-center">
16-
<header class="card-title">{{os}}</header>
16+
<span class="card-title">{{os}}</span>
1717
</div>
1818
</a>
1919
{% endfor %}

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ js: [{url: '/assets/js/temp/linux-install-redirector.js'}]
1414

1515
<div class="card-grid narrow">
1616
{% for target in target-list %}
17-
<a class="card outlined-card install-card card-linux" id="install-{{os | remove: ' ' | downcase}}" href="/get-started/install/{{os | remove: ' ' | downcase}}/{{target | downcase}}">
17+
<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}}">
1818
{% assign icon = target | downcase -%}
1919
<div class="card-leading">
2020
{% if icon == 'desktop' -%}
@@ -26,7 +26,7 @@ js: [{url: '/assets/js/temp/linux-install-redirector.js'}]
2626
{% endif -%}
2727
</div>
2828
<div class="card-header text-center">
29-
<header class="card-title">{{target}}</header>
29+
<span class="card-title">{{target}}</span>
3030
{% if icon == 'android' -%}
3131
<span class="card-subtitle">Recommended</span>
3232
{% endif -%}

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ js: [{url: '/assets/js/temp/macos-install-redirector.js'}]
2121
{% assign targetlink = target | downcase %}
2222
{% endcase %}
2323

24-
<a class="card outlined-card install-card card-macos" id="install-{{os | downcase}}" href="/get-started/install/{{os | downcase}}/{{targetlink}}">
24+
<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}}">
2525
{% assign icon = target | downcase -%}
2626
<div class="card-leading">
2727
{% case icon %}
@@ -36,7 +36,7 @@ js: [{url: '/assets/js/temp/macos-install-redirector.js'}]
3636
{% endcase -%}
3737
</div>
3838
<div class="card-header text-center">
39-
<header class="card-title">{{target}}</header>
39+
<span class="card-title">{{target}}</span>
4040
{% if icon == 'ios' -%}
4141
<span class="card-subtitle">Recommended</span>
4242
{% endif -%}

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ js: [{url: '/assets/js/temp/windows-install-redirector.js'}]
2020
{% else %}
2121
{% assign targetlink = target | downcase %}
2222
{% endcase %}
23-
<a class="card outlined-card install-card card-windows" id="install-{{os | downcase}}" href="/get-started/install/{{os | downcase}}/{{targetlink}}">
23+
<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}}">
2424
{% assign icon = target | downcase -%}
2525
<div class="card-leading">
2626
{% case icon %}
@@ -33,7 +33,7 @@ js: [{url: '/assets/js/temp/windows-install-redirector.js'}]
3333
{% endcase -%}
3434
</div>
3535
<div class="card-header text-center">
36-
<header class="card-title">{{target}}</header>
36+
<span class="card-title">{{target}}</span>
3737
{% if icon == 'android' -%}
3838
<span class="card-subtitle">Recommended</span>
3939
{% endif -%}

‎src/content/index.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ description: Get started with Flutter. Widgets, examples, updates, and API docs
88
{% for card in docs_cards -%}
99
<a class="card outlined-card" href="{{card.url}}">
1010
<div class="card-header">
11-
<header class="card-title">{{card.name}}</header>
11+
<span class="card-title">{{card.name}}</span>
1212
</div>
1313
<div class="card-content">
1414
<p>{{card.description}}</p>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ or the platform you already have set up.
4040
<span class="material-symbols" aria-hidden="true">phone_android</span>
4141
</div>
4242
<div class="card-header text-center">
43-
<header class="card-title">
43+
<span class="card-title">
4444
Make Android and
4545
{% if target contains "iOS" -%}
4646
{{target}} apps on macOS
@@ -49,7 +49,7 @@ or the platform you already have set up.
4949
{%- else -%}
5050
{{target}} desktop apps
5151
{%- endif -%}
52-
</header>
52+
</span>
5353
</div>
5454
</a>
5555
{% endfor %}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ or the platform you already have set up.
2727
<span class="material-symbols" aria-hidden="true">phone_iphone</span>
2828
</div>
2929
<div class="card-header text-center">
30-
<header class="card-title">Make iOS and {{ target }}{% if target == 'macOS' %} desktop{% endif %} apps</header>
30+
<span class="card-title">Make iOS and {{ target }}{% if target == 'macOS' %} desktop{% endif %} apps</span>
3131
</div>
3232
</a>
3333
{% endfor %}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ or the platform you already have set up.
2323
{% endcase -%}
2424
</div>
2525
<div class="card-header text-center">
26-
<header class="card-title">Make {{ target }} and Linux desktop apps</header>
26+
<span class="card-title">Make {{ target }} and Linux desktop apps</span>
2727
</div>
2828
</a>
2929
{% endfor %}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ or the platform you already have set up.
2727
<span class="material-symbols" aria-hidden="true">laptop_mac</span>
2828
</div>
2929
<div class="card-header text-center">
30-
<header class="card-title">Make {{ target }} and macOS desktop apps</header>
30+
<span class="card-title">Make {{ target }} and macOS desktop apps</span>
3131
</div>
3232
</a>
3333
{% endfor %}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ or the platform you already have set up.
2525
<span class="material-symbols" aria-hidden="true">desktop_windows</span>
2626
</div>
2727
<div class="card-header text-center">
28-
<header class="card-title">Make Windows desktop and {{ target }} apps</header>
28+
<span class="card-title">Make Windows desktop and {{ target }} apps</span>
2929
</div>
3030
</a>
3131
{% endfor %}

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

+7-7
Original file line numberDiff line numberDiff line change
@@ -15,50 +15,50 @@ choose your preferred environment and follow the corresponding instructions.
1515
<div class="card-grid">
1616
<a class="card outlined-card" href="#vs-code">
1717
<div class="card-header">
18-
<header class="card-title">VS Code</header>
18+
<span class="card-title">VS Code</span>
1919
</div>
2020
<div class="card-content">
2121
<p>Create a new Flutter app without leaving VS Code.</p>
2222
</div>
2323
</a>
2424
<a class="card outlined-card" href="#android-studio">
2525
<div class="card-header">
26-
<header class="card-title">Android Studio</header>
26+
<span class="card-title">Android Studio</span>
2727
</div>
2828
<div class="card-content">
2929
<p>Create a new Flutter app without leaving Android Studio.</p>
3030
</div>
3131
</a>
3232
<a class="card outlined-card" href="#intellij">
3333
<div class="card-header">
34-
<header class="card-title">IntelliJ</header>
34+
<span class="card-title">IntelliJ</span>
3535
</div>
3636
<div class="card-content">
3737
<p>Create a new Flutter app without leaving your IntelliJ-based IDE.</p>
3838
</div>
3939
</a>
4040
<a class="card outlined-card" href="#project-idx">
4141
<div class="card-header">
42-
<header class="card-title">Project IDX</header>
42+
<span class="card-title">Project IDX</span>
4343
</div>
4444
<div class="card-content">
4545
<p>For quick and easy setup, create a new Flutter app in Project IDX.</p>
4646
</div>
4747
</a>
4848
<a class="card outlined-card" href="#terminal">
4949
<div class="card-header">
50-
<header class="card-title">Terminal</header>
50+
<span class="card-title">Terminal</span>
5151
</div>
5252
<div class="card-content">
5353
<p>For maximum flexibility, create a new Flutter app from the command line.</p>
5454
</div>
5555
</a>
5656
<a class="card outlined-card" href="/add-to-app#get-started">
5757
<div class="card-header">
58-
<header class="card-title">
58+
<span class="card-title">
5959
<span>Add to app</span>
6060
<span class="material-symbols" aria-hidden="true" style="font-size: 1rem;">open_in_new</span>
61-
</header>
61+
</span>
6262
</div>
6363
<div class="card-content">
6464
<p>Create a new Flutter module to embed in an existing app.</p>

‎src/content/reference/widgets.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ our [videos](/resources/videos) page.
3333
{% endif -%}
3434
</div>
3535
<div class="card-header">
36-
<header class="card-title">{{comp.name}}</header>
36+
<span class="card-title">{{comp.name}}</span>
3737
</div>
3838
<div class="card-content">
3939
<p class="card-text">{{ comp.description | truncatewords: 25 }}</p>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,12 @@ To get started, see our cookbooks for Android and iOS:
4141
<div class="card-grid">
4242
<a class="card outlined-card" href="/cookbook/navigation/set-up-app-links">
4343
<div class="card-header text-center">
44-
<header class="card-title">Android</header>
44+
<span class="card-title">Android</span>
4545
</div>
4646
</a>
4747
<a class="card outlined-card" href="/cookbook/navigation/set-up-universal-links">
4848
<div class="card-header text-center">
49-
<header class="card-title">iOS</header>
49+
<span class="card-title">iOS</span>
5050
</div>
5151
</a>
5252
</div>

‎src/content/ui/widgets/index.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ Flutter ships with two design systems as part of the SDK.
1919
{%- if section.name == "Cupertino" or section.name == "Material components" -%}
2020
<a class="card outlined-card" href="{{page.url}}{{section.id}}">
2121
<div class="card-header">
22-
<header class="card-title">{{section.name}}</header>
22+
<span class="card-title">{{section.name}}</span>
2323
</div>
2424
<div class="card-content">
2525
<p>{{section.description}}</p>
@@ -46,7 +46,7 @@ like input, layout, and text.
4646
{%- if section.name != "Cupertino" and section.name != "Material components" and section.name != "Material 2 components" -%}
4747
<a class="card outlined-card" href="{{page.url}}{{section.id}}">
4848
<div class="card-header">
49-
<header class="card-title">{{section.name}}</header>
49+
<span class="card-title">{{section.name}}</span>
5050
</div>
5151
<div class="card-content">
5252
<p>{{section.description}}</p>

0 commit comments

Comments
 (0)