Add docs for aria-current="page"

Ref #240 Add styles for ARIA attributes
EvgenyOrekhov · Feb 23, 2023 · 0db65b8 · 0db65b8 · vercel · Feb 23, 2023
1 parent 2d33edf
commit 0db65b8
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/site/template.html b/site/template.html
@@ -20,7 +20,10 @@ <h1>
     </header>
     <nav>
       <ul>
-        <li><a href="#">Home</a></li>
+        <li><a href="#" aria-current="page">Home</a></li>
+        <li><a href="#">Page 1</a></li>
+        <li><a href="#">Page 2</a></li>
+        <li><a href="#">Page 3</a></li>
         <li>
           <span>Menu</span>
           <ul>

diff --git a/site/usage.md b/site/usage.md
@@ -28,6 +28,28 @@ Starting afresh? Use [Quickstart Template]({{ "/template/" | url }}).
 </body>
 ```
 
+### Use `aria-current="page"` to highlight current link
+
+```html
+<nav>
+  <ul>
+    <li><a href="#">Page 1</a></li>
+    <li><a href="#" aria-current="page">Page 2</a></li>
+    <li><a href="#">Page 3</a></li>
+  </ul>
+</nav>
+```
+
+Result:
+
+<nav>
+  <ul>
+    <li><a href="#">Page 1</a></li>
+    <li><a href="#" aria-current="page">Page 2</a></li>
+    <li><a href="#">Page 3</a></li>
+  </ul>
+</nav>
+
 ### Use nested `<ul>` inside `<nav>` to create dropdown menus
 
 ```html