Repository: flutter
Issue: [Semantics][iOS]: Focus doesn't change to `AppBar` after tapping on `NavigationBarItem` 
Labels: platform-ios,framework,f: material design,a: accessibility,has reproducible steps,found in release: 2.8,found in release: 2.9,team-design,triaged-design

My application contains a bottom bar, and I want each tab change, the focus to be on my appBar in accessible mode.
For this I have wrapped my appBar widget with a semantics widget which has the focused parameter set to true.  
Under Android it does change the focus with each change of tab but nothing happens under iOS.

### BottomBar with Semantics widgets

**Steps to Reproduce**
Using the following example app:

<details>
<summary>code sample 1</summary>

```dart
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  final List<Widget> _widgetOptions = <Widget>[
    const PageOne(),
    const PageTwo(),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

class PageOne extends StatefulWidget {
  const PageOne({
    Key? key,
  }) : super(key: key);

  @override
  _PageOneState createState() => _PageOneState();
}

class _PageOneState extends State<PageOne> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Semantics(
        focused: true,
        child: const Text('Tab 1'),
      )),
      body: const Center(
        child: Text(
          'Index 0: Home',
        ),
      ),
    );
  }
}

class PageTwo extends StatefulWidget {
  const PageTwo({
    Key? key,
  }) : super(key: key);

  @override
  _PageTwoState createState() => _PageTwoState();
}

class _PageTwoState extends State<PageTwo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Semantics(
        focused: true,
        child: const Text('Tab 2'),
      )),
      body: const Center(
        child: Text(
          'Index 1: Business',
        ),
      ),
    );
  }
}
```
</details>

1. Open the above app with voiceover enabled on an iOS device.
2. Swipe to the right to navigate to the bottom bar,
3. Select tab 2 : Business - PageTwo appears
4. Notice that the voice over focus stay on Business tab and no focus my appBar : tab 2

The same process on Android with talkback working.

### BottomBar with Focus widgets

I tried to replace semantics widgets with focus widgets and it has the same result
**Example with focus widget instead of semantics widgets** 

<details>
<summary>code sample 2</summary>

```dart
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  final List<Widget> _widgetOptions = <Widget>[
    const PageOne(),
    const PageTwo(),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

class PageOne extends StatefulWidget {
  const PageOne({
    Key? key,
  }) : super(key: key);

  @override
  _PageOneState createState() => _PageOneState();
}

class _PageOneState extends State<PageOne> {
  late FocusNode _myFocusNode;

  @override
  void initState() {
    super.initState();
    _myFocusNode = FocusNode();

    WidgetsBinding.instance?.addPostFrameCallback((_) {
      _myFocusNode.requestFocus();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Focus(
        focusNode: _myFocusNode,
        child: const Text('Tab 1'),
      )),
      body: const Center(
        child: Text(
          'Index 0: Home',
        ),
      ),
    );
  }
}

class PageTwo extends StatefulWidget {
  const PageTwo({
    Key? key,
  }) : super(key: key);

  @override
  _PageTwoState createState() => _PageTwoState();
}

class _PageTwoState extends State<PageTwo> {
  late FocusNode _myFocusNode;

  @override
  void initState() {
    super.initState();
    _myFocusNode = FocusNode();

    WidgetsBinding.instance?.addPostFrameCallback((_) {
      _myFocusNode.requestFocus();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Focus(
        focusNode: _myFocusNode,
        child: const Text('Tab 2'),
      )),
      body: const Center(
        child: Text(
          'Index 1: Business',
        ),
      ),
    );
  }
}
```
</details>

### Simple page with Focus widgets

I also reproduce this bug with a simple page with a button that changes the focus on a text. 
Not working on iOS but working on Android.

**Example with a simple page** 

<details>
<summary>code sample 3</summary>

```dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late FocusNode _myFocusNode;

  @override
  void initState() {
    super.initState();
    _myFocusNode = FocusNode();
  }

  void _changeFocus() {
    setState(() {
      _myFocusNode.requestFocus();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Focus(
                focusNode: _myFocusNode,
                child: const Text(
                  'I have the focus !',
                )),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _changeFocus,
        child: const Icon(Icons.add),
      ),
    );
  }
}
```
</details>

### Simple page with Focus widgets and textEdit

On the other hand, it works very well on iOS and Android with textEdit as on the flutter cookbook: [focus cookbook](https://docs.flutter.dev/cookbook/forms/focus)

**Flutter doctor**
```
[✓] Flutter (Channel stable, 2.8.1, on macOS 11.6 20G165 darwin-x64, locale fr-FR)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.2)
[✓] VS Code (version 1.63.2)
[✓] Connected device (4 available)

• No issues found!
```