Web Accessibility - Unable to move forward/backward via keyboard post selecting any radio option

Is there an existing issue for this?

I have searched the existing issues
I have read the guide to filing a bug

Steps to reproduce

Link to the code sample - https://github.com/mfdcoder/flutter-form-voiceover/tree/staging
Run the sample app

Expected results

After selecting any radio option, the user should be able to navigate to the next/previous element.

Actual results

After selecting any radio option, the user is unable to navigate to the next/previous elements.

Code sample

https://github.com/mfdcoder/flutter-form-voiceover/tree/staging

Screenshots or Video

Screenshots / Video demonstration

Radio.Button.Navigation.Issue.mov

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.7.12, on macOS 13.2.1 22D68 darwin-x64, locale
    en-IN)
[✓] Android toolchain - develop for Android devices (Android SDK version
    33.0.0-rc1)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.2)
[✓] VS Code (version 1.78.2)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

• No issues found!

@aakashawalkar

Hi @aakashawalkar
I'm not quite familiar with NVDA, can you please share the detailed steps with shortcut keys so that I can try this on my end?

This is the single sample code (extracted from your project):

Sample code

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: MyApp()));
}

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

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: MyRadioDialog(),
      ),
    );
  }
}

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

  @override
  State<MyRadioDialog> createState() => _MyRadioDialogState();
}

class _MyRadioDialogState extends State<MyRadioDialog> {
  int myValue = 1;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 30),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            'Radio Button',
            style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700),
          ),
          const Text(
            'When NVDA screen reader in enabled on Windows, user is no longer able to move next element or previous element with NVDA commands via keyboard keys',
          ),
          const SizedBox(height: 20),
          ElevatedButton(
            onPressed: () async {
              await showDialog(
                context: context,
                barrierDismissible: false,
                builder: (dialogContext) {
                  return StatefulBuilder(
                      builder: (BuildContext context, StateSetter setState) {
                        return AlertDialog(
                          insetPadding: const EdgeInsets.symmetric(
                            horizontal: 20,
                            vertical: 50,
                          ),
                          title: Semantics(
                            explicitChildNodes: true,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Flexible(
                                  child: Text(
                                    'Hello there!',
                                    style: Theme.of(context).textTheme.titleLarge,
                                  ),
                                ),
                                Align(
                                  alignment: Alignment.topRight,
                                  child: IconButton(
                                    onPressed: () => Navigator.pop(context),
                                    icon: const Icon(Icons.close),
                                  ),
                                ),
                              ],
                            ),
                          ),
                          content: Column(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              const Divider(),
                              RadioListTile(
                                dense: true,
                                value: 1,
                                groupValue: myValue,
                                onChanged: (int? i) {
                                  myValue = 1;

                                  setState(() {});
                                },
                                title: const Text('Yes'),
                                contentPadding: kIsWeb
                                    ? const EdgeInsets.symmetric(vertical: 3)
                                    : EdgeInsets.zero,
                                visualDensity: const VisualDensity(
                                  horizontal: -4.0,
                                  vertical: -3.0,
                                ),
                              ),
                              RadioListTile(
                                dense: true,
                                value: 2,
                                groupValue: myValue,
                                onChanged: (int? i) {
                                  myValue = 2;
                                  setState(() {});
                                },
                                title: const Text('No'),
                                contentPadding: kIsWeb
                                    ? const EdgeInsets.symmetric(vertical: 3)
                                    : EdgeInsets.zero,
                                visualDensity: const VisualDensity(
                                  horizontal: -4.0,
                                  vertical: -3.0,
                                ),
                              ),
                              RadioListTile(
                                dense: true,
                                value: 3,
                                groupValue: myValue,
                                onChanged: (int? i) {
                                  myValue = 3;
                                  setState(() {});
                                },
                                title: const Text('None of Above'),
                                contentPadding: kIsWeb
                                    ? const EdgeInsets.symmetric(vertical: 3)
                                    : EdgeInsets.zero,
                                visualDensity: const VisualDensity(
                                  horizontal: -4.0,
                                  vertical: -3.0,
                                ),
                              ),
                            ],
                          ),
                        );
                      });
                },
              );
            },
            child: const Text('Open Radio Button Dialog'),
          ),
        ],
      ),
    );
  }
}

Also, please retry on the latest Flutter channels to see if the issue still persists or not. Thank you!

Steps:

Run sample code
Turn ON the NVDA screen reader
Navigate to the Radio Button Dialog button via the keyboard using NVDA commands

