Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions site/lib/_sass/components/_tabs.scss
Original file line number Diff line number Diff line change
Expand Up @@ -79,8 +79,14 @@ ul.nav-tabs {
padding-left: 1rem;
}

.tab-pane> :first-child {
margin-block-start: 0;
.tab-pane {
> :first-child {
margin-block-start: 0;
}

> :last-child {
margin-block-end: 1rem;
}
}
}
}
2 changes: 1 addition & 1 deletion site/lib/src/style_hash.dart
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@
// dart format off

/// The generated hash of the `main.css` file.
const generatedStylesHash = 'm+c3m5q1zKUq';
const generatedStylesHash = 'TjVYgo8Im8dq';
27 changes: 14 additions & 13 deletions src/content/ui/accessibility/assistive-technologies.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,9 @@ navigate around your app.

**To turn on the screen reader on your device, complete the following steps:**

{% tabs %}
{% tab "TalkBack on Android" %}
<Tabs key="screen-reader-os" wrapped="true">

<Tab name="Android">

1. On your device, open **Settings**.
2. Select **Accessibility** and then **TalkBack**.
Expand All @@ -36,21 +37,21 @@ navigate around your app.
To learn how to find and customize Android's
accessibility features, view the following video.

{% ytEmbed 'FQyj_XTl01w', 'Customize Pixel and Android accessibility features' %}
<YouTubeEmbed id="FQyj_XTl01w" title="Customize Pixel and Android accessibility features" />

{% endtab %}
{% tab "VoiceOver on iPhone" %}
</Tab>
<Tab name="iOS or iPadOS">

1. On your device, open **Settings > Accessibility > VoiceOver**
2. Turn the VoiceOver setting on or off

To learn how to find and customize iOS
accessibility features, view the following video.

{% ytEmbed 'ROIe49kXOc8', 'How to navigate your iPhone or iPad with VoiceOver' %}
<YouTubeEmbed id="ROIe49kXOc8" title="How to navigate your iPhone or iPad with VoiceOver" />

{% endtab %}
{% tab "Browsers" %}
</Tab>
<Tab name="Browser">

For web, the following screen readers are currently supported:

Expand Down Expand Up @@ -79,8 +80,8 @@ void main() {
}
```

{% endtab %}
{% tab "Desktop" %}
</Tab>
<Tab name="Desktop">

Windows comes with a screen reader called Narrator
but some developers recommend using the more popular
Expand All @@ -93,7 +94,7 @@ Windows apps, check out
On a Mac, you can use the desktop version of VoiceOver,
which is included in macOS.

{% ytEmbed '5R-6WvAihms', 'Screen reader basics: VoiceOver' %}
<YouTubeEmbed id="5R-6WvAihms" title="Screen reader basics: VoiceOver" />

On Linux, a popular screen reader is called Orca.
It comes pre-installed with some distributions
Expand All @@ -103,8 +104,8 @@ To learn about using Orca, check out

[orca]: https://www.a11yproject.com/posts/getting-started-with-orca

{% endtab %}
{% endtabs %}
</Tab>
</Tabs>

<br/>

Expand Down
2 changes: 1 addition & 1 deletion src/content/ui/accessibility/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ In the video below, two of our engineers take a mobile app from a dire
accessibility state to one that takes advantage of Flutter's built-in
widgets to offer a dramatically more accessible experience.

{% ytEmbed 'bWbBgbmAdQs', 'Building Flutter apps with accessibility in mind' %}
<YouTubeEmbed id="bWbBgbmAdQs" title="Building Flutter apps with accessibility in mind" />


## Accessibility release checklist
Expand Down