Accessibility focus lost for Screen readers, #379
Description
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:
Accessibility.mp4
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;
});
},
),
);
}
}