NVDA Commands:
To navigate to the next element: Arrow Down Key
To navigate to the previous element: Arrow Up Key
To select: Space Key

I tried this on the latest stable Flutter release and this issue is still reproducible.

Thanks. From my end, arrow keys don't work but Tab key does. And I can see it can move between radio tiles.

Demo video

bandicam.2023-05-17.11-36-08-044.mp4

Checking with NVDA key commands here, using Tab key seems to be right key for this.
Please try it and confirm if it also works for you.

Thanks for confirming.
It works with the Tab & Shift + Tab keys. But, as we are using arrow keys throughout the app to navigate between the elements on the screen we want this to work with arrow keys as well.

I have just compared this with html radio buttons and see it can be traveled by arrow keys while Flutter Web can not (it only work with Tab key).

Also, I haven't seen an existing issue with radio buttons traversal by arrow keys. Even so, it actually was mentioned one time before at #113562 (comment), but it's a desktop issue and not similar to this (it's about checked state of radio button).

So, I would like to summarize this issue:

Can not navigate to next radio button by arrow keys (same as you mentioned above)
Since the radio button can not be focused, accessibility won't work
This issue occurs on Web platform while it works normally on desktop (verified on Windows and macOS)

Labeling the issue for more insights. Thanks!

Demo video (comparing with html radio buttons)

bandicam.2023-05-17.16-27-46-696.mp4

Minimal sample code

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: MyApp()));
}

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

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: MyRadioDialog(),
      ),
    );
  }
}

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

  @override
  State<MyRadioDialog> createState() => _MyRadioDialogState();
}

class _MyRadioDialogState extends State<MyRadioDialog> {
  int myValue = 1;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        RadioListTile(
          dense: true,
          value: 1,
          groupValue: myValue,
          onChanged: (int? i) {
            myValue = 1;
            setState(() {});
          },
          title: const Text('Yes'),
          contentPadding: kIsWeb
              ? const EdgeInsets.symmetric(vertical: 3)
              : EdgeInsets.zero,
          visualDensity: const VisualDensity(
            horizontal: -4.0,
            vertical: -3.0,
          ),
        ),
        RadioListTile(
          dense: true,
          value: 2,
          groupValue: myValue,
          onChanged: (int? i) {
            myValue = 2;
            setState(() {});
          },
          title: const Text('No'),
          contentPadding: kIsWeb
              ? const EdgeInsets.symmetric(vertical: 3)
              : EdgeInsets.zero,
          visualDensity: const VisualDensity(
            horizontal: -4.0,
            vertical: -3.0,
          ),
        ),
        RadioListTile(
          dense: true,
          value: 3,
          groupValue: myValue,
          onChanged: (int? i) {
            myValue = 3;
            setState(() {});
          },
          title: const Text('None of Above'),
          contentPadding: kIsWeb
              ? const EdgeInsets.symmetric(vertical: 3)
              : EdgeInsets.zero,
          visualDensity: const VisualDensity(
            horizontal: -4.0,
            vertical: -3.0,
          ),
        ),
      ],
    );
  }
}

flutter doctor -v (stable & master)

[√] Flutter (Channel stable, 3.10.0, on Microsoft Windows [Version 10.0.19045.2846], locale en-US)
    • Flutter version 3.10.0 on channel stable at C:\WIP\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 84a1e904f4 (3 days ago), 2023-05-09 07:41:44 -0700
    • Engine revision d44b5a94c9
    • Dart version 3.0.0
    • DevTools version 2.23.1

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at C:\AndroidSDK
    • Platform android-33, build-tools 33.0.0
    • ANDROID_HOME = C:\AndroidSDK
    • Java binary at: C:\Program Files\Android\Android Studio Electric Eel 2022.1.1\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.4.4)
    • Visual Studio at D:\DOWNLOADWORK\VS2022
    • Visual Studio Community 2022 version 17.4.33213.308
    • Windows 10 SDK version 10.0.19041.0

[√] Android Studio (version 2021.2)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+7-b1504.28-7817840)

[√] Android Studio (version 2022.1)
    • Android Studio at C:\Program Files\Android\Android Studio Electric Eel 2022.1.1
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)

[√] VS Code (version 1.78.1)
    • VS Code at C:\Users\ADMIN\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.62.0

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.19045.2846]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 112.0.5615.140
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 113.0.1774.35

[√] Network resources
    • All expected network resources are available.

• No issues found!

