refactor: interaction

Author: segunadebayo

packages/react/src/providers/interaction/examples/interaction.tsx

@@ -10,7 +10,7 @@ export const InteractionModality = () => {
         {modality ?? 'none'}
       </span>
       <p className={styles.Hint}>Try clicking, pressing a key, or using a screen reader.</p>
-      <button type="button" className={styles.Button}>
+      <button type="button" className={styles.Button} data-focus-visible={modality === 'keyboard' ? '' : undefined}>
         Click or Tab to me
       </button>
     </div>

packages/react/src/providers/interaction/use-interaction-modality.ts

@@ -6,15 +6,9 @@ export type { Modality }
 
 export function useInteractionModality(): Modality | null {
   const { getRootNode } = useEnvironmentContext()
-
-  const subscribe = useCallback(
-    (onStoreChange: () => void) =>
-      trackInteractionModality({
-        root: getRootNode(),
-        onChange: onStoreChange,
-      }),
-    [getRootNode],
+  return useSyncExternalStore(
+    useCallback((onChange) => trackInteractionModality({ root: getRootNode(), onChange }), [getRootNode]),
+    getInteractionModality,
+    () => null,
   )
-
-  return useSyncExternalStore(subscribe, getInteractionModality, () => null)
 }

packages/solid/src/providers/interaction/examples/interaction.tsx

@@ -10,7 +10,7 @@ export const InteractionModality = () => {
         {modality() ?? 'none'}
       </span>
       <p class={styles.Hint}>Try clicking, pressing a key, or using a screen reader.</p>
-      <button type="button" class={styles.Button}>
+      <button type="button" class={styles.Button} data-focus-visible={modality() === 'keyboard' ? '' : undefined}>
         Click or Tab to me
       </button>
     </div>

packages/svelte/src/lib/providers/interaction/examples/interaction.svelte

@@ -9,7 +9,9 @@
     {modality() ?? 'none'}
   </span>
   <p class="hint">Try clicking, pressing a key, or using a screen reader.</p>
-  <button type="button" class="button">Click or Tab to me</button>
+  <button type="button" class="button" data-focus-visible={modality() === 'keyboard' ? '' : undefined}>
+    Click or Tab to me
+  </button>
 </div>
 
 <style>

packages/vue/src/providers/interaction/examples/interaction.vue

@@ -11,6 +11,8 @@ const modality = useInteractionModality()
       {{ modality ?? 'none' }}
     </span>
     <p :class="styles.Hint">Try clicking, pressing a key, or using a screen reader.</p>
-    <button type="button" :class="styles.Button">Click or Tab to me</button>
+    <button type="button" :class="styles.Button" :data-focus-visible="modality === 'keyboard' ? '' : undefined">
+      Click or Tab to me
+    </button>
   </div>
 </template>