diff options
| author | Deniz Akşimşek <deniz@denizaksimsek.com> | 2024-08-30 05:34:45 +0300 |
|---|---|---|
| committer | Deniz Akşimşek <deniz@denizaksimsek.com> | 2024-08-30 05:34:45 +0300 |
| commit | 223a8a824230b2d8266b2ad8760449c3890f314a (patch) | |
| tree | 4cecdf6bacce47b44e3428bafa0f1138b33fd717 | |
| parent | a100ce740f2f4ca13d448351ad8e043131ecf2f1 (diff) | |
| download | missing-223a8a824230b2d8266b2ad8760449c3890f314a.tar.gz missing-223a8a824230b2d8266b2ad8760449c3890f314a.zip | |
Fix markup error in aria docs
| -rw-r--r-- | www/docs/40-aria.md | 12 |
1 files changed, 7 insertions, 5 deletions
diff --git a/www/docs/40-aria.md b/www/docs/40-aria.md index 84aa4b5..92da6f3 100644 --- a/www/docs/40-aria.md +++ b/www/docs/40-aria.md @@ -3,7 +3,7 @@ title: ARIA url: ./aria/ --- -# ARIA Patterns +# ARIA Patterns Missing.css will style markup based on ARIA roles. We often reference the [<cite>WAI-ARIA Authoring Practices</cite>][WAI]. @@ -19,6 +19,7 @@ appropriately — see [WAI: Tabs][]. To get the actual behavior of an accessible tabset, you can use [Missing.js § Tabs](/docs/js#tabs). <figure> + ~~~ html <div role="tablist" aria-label="Tabs example"> <button role="tab" aria-controls="servers" aria-selected="true" @@ -28,11 +29,12 @@ To get the actual behavior of an accessible tabset, you can use [Missing.js &sec <button role="tab" aria-controls="users" >Users</button> </div> - - <div id="servers" role="tabpanel">...</div> - <div id="channels" role="tabpanel">...</div> - <div id="users" role="tabpanel">...</div> + + <div id="servers" role="tabpanel">...</div> + <div id="channels" hidden role="tabpanel">...</div> + <div id="users" hidden role="tabpanel">...</div> ~~~ + </figure> <script type="module" src="/dist/js/tabs.js"></script> |