[!] Flutter (Channel master, 3.11.0-6.0.pre.86, on Microsoft Windows [Version 10.0.19045.2965], locale en-US)
    • Flutter version 3.11.0-6.0.pre.86 on channel master at C:\WIP\flutter_master
    ! Warning: `flutter` on your path resolves to C:\WIP\flutter\bin\flutter, which is not inside your current
      Flutter SDK checkout at C:\WIP\flutter_master. Consider adding C:\WIP\flutter_master\bin to the front of your
      path.
    ! Warning: `dart` on your path resolves to C:\WIP\flutter\bin\dart, which is not inside your current Flutter SDK
      checkout at C:\WIP\flutter_master. Consider adding C:\WIP\flutter_master\bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ea5eddb5a9 (3 hours ago), 2023-05-15 21:39:26 -0700
    • Engine revision c4d4b40c65
    • Dart version 3.1.0 (build 3.1.0-113.0.dev)
    • DevTools version 2.23.1
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git"
      directly to perform update checks and upgrades.

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at C:\AndroidSDK
    • Platform android-33, build-tools 33.0.0
    • ANDROID_HOME = C:\AndroidSDK
    • Java binary at: C:\Program Files\Android\Android Studio Electric Eel 2022.1.1\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.4.4)
    • Visual Studio at D:\DOWNLOADWORK\VS2022
    • Visual Studio Community 2022 version 17.4.33213.308
    • Windows 10 SDK version 10.0.19041.0

[√] Android Studio (version 2021.2)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+7-b1504.28-7817840)

[√] Android Studio (version 2022.1)
    • Android Studio at C:\Program Files\Android\Android Studio Electric Eel 2022.1.1
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)

[√] VS Code (version 1.78.2)
    • VS Code at C:\Users\ADMIN\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.64.0

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.19045.2965]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 113.0.5672.93
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 113.0.1774.42

[√] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

@yjbanov

This issue is assigned to @yjbanov but has had no recent status updates. Please consider unassigning this issue if it is not going to be addressed in the near future. This allows people to have a clearer picture of what work is actually planned. Thanks!

@yjbanov

This issue is assigned to @yjbanov but has had no recent status updates. Please consider unassigning this issue if it is not going to be addressed in the near future. This allows people to have a clearer picture of what work is actually planned. Thanks!

@yjbanov

This issue is assigned to @yjbanov but has had no recent status updates. Please consider unassigning this issue if it is not going to be addressed in the near future. This allows people to have a clearer picture of what work is actually planned. Thanks!

@yjbanov

This issue was assigned to @yjbanov but has had no status updates in a long time. To remove any ambiguity about whether the issue is being worked on, the assignee was removed.

I just tested the on the current master version of Flutter. I am able to traverse the UI in both the browse mode and in the focus mode using NVDA. Note that when entering the focus mode (a.k.a. forms mode; the focus ring changes to blue, like in the recording), the expectation is that you navigate the UI using the Tab key (or Shift + Tab to go backwards). In order to continue navigating the UI using the browse mode shortcuts (e.g. the arrow keys), you have to exit the focus mode using Insert + Spacebar (or if Insert is missing, Caps Lock).

More information about NVDA's navigation modes is available here: https://www.unimelb.edu.au/accessibility/tools/testing-web-pages-with-nvda

I'm guessing happened in this particular UI was that the focus was not transferred into the dialog, and a Tab was necessary to begin traversing the dialog contents. However, when you press Tab NVDA will automatically switch you into focus mode, preventing arrow key navigation. I recently implemented autofocus for routes (including dialogs), which should automatically transfer focus into the dialog, removing the need to use the Tab key to begin UI traversal, so arrow navigation should work now without needing to switch modes.

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

Web Accessibility - Unable to move forward/backward via keyboard post selecting any radio option #126805

Is there an existing issue for this?

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

9 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Web Accessibility - Unable to move forward/backward via keyboard post selecting any radio option #126805

Description

Is there an existing issue for this?

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Activity

huycozy commented on May 15, 2023

aakashawalkar commented on May 16, 2023

huycozy commented on May 17, 2023

aakashawalkar commented on May 17, 2023

huycozy commented on May 17, 2023

9 remaining items

flutter-triage-bot commented on Oct 5, 2023

flutter-triage-bot commented on Oct 6, 2023

flutter-triage-bot commented on Oct 6, 2023

flutter-triage-bot commented on Jan 1, 2024

yjbanov commented on Jan 4, 2024

github-actions commented on Jan 18, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions