fix/components keyboard accessibility

nank1ro · May 13, 2024 · 1aaa51c · 1aaa51c
1 parent d3fdd7b
commit 1aaa51c
Show file tree

Hide file tree

Showing 6 changed files with 387 additions and 366 deletions.
diff --git a/example/lib/pages/button.dart b/example/lib/pages/button.dart
@@ -13,147 +13,120 @@ class ButtonPage extends StatefulWidget {
 }
 
 class _ButtonPageState extends State<ButtonPage> {
-  final focusNode = FocusNode();
   var size = ShadButtonSize.regular;
   var enabled = true;
 
-  @override
-  void dispose() {
-    focusNode.dispose();
-    super.dispose();
-  }
-
   @override
   Widget build(BuildContext context) {
-    return BaseScaffold(
-      appBarTitle: 'Button',
-      editable: [
-        MyEnumProperty(
-          label: 'Size',
-          value: size,
-          values: ShadButtonSize.values,
-          onChanged: (value) => setState(() => size = value),
-        ),
-        MyBoolProperty(
-          label: 'Enabled',
-          value: enabled,
-          onChanged: (value) => setState(() => enabled = value),
-        ),
-        MyBoolProperty(
-          label: 'Focused',
-          value: focusNode.hasFocus,
-          onChanged: enabled
-              ? (value) {
-                  setState(() {
-                    if (value) {
-                      focusNode.requestFocus();
-                    } else {
-                      focusNode.unfocus();
-                    }
-                  });
-                }
-              : null,
-        ),
-      ],
-      children: [
-        if (size != ShadButtonSize.icon) ...[
-          ShadButton(
-            focusNode: focusNode,
-            size: size,
-            enabled: enabled,
-            text: const Text('Primary'),
-          ),
-          ShadButton.secondary(
-            focusNode: focusNode,
-            size: size,
-            enabled: enabled,
-            text: const Text('Secondary'),
-          ),
-          ShadButton.destructive(
-            focusNode: focusNode,
-            size: size,
-            enabled: enabled,
-            text: const Text('Destructive'),
-          ),
-          ShadButton.outline(
-            focusNode: focusNode,
-            size: size,
-            enabled: enabled,
-            text: const Text('Outline'),
+    return FocusTraversalGroup(
+      policy: WidgetOrderTraversalPolicy(),
+      child: BaseScaffold(
+        appBarTitle: 'Button',
+        editable: [
+          MyEnumProperty(
+            label: 'Size',
+            value: size,
+            values: ShadButtonSize.values,
+            onChanged: (value) => setState(() => size = value),
           ),
-          ShadButton.ghost(
-            focusNode: focusNode,
-            size: size,
-            enabled: enabled,
-            text: const Text('Ghost'),
+          MyBoolProperty(
+            label: 'Enabled',
+            value: enabled,
+            onChanged: (value) => setState(() => enabled = value),
           ),
-          ShadButton.link(
-            focusNode: focusNode,
-            size: size,
-            enabled: enabled,
-            text: const Text('Link'),
-          ),
-          ShadButton(
-            focusNode: focusNode,
-            size: size,
-            enabled: enabled,
-            text: const Text('Login with Email'),
-            icon: const Padding(
-              padding: EdgeInsets.only(right: 8),
-              child: Icon(
-                Icons.mail_outlined,
-                size: 16,
-              ),
+        ],
+        children: [
+          if (size != ShadButtonSize.icon) ...[
+            ShadButton(
+              size: size,
+              enabled: enabled,
+              text: const Text('Primary'),
+              onPressed: () => print('Primary'),
             ),
-          ),
-          ShadButton(
-            focusNode: focusNode,
-            size: size,
-            enabled: enabled,
-            text: const Text('Please wait'),
-            icon: const Padding(
-              padding: EdgeInsets.only(right: 8),
-              child: SizedBox.square(
-                dimension: 16,
-                child: CircularProgressIndicator(
-                  strokeWidth: 2,
+            ShadButton.secondary(
+              size: size,
+              enabled: enabled,
+              text: const Text('Secondary'),
+              onPressed: () => print('Secondary'),
+            ),
+            ShadButton.destructive(
+              size: size,
+              enabled: enabled,
+              text: const Text('Destructive'),
+            ),
+            ShadButton.outline(
+              size: size,
+              enabled: enabled,
+              text: const Text('Outline'),
+            ),
+            ShadButton.ghost(
+              size: size,
+              enabled: enabled,
+              text: const Text('Ghost'),
+            ),
+            ShadButton.link(
+              size: size,
+              enabled: enabled,
+              text: const Text('Link'),
+            ),
+            ShadButton(
+              size: size,
+              enabled: enabled,
+              text: const Text('Login with Email'),
+              icon: const Padding(
+                padding: EdgeInsets.only(right: 8),
+                child: Icon(
+                  Icons.mail_outlined,
+                  size: 16,
                 ),
               ),
             ),
-          ),
-          ShadButton(
-            focusNode: focusNode,
-            size: size,
-            enabled: enabled,
-            gradient: const LinearGradient(colors: [
-              Colors.cyan,
-              Colors.indigo,
-            ]),
-            shadows: [
-              BoxShadow(
-                color: Colors.blue.withOpacity(.4),
-                spreadRadius: 4,
-                blurRadius: 10,
-                offset: const Offset(0, 2),
+            ShadButton(
+              size: size,
+              enabled: enabled,
+              text: const Text('Please wait'),
+              icon: const Padding(
+                padding: EdgeInsets.only(right: 8),
+                child: SizedBox.square(
+                  dimension: 16,
+                  child: CircularProgressIndicator(
+                    strokeWidth: 2,
+                  ),
+                ),
               ),
-            ],
-            text: const Text('Gradient with Shadow'),
-          ),
-        ],
-        if (size == ShadButtonSize.icon)
-          ComponentView(
-            label: 'Icon',
-            child: ShadButton.outline(
-              focusNode: focusNode,
+            ),
+            ShadButton(
               size: size,
               enabled: enabled,
-              icon: const Icon(
-                Icons.chevron_right,
-                size: 16,
+              gradient: const LinearGradient(colors: [
+                Colors.cyan,
+                Colors.indigo,
+              ]),
+              shadows: [
+                BoxShadow(
+                  color: Colors.blue.withOpacity(.4),
+                  spreadRadius: 4,
+                  blurRadius: 10,
+                  offset: const Offset(0, 2),
+                ),
+              ],
+              text: const Text('Gradient with Shadow'),
+            ),
+          ],
+          if (size == ShadButtonSize.icon)
+            ComponentView(
+              label: 'Icon',
+              child: ShadButton.outline(
+                size: size,
+                enabled: enabled,
+                icon: const Icon(
+                  Icons.chevron_right,
+                  size: 16,
+                ),
               ),
             ),
-          ),
-      ],
+        ],
+      ),
     );
   }
 }