focusgroup attribute: test/demo and README.md update. (#47)

ai · Oct 30, 2024 · 084673b · 084673b
1 parent fc209be
commit 084673b
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -410,7 +410,31 @@ startKeyUX(window, [
   focusGroupKeyUX()
 ])
 ```
+### Focusgroup attribute
 
+```html
+<div focusgroup>
+  <button type="button">Copy</button>
+  <button type="button">Paste</button>
+  <button type="button">Cut</button>
+</div>
+```
+
+```html
+<div focusgroup="inline">
+  <button type="button">Mac</button>
+  <button type="button">Windows</button>
+  <button type="button">Linux</button>
+</div>
+```
+
+```html
+<div focusgroup="block">
+  <button type="button">Dog</button>
+  <button type="button">Cat</button>
+  <button type="button">Turtle</button>
+</div>
+```
 
 ## Focus Jumps
 

diff --git a/test/demo/index.html b/test/demo/index.html
@@ -131,13 +131,19 @@
         border: 1px solid #aaa;
         padding: 0.5em 1em;
         background: #eee;
-      }
-      .focusgroup button:not(:last-child) {
-        margin-right: 1em;
-      }
-      .focusgroup[focusgroup='block'] button {
-        display: block;
-        margin-bottom: 1em;
+
+        &[focusgroup='block'] button {
+          display: block;
+          margin-bottom: 1em;
+        }
+
+        button {
+          background-color: white;
+        }
+
+        button:not(:last-child) {
+          margin-right: 1em;
+        }
       }
       .toolbar {
         margin-top: 1em;

diff --git a/test/demo/index.tsx b/test/demo/index.tsx
@@ -390,9 +390,9 @@ const FocusGroup: FC = () => {
         focusgroup={''}
         tabIndex={0}
       >
-        <button role="button" tabIndex={-1}>Red</button>
-        <button role="button" tabIndex={-1}>Yellow</button>
-        <button role="button" tabIndex={-1}>Green</button>
+        <button type="button">Red</button>
+        <button type="button">Yellow</button>
+        <button type="button">Green</button>
       </div>
     </>
   )
@@ -407,9 +407,9 @@ const FocusGroupInline: FC = () => {
         focusgroup="inline"
         tabIndex={0}
       >
-        <button role="button" tabIndex={-1}>Mac</button>
-        <button role="button" tabIndex={-1}>Windows</button>
-        <button role="button" tabIndex={-1}>Linux</button>
+        <button type="button">Mac</button>
+        <button type="button">Windows</button>
+        <button type="button">Linux</button>
       </div>
     </>
   )
@@ -424,9 +424,9 @@ const FocusGroupBlock: FC = () => {
         focusgroup="block"
         tabIndex={0}
       >
-        <button role="button" tabIndex={-1}>Dog</button>
-        <button role="button" tabIndex={-1}>Cat</button>
-        <button role="button" tabIndex={-1}>Turtle</button>
+        <button type="button">Dog</button>
+        <button type="button">Cat</button>
+        <button type="button">Turtle</button>
       </div>
     </>
   )