Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add more accessibility sprinkles #1510

Merged
merged 3 commits into from
Sep 10, 2022
+8 −4
Merged

Add more accessibility sprinkles #1510

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7c6566c
Add more accessibility sprinkles
yanthomasdev Sep 8, 2022
dc364db
Apply suggestion
yanthomasdev Sep 9, 2022
4c1da63
Merge branch 'main' into yan/a11y-sprinkles
yanthomasdev Sep 10, 2022
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
2 changes: 1 addition & 1 deletion src/pages/en/concepts/why-astro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ An Astro website can [load 40% faster with 90% less JavaScript](https://twitter.

We started by making sure that you could use any favorite UI component languages that you already know. React, Preact, Svelte, Vue, Solid, Lit, and several others are all supported for creating new UI components in an Astro project.

We also wanted to make sure that Astro had a great built-in component language as well. To do that, we created our own `.astro` UI language. It's heavily influenced by HTML: any valid snippet of HTML is already a valid Astro component! But it also combines some of our favorite features borrowed from other component languages like JSX expressions (React) and CSS scoping by default (Svelte and Vue).
We also wanted to make sure that Astro had a great built-in component language as well. To do that, we created our own `.astro` UI language. It's heavily influenced by HTML: any valid snippet of HTML is already a valid Astro component! But it also combines some of our favorite features borrowed from other component languages like JSX expressions (React) and CSS scoping by default (Svelte and Vue). This closeness to HTML also makes it easier to use progressive enhancement and common accessibility patterns without any overhead.

Astro was designed to be less complex than other UI frameworks and languages. One big reason for this is that Astro was designed to render on the server, not in the browser. That means that you don't need to worry about: hooks (React), stale closures (also React), refs (Vue), observables (Svelte), atoms, selectors, reactions, or derivations. There is no reactivity on the server, so all of that complexity melts away.

Expand Down
2 changes: 1 addition & 1 deletion src/pages/en/core-concepts/astro-pages.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ Astro Pages must return a full `<html>...</html>` page response, including `<hea
---
// Example: src/pages/index.astro
---
<html>
<html lang="en">
<head>
<title>My Homepage</title>
</head>
Expand Down
6 changes: 5 additions & 1 deletion src/pages/en/core-concepts/framework-components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,10 @@ the user scrolls down and the component is visible on the page -->
Any renderer JS necessary for the component's framework (e.g. React, Svelte) is downloaded with the page. The `client:*` directives only dictate when the _component JS_ is imported and when the _component_ is hydrated.
:::

:::note[Accessibility]
Most framework-specific accessibility patterns should work the same when these components are used in Astro. Be sure to choose a client directive that will ensure any accessibility-related JavaScript is properly loaded and executed at the appropriate time!
:::

### Available Hydration Directives

There are serveral hydration directives available for UI framework components: `client:load`, `client:idle`, `client:visible`, `client:media={QUERY}` and `client:only={FRAMEWORK}`.
Expand Down Expand Up @@ -219,7 +223,7 @@ import MyAstroComponent from '../components/MyAstroComponent.astro';

## Can I Hydrate Astro Components?

If you try to hydrate an Astro component with a `client:` modifier, you will get an error.
If you try to hydrate an Astro component with a `client:` modifier, you will get an error.

[Astro components](/en/core-concepts/astro-components/) are HTML-only templating components with no client-side runtime. But, you can use a `<script>` tag in your Astro component template to send JavaScript to the browser that executes in the global scope.

Expand Down
2 changes: 1 addition & 1 deletion src/pages/en/core-concepts/layouts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ Layout components are commonly placed in a `src/layouts` directory in your proje
```astro
---
---
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Cool Astro Site</title>
Expand Down