tweak examples

tobz-nz · Feb 4, 2024 · 7aa21f9 · 7aa21f9
1 parent 806fcd2
commit 7aa21f9
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 14 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,15 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 4
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.{yml,yaml}]
+indent_size = 2
diff --git a/index.html b/index.html
@@ -12,17 +12,17 @@
                 grid-template-columns: 1fr auto;
                 align-items: center;
             }
-            
+
             input {
                 padding: 8px 10px;
                 border: 1px solid #ddd;
                 border-radius: 3px;
             }
-            
+
             button {
                 padding: 8px 10px;
             }
-            
+
             output {
                 margin: 0;
                 padding: 0;
@@ -33,20 +33,22 @@
 
             keyboard-control {
                 grid-column: span 2;
-                
+
                 &:not([hidden]) {
                     display: block;
                 }
-                
+
                 a {
                     padding: 5px;
+
                     border: 1px solid color-mix(in lch, var(--bg, #ddd) 60%, black);
                     border-radius: 3px;
                     background: var(--bg, #ddd);
-                    
+
                     transition: background ease 0.2s;
 
                     &[active] {
+                        color: white;
                         --bg: color-mix(in lch, cyan 80%, black);
                     }
 
@@ -59,11 +61,11 @@
     </head>
 
     <body>
-        
+
         <form action="#search">
             <input type="search" name="search" value="a search term" autofocus>
             <button type="submit">Search</button>
-            
+
             <keyboard-control items="a" loop hidden>
                 <output>
                     <a href="#1">a search result</a>
@@ -77,13 +79,13 @@
         <script>
             document.querySelector("form").addEventListener("submit", (event) => {
                 event.preventDefault();
-                
+
                 let control = event.target.querySelector('keyboard-control')
-                
+
                 control.removeAttribute('hidden');
                 control.focus();
             });
-            
+
             document.querySelectorAll("a").forEach((result) => {
                 result.addEventListener("select", (event) => {
                     event.target.focus()
@@ -106,4 +108,4 @@
         </script>
     </body>
 
-</html>
+</html>
diff --git a/readme.md b/readme.md
@@ -9,7 +9,7 @@ Here's a usage example:
 ```html
 <script type="module" src="https://cdn.jsdelivr.net/gh/tobz-nz/keyboard-control/keyboard-control.js"></script>
 
-<keyboard-control items="button" selected="active" loop>
+<keyboard-control items="li a" selected="active" loop>
     <menu>
         <li><a href="#1" title="First Link">Link 1</a></li>
         <li><a href="#2" title="Second Link" active>Link 2</a></li>
@@ -22,4 +22,4 @@ And [here's a demo](https://tobz-nz.github.io/keyboard-control/index.html).
 | Attribute | Default | Description |
 | ----------|---------|------------ |
 | items     | `[keyboard-target]` | The css selector for elements to control |
-| selected  | `active` | The CSS selector for the currently selected element (only 1 element can be selected, if more than 1 is, first will be used) |
+| selected  | `active` | The CSS selector for the currently selected element (only 1 element can be selected, if more than 1 is, first will be used) |