dropdown_button2 icon indicating copy to clipboard operation
dropdown_button2 copied to clipboard

Accessibility focus lost for Screen readers,

Open Umair-Manzoor-47 opened this issue 8 months ago • 3 comments

On web builds, it is impossible to navigate the dropdown options using the arrow keys. For Windows Narrator, Focus is lost as soon I open dropdown. as for iOS Voice Over It takes repetitive tab to be pressed and still has behavioral issues. Windows Narrator:

https://github.com/user-attachments/assets/1a44ada7-61a7-42ec-83a4-3adcd09b25ec

Note: I'm pressing Up and Down keys when pressed Enter key on dropdown.

MRE:

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

void main() => runApp(AccessibleDropdownApp());

class AccessibleDropdownApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Accessible Dropdown Demo',
      home: Scaffold(
        appBar: AppBar(title: Text('Accessible Dropdown')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: AccessibleDropdown(),
        ),
      ),
    );
  }
}

class AccessibleDropdown extends StatefulWidget {
  @override
  State<AccessibleDropdown> createState() => _AccessibleDropdownState();
}

class _AccessibleDropdownState extends State<AccessibleDropdown> {
  final List<String> _items = ['Option 1', 'Option 2', 'Option 3'];
  String? _selectedItem;

  @override
  Widget build(BuildContext context) {
    return Semantics(
      child: DropdownButtonFormField2<String>(
        decoration: InputDecoration(
          labelText: 'Choose an option',
          border: OutlineInputBorder(),
        ),
        isExpanded: true,
        hint: Text('Select an option'),
        value: _selectedItem,
        items: _items.map((item) {
          return DropdownMenuItem<String>(
            value: item,
            child: Semantics(
              label: item,
              child: Text(item),
            ),
          );
        }).toList(),
        onChanged: (value) {
          setState(() {
            _selectedItem = value;
          });
        },
      ),
    );
  }
}

Umair-Manzoor-47 avatar Apr 23 '25 12:04 Umair-Manzoor-47

Can you test this with version 3.0.0-beta.22?

AhmedLSayed9 avatar Apr 23 '25 18:04 AhmedLSayed9

Great. It works. When I press enter it takes tab to focus on first popup then it goes smooth. Property value is missing from DropdownButtonFormField2. Is there any changelog I can refer to? Many Thanks

Umair-Manzoor-47 avatar Apr 23 '25 21:04 Umair-Manzoor-47

@Umair-Manzoor-47 You should use valueListenable, check the sample at README.

AhmedLSayed9 avatar Apr 23 '25 22:04 AhmedLSayed9