What Makes a Button Focusable?

[Losses]

Hello everyone,

I've encountered an issue where my program is unresponsive to Tab focusing, which is a significant accessibility (A11Y) concern. I'm trying to address it, but it's more complex than I initially thought.

I'm specifically unsure about the prerequisites for an element to be focusable in the fluent_ui library. I've done some debugging with the example project in the repository.

For example, when I return a component early in the ShellRoute's builder parameter within the GoRouter's routes like this:

return Center(
  child: SizedBox(
    width: 100,
    height: 100,
    child: Button(
      child: Text("Hello"),
      onPressed: () {},
    ),
  ),
);

Looks like this:

final router = GoRouter(navigatorKey: rootNavigatorKey, routes: [
  ShellRoute(
    navigatorKey: _shellNavigatorKey,
    builder: (context, state, child) {
      return Center(
        child: SizedBox(
          width: 100,
          height: 100,
          child: Button(
            child: Text("Hello"),
            onPressed: () {},
          ),
        ),
      );

      return MyHomePage(
        shellContext: _shellNavigatorKey.currentContext,
        child: child,
      );
    },
...

The button can be tab-focused. However, if I insert the same code at the beginning of the FluentApp.router's build function, the button cannot be focused, like this:

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider.value(
      value: _appTheme,
      builder: (context, child) {
        final appTheme = context.watch<AppTheme>();
        return FluentApp.router(
          ...
          builder: (context, child) {
            return Center(
              child: SizedBox(
                width: 100,
                height: 100,
                child: Button(
                  child: Text("Hello"),
                  onPressed: () {},
                ),
              ),
            );

            return Directionality(
              textDirection: appTheme.textDirection,
              child: NavigationPaneTheme(
                data: NavigationPaneThemeData(
                  backgroundColor: appTheme.windowEffect !=
                          flutter_acrylic.WindowEffect.disabled
                      ? Colors.transparent
                      : null,
                ),
                child: child!,
              ),
            );
          },
          ...
        );
      },
    );
  }
}

I'm unclear about what happens during the component construction process that affects focusability. Could anyone provide insights into this?

Thank you very much for your help!

[bdlukaa]

The button is still receiving focus on the second case, but it is not being displayed given to the lack of the fluent theme above it, no?

It is hard to tell without deeper investiagtion.

[Losses]

After a very lengthy study, I have come to some conclusions: The FluentApp.router API internally calls WidgetApp, which effectively binds all the default shortcuts. Therefore, if your components are not within FluentApp.router, they will not respond to any shortcuts, including focus with Tab key. However, there is an important point to note: both WidgetApp and FluentApp have an parameter called shortcuts. If a developer passes parameters here, all default shortcut behaviors will be replaced. This includes Tab switching focus and switching focus with arrow keys. This part of the implementation is quite obscure, and developers should be constantly aware of it.