Marks the flutter views as focusable.

When a given flutter view is focused its tabindex will be -1
When a given flutter view is not focused its tabindex will be 0

lib/web_ui/lib/src/engine/platform_dispatcher.dart

@@ -79,7 +79,7 @@ class EnginePlatformDispatcher extends ui.PlatformDispatcher {
     _addLocaleChangedListener();
     registerHotRestartListener(dispose);
     AppLifecycleState.instance.addListener(_setAppLifecycleState);
-    ViewFocusBinding.instance.addListener(invokeOnViewFocusChange);
+    _viewFocusBinding.init();
     domDocument.body?.append(accessibilityPlaceholder);
     _onViewDisposedListener = viewManager.onViewDisposed.listen((_) {
       // Send a metrics changed event to the framework when a view is disposed.
@@ -123,7 +123,7 @@ class EnginePlatformDispatcher extends ui.PlatformDispatcher {
     _removeLocaleChangedListener();
     HighContrastSupport.instance.removeListener(_updateHighContrast);
     AppLifecycleState.instance.removeListener(_setAppLifecycleState);
-    ViewFocusBinding.instance.removeListener(invokeOnViewFocusChange);
+    _viewFocusBinding.dispose();
     accessibilityPlaceholder.remove();
     _onViewDisposedListener.cancel();
     viewManager.dispose();
@@ -228,6 +228,11 @@ class EnginePlatformDispatcher extends ui.PlatformDispatcher {
     }
   }
 
+  late final ViewFocusBinding _viewFocusBinding = ViewFocusBinding(
+    viewManager: viewManager,
+    onViewFocusChange: invokeOnViewFocusChange,
+  );
+
   @override
   ui.ViewFocusChangeCallback? get onViewFocusChange => _onViewFocusChange;
   ui.ViewFocusChangeCallback? _onViewFocusChange;

lib/web_ui/lib/src/engine/platform_dispatcher/view_focus_binding.dart

@@ -2,47 +2,41 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'dart:async';
 import 'package:ui/src/engine.dart';
 import 'package:ui/ui.dart' as ui;
 
 /// Tracks the [FlutterView]s focus changes.
 final class ViewFocusBinding {
   /// Creates a [ViewFocusBinding] instance.
-  ViewFocusBinding._();
+  ViewFocusBinding({
+    required FlutterViewManager viewManager,
+    required ui.ViewFocusChangeCallback onViewFocusChange,
+  }):
+    _viewManager = viewManager,
+    _onViewFocusChange = onViewFocusChange;
 
-  /// The [ViewFocusBinding] singleton.
-  static final ViewFocusBinding instance = ViewFocusBinding._();
+  final FlutterViewManager _viewManager;
+  final ui.ViewFocusChangeCallback _onViewFocusChange;
 
-  final List<ui.ViewFocusChangeCallback> _listeners = <ui.ViewFocusChangeCallback>[];
   int? _lastViewId;
   ui.ViewFocusDirection _viewFocusDirection = ui.ViewFocusDirection.forward;
+  StreamSubscription<int>? _onViewCreatedListener;
 
-  /// Subscribes the [listener] to [ui.ViewFocusEvent] events.
-  void addListener(ui.ViewFocusChangeCallback listener) {
-    if (_listeners.isEmpty) {
-      domDocument.body?.addEventListener(_keyDown, _handleKeyDown);
-      domDocument.body?.addEventListener(_keyUp, _handleKeyUp);
-      domDocument.body?.addEventListener(_focusin, _handleFocusin);
-      domDocument.body?.addEventListener(_focusout, _handleFocusout);
-    }
-    _listeners.add(listener);
-  }
-
-  /// Removes the [listener] from the [ui.ViewFocusEvent] events subscription.
-  void removeListener(ui.ViewFocusChangeCallback listener) {
-    _listeners.remove(listener);
-    if (_listeners.isEmpty) {
-      domDocument.body?.removeEventListener(_keyDown, _handleKeyDown);
-      domDocument.body?.removeEventListener(_keyUp, _handleKeyUp);
-      domDocument.body?.removeEventListener(_focusin, _handleFocusin);
-      domDocument.body?.removeEventListener(_focusout, _handleFocusout);
-    }
+  void init() {
+    domDocument.body?.addEventListener(_keyDown, _handleKeyDown);
+    domDocument.body?.addEventListener(_keyUp, _handleKeyUp);
+    domDocument.body?.addEventListener(_focusin, _handleFocusin);
+    domDocument.body?.addEventListener(_focusout, _handleFocusout);
+    _onViewCreatedListener = _viewManager.onViewCreated.listen(_markViewAsFocusable);
   }
 
-  void _notify(ui.ViewFocusEvent event) {
-    for (final ui.ViewFocusChangeCallback listener in _listeners) {
-      listener(event);
-    }
+  void dispose() {
+    domDocument.body?.removeEventListener(_keyDown, _handleKeyDown);
+    domDocument.body?.removeEventListener(_keyUp, _handleKeyUp);
+    domDocument.body?.removeEventListener(_focusin, _handleFocusin);
+    domDocument.body?.removeEventListener(_focusout, _handleFocusout);
+    _onViewCreatedListener?.cancel();
   }
 
   late final DomEventListener _handleFocusin = createDomEventListener((DomEvent event) {
@@ -67,36 +61,57 @@ final class ViewFocusBinding {
   });
 
   void _handleFocusChange(DomElement? focusedElement) {
+    final int? lastViewId = _lastViewId;
     final int? viewId = _viewId(focusedElement);
-    if (viewId == _lastViewId) {
+    if (viewId == lastViewId) {
       return;
     }
+
     final ui.ViewFocusEvent event;
-    if (viewId == null) {
-      event = ui.ViewFocusEvent(
-        viewId: _lastViewId!,
-        state: ui.ViewFocusState.unfocused,
-        direction: ui.ViewFocusDirection.undefined,
-      );
-    } else {
+    if (viewId != null) {
       event = ui.ViewFocusEvent(
         viewId: viewId,
         state: ui.ViewFocusState.focused,
         direction: _viewFocusDirection,
       );
+    } else {
+      event = ui.ViewFocusEvent(
+        viewId: lastViewId!,
+        state: ui.ViewFocusState.unfocused,
+        direction: ui.ViewFocusDirection.undefined,
+      );
     }
     _lastViewId = viewId;
-    _notify(event);
+    _markViewAsFocusable(lastViewId);
+    _markViewAsFocusable(viewId, reachableByKeyboard: false);
+    _onViewFocusChange(event);
   }
 
-  static int? _viewId(DomElement? element) {
-    final DomElement? viewElement = element?.closest(
-      DomManager.flutterViewTagName,
-    );
-    final String? viewIdAttribute = viewElement?.getAttribute(
-      GlobalHtmlAttributes.flutterViewIdAttributeName,
-    );
-    return viewIdAttribute == null ? null : int.tryParse(viewIdAttribute);
+  int? _viewId(DomElement? element) {
+    final DomElement? viewElement = element?.closest(DomManager.flutterViewTagName);
+    for (final EngineFlutterView view in _viewManager.views) {
+      if (view.dom.rootElement == viewElement) {
+        return view.viewId;
+      }
+    }
+    return null;
+  }
+
+  void _markViewAsFocusable(
+    int? viewId, {
+    bool reachableByKeyboard = true,
+  }) {
+    if (viewId == null) {
+      return;
+    }
+    // A tabindex with value zero means the DOM element can be reached by using
+    // the keyboard (tab, shift + tab). When its value is -1 it is still focusable
+    // but can't be focused by the result of keyboard events This is specially
+    // important when the semantics tree is enabled as it puts DOM nodes inside
+    // the flutter view and having it with a zero tabindex messes the focus
+    // traversal order when pressing tab or shift tab.
+    final int tabIndex = reachableByKeyboard ? 0 : -1;
+    _viewManager[viewId]?.dom.rootElement.setAttribute('tabindex', tabIndex);
   }
 
   static const String _focusin = 'focusin';

lib/web_ui/lib/src/engine/view_embedder/style_manager.dart

@@ -116,6 +116,11 @@ void applyGlobalCssRulesToSheet(
     // Hide placeholder text
     '$cssSelectorPrefix .flt-text-editing::placeholder {'
     '  opacity: 0;'
+    '}'
+
+    // Hide outline when the flutter-view root element is focused.
+    '$cssSelectorPrefix:focus {'
+    ' outline: none;'
     '}',
   );