Skip to content

[web:a11y] MediaQuery.accessibleNavigation is not updating when a11y is enabled #134980

@jiahaog

Description

@jiahaog

Internal bug: b/300777172

MediaQueryData.accessibleNavigation should update if the accessibility state changes.

This is working on Android/iOS but seems to not work on Web, despite #67571 being closed.

Minimal Repro

For this, a button is provided for enabling a11y easily, but the normal user flow would be to use a screen reader to activate the hidden "Enable accessibility" button on a Flutter webpage)

Code sample
import 'package:flutter/material.dart';
import 'package:flutter/semantics.dart';

void main() => runApp(const MaterialApp(home: MyHomePage()));

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final accessibleNavigation = MediaQuery.of(context).accessibleNavigation;
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                SemanticsBinding.instance.ensureSemantics();
              },
              child: const Text('Enable a11y'),
            ),
            const SizedBox(height: 24),
            ElevatedButton(
              onPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(
                    content: const Text('Should stay visible'),
                    action: SnackBarAction(label: 'Action', onPressed: () {}),
                  ),
                );
              },
              child: const Text('Show snackbar'),
            ),
            const SizedBox(height: 24),
            Text('accessibleNavigation: $accessibleNavigation'),
          ],
        ),
      ),
    );
  }
}

Expected behavior: after enabling a11y, snackbars w/ actions should no longer auto-dismiss

Actual behavior: MediaQueryData.accessibleNavigation was still false, so the snackbar auto-dismisses. However, resizing the viewport, for whatever reason, does cause the MediaQueryData.accessibleNavigation value to update to true, and then the correct SnackBar behavior is observed afterward.

Video: accessible navigation.webm

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: accessibilityAccessibility, e.g. VoiceOver or TalkBack. (aka a11y)customer: huggsy (g3)platform-webWeb applications specificallyteam-webOwned by Web platform teamtriaged-webTriaged by Web platform team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions