ui: make spectator accessed via tab

moby-it · Mar 13, 2024 · 35c18bd · 35c18bd
1 parent a3c90fa
commit 35c18bd
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 6 deletions.
diff --git a/ui/src/components/card/votingCard.tsx b/ui/src/components/card/votingCard.tsx
@@ -7,7 +7,7 @@ export const VotingCard: Component<{
 }> = (_props) => {
   const props = mergeProps({ selected: false }, _props);
   return (
-    <div
+    <button
       classList={{ "voting-card": true, selected: props.selected }}
       data-testid={`voting-card-${props.points}`}
       onClick={props.action}
@@ -20,6 +20,6 @@ export const VotingCard: Component<{
           <img src={`/cup-small-${props.selected ? "white" : "black"}.svg`} />
         </Match>
       </Switch>
-    </div>
+    </button>
   );
 };
diff --git a/ui/src/components/toggle/toggle.css b/ui/src/components/toggle/toggle.css
@@ -14,10 +14,13 @@
 /* Hide default HTML checkbox */
 .switch input {
   opacity: 0;
-  width: 0;
-  height: 0;
+  width: 10px;
+  height: 10px;
 }
 
+.switch:has(input:focus) {
+  outline: 2px solid black;
+}
 /* The slider */
 .slider {
   position: absolute;

diff --git a/ui/src/components/toggle/toggle.tsx b/ui/src/components/toggle/toggle.tsx
@@ -15,7 +15,7 @@ export const Toggle: Component<{
   return (
     <div class="toggle-container">
       <label for={props.name}>{props.label}</label>
-      <label class="switch">
+      <label class="switch" >
         <input
           disabled={props.disabled}
           name={props.name}

diff --git a/ui/src/pages/room/room.tsx b/ui/src/pages/room/room.tsx
@@ -82,7 +82,6 @@ const Room: Component = () => {
   });
   createEffect(() => {
     if (roomEl()) {
-      console.log('to register esc event lsitener')
       window.addEventListener('keyup', (e: KeyboardEvent) => {
         if (e.key === 'Escape' && revealing()) {
           cancelReveal(socket())();

diff --git a/ui/src/pages/room/subheader.tsx b/ui/src/pages/room/subheader.tsx
@@ -9,6 +9,7 @@ export const RoomSubheader: Component = () => {
   return (
     <div class="room-subheader">
       <span
+        tabindex="0"
         class="primary cursor-pointer"
         onClick={() => {
           navigator.clipboard.writeText(location.href);

diff --git a/ui/src/styles/input.css b/ui/src/styles/input.css
@@ -1,3 +1,7 @@
 input {
   height: 48px;
+  &:focus {
+    outline: 2px solid black;
+  }
 }
+