Semantics Accessibility issues with aria-label #192618

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

void main() {
  runApp(const MyApp());
  SemanticsBinding.instance.ensureSemantics();
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Sample Form',
      theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue), useMaterial3: true),
      home: const SampleFormPage(),
    );
  }
}

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

  @override
  State<SampleFormPage> createState() => _SampleFormPageState();
}

class _SampleFormPageState extends State<SampleFormPage> {
  final _formKey = GlobalKey<FormState>();

  final _firstNameController = TextEditingController();
  final _lastNameController = TextEditingController();
  final _emailController = TextEditingController();

  String? _selectedCountry;
  String? _selectedDepartment;
  final ValueNotifier<String?> _departmentValue = ValueNotifier<String?>(null);

  final List<String> _countries = ['India', 'United States', 'United Kingdom', 'Canada', 'Australia'];

  final List<String> _departments = ['Engineering', 'Design', 'Product', 'Marketing', 'Sales'];

  final Map<String, bool> _interests = {'Technology': false, 'Sports': false, 'Music': false, 'Travel': false};

  String? _experience;

  @override
  void dispose() {
    _firstNameController.dispose();
    _lastNameController.dispose();
    _emailController.dispose();
    _departmentValue.dispose();
    super.dispose();
  }

  void _submitForm() {
    if (!_formKey.currentState!.validate()) {
      return;
    }

    final selectedInterests = _interests.entries.where((entry) => entry.value).map((entry) => entry.key).toList();

    debugPrint('First Name: ${_firstNameController.text}');
    debugPrint('Last Name: ${_lastNameController.text}');
    debugPrint('Email: ${_emailController.text}');
    debugPrint('Country: $_selectedCountry');
    debugPrint('Department: $_selectedDepartment');
    debugPrint('Interests: $selectedInterests');
    debugPrint('Experience: $_experience');

    ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Form submitted successfully')));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sample Flutter Form')),
      body: Center(
        child: ConstrainedBox(
          constraints: const BoxConstraints(maxWidth: 700),
          child: SingleChildScrollView(
            padding: const EdgeInsets.all(24),
            child: Form(
              key: _formKey,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text('Registration Form', style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold)),

                  const SizedBox(height: 8),

                  const Text('Please fill in the information below.'),

                  const SizedBox(height: 32),

                  // -------------------------------------------------------
                  // TEXT INPUTS
                  // -------------------------------------------------------
                  const Text('Personal Information', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),

                  const SizedBox(height: 16),

                  TextFormField(
                    controller: _firstNameController,
                    decoration: const InputDecoration(
                      labelText: 'First name',
                      hintText: 'Enter your first name',
                      border: OutlineInputBorder(),
                    ),
                    validator: (value) {
                      if (value == null || value.trim().isEmpty) {
                        return 'Please enter your first name';
                      }
                      return null;
                    },
                  ),

                  const SizedBox(height: 16),

                  TextFormField(
                    controller: _lastNameController,
                    decoration: const InputDecoration(
                      labelText: 'Last name',
                      hintText: 'Enter your last name',
                      border: OutlineInputBorder(),
                    ),
                    validator: (value) {
                      if (value == null || value.trim().isEmpty) {
                        return 'Please enter your last name';
                      }
                      return null;
                    },
                  ),

                  const SizedBox(height: 16),

                  TextFormField(
                    controller: _emailController,
                    keyboardType: TextInputType.emailAddress,
                    decoration: const InputDecoration(
                      labelText: 'Email',
                      hintText: 'Enter your email address',
                      border: OutlineInputBorder(),
                    ),
                    validator: (value) {
                      if (value == null || value.trim().isEmpty) {
                        return 'Please enter your email';
                      }

                      if (!value.contains('@')) {
                        return 'Please enter a valid email';
                      }

                      return null;
                    },
                  ),

                  const SizedBox(height: 32),

                  // -------------------------------------------------------
                  // COMBOBOX
                  // -------------------------------------------------------
                  const Text('ComboBox', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),

                  const SizedBox(height: 8),

                  const Text('Select your country.'),

                  const SizedBox(height: 16),

                  DropdownMenu<String>(
                    width: double.infinity,
                    label: const Text('Country'),
                    hintText: 'Select a country',
                    initialSelection: _selectedCountry,
                    dropdownMenuEntries: _countries
                        .map((country) => DropdownMenuEntry<String>(value: country, label: country))
                        .toList(),
                    onSelected: (value) {
                      setState(() {
                        _selectedCountry = value;
                      });
                    },
                  ),

                  const SizedBox(height: 32),

                  // -------------------------------------------------------
                  // DROPDOWN
                  // -------------------------------------------------------
                  const Text('Dropdown', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),

                  const SizedBox(height: 16),

                  DropdownButtonFormField<String>(
                    initialValue: _selectedDepartment,
                    decoration: const InputDecoration(labelText: 'Department', border: OutlineInputBorder()),
                    hint: const Text('Select a department sample hint'),
                    items: _departments
                        .map((department) => DropdownMenuItem<String>(value: department, child: Text(department)))
                        .toList(),
                    onChanged: (value) {
                      setState(() {
                        _selectedDepartment = value;
                      });
                    },
                    validator: (value) {
                      if (value == null) {
                        return 'Please select a department';
                      }
                      return null;
                    },
                  ),

                  const SizedBox(height: 32),

                  // -------------------------------------------------------
                  // DROPDOWN WITH SEMANTIC WRAPPER
                  // -------------------------------------------------------
                  const Text(
                    'Dropdown with Semantics wrapper',
                    style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  ),

                  const SizedBox(height: 16),

                  Semantics(
                    container: true,

                    child: DropdownButtonFormField<String>(
                      initialValue: _selectedDepartment,
                      decoration: const InputDecoration(labelText: 'Department', border: OutlineInputBorder()),
                      hint: const Text('Select a department sample hint'),
                      items: _departments
                          .map((department) => DropdownMenuItem<String>(value: department, child: Text(department)))
                          .toList(),
                      onChanged: (value) {
                        setState(() {
                          _selectedDepartment = value;
                        });
                      },
                      validator: (value) {
                        if (value == null) {
                          return 'Please select a department';
                        }
                        return null;
                      },
                    ),
                  ),

                  const SizedBox(height: 32),

                  // -------------------------------------------------------
                  // DROPDOWN 2 WITH SEMANTIC WRAPPER
                  // -------------------------------------------------------
                  const Text(
                    'Dropdown2 with Semantics wrapper',
                    style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  ),

                  const SizedBox(height: 16),

                  Semantics(
                    container: true,
                    child: DropdownButtonFormField2<String>(
                      valueListenable: _departmentValue,
                      decoration: const InputDecoration(labelText: 'Department', border: OutlineInputBorder()),
                      hint: const Text('Select a department sample hint'),
                      items: _departments
                          .map((department) => DropdownItem<String>(value: department, child: Text(department)))
                          .toList(),
                      onChanged: (value) {
                        setState(() {
                          _selectedDepartment = value;
                          _departmentValue.value = value;
                        });
                      },
                      validator: (value) {
                        if (value == null) {
                          return 'Please select a department';
                        }
                        return null;
                      },
                    ),
                  ),

                  const SizedBox(height: 32),

                  // -------------------------------------------------------
                  // CHECKBOX GROUP
                  // -------------------------------------------------------
                  const Text('Interests', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),

                  const SizedBox(height: 8),

                  const Text('Select all that apply.'),

                  const SizedBox(height: 8),

                  ..._interests.keys.map((interest) {
                    return CheckboxListTile(
                      contentPadding: EdgeInsets.zero,
                      title: Text(interest),
                      value: _interests[interest],
                      onChanged: (value) {
                        setState(() {
                          _interests[interest] = value ?? false;
                        });
                      },
                    );
                  }),

                  const SizedBox(height: 24),

                  // -------------------------------------------------------
                  // RADIO GROUP
                  // -------------------------------------------------------
                  const Text('Experience Level', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),

                  const SizedBox(height: 8),

                  const Text('Select one option.'),

                  const SizedBox(height: 8),

                  Semantics(
                    container: true,
                    role: SemanticsRole.radioGroup,
                    label: 'Experience Level',
                    tooltip: 'Experience Level tooltip',
                    hint: 'Experience Level hint',
                    child: RadioGroup<String>(
                      groupValue: _experience,
                      onChanged: (value) {
                        setState(() {
                          _experience = value;
                        });
                      },
                      child: Column(
                        children: [
                          RadioListTile<String>(
                            contentPadding: EdgeInsets.zero,
                            title: const Text('Beginner'),
                            value: 'beginner',
                          ),
                          RadioListTile<String>(
                            contentPadding: EdgeInsets.zero,
                            title: const Text('Intermediate'),
                            value: 'intermediate',
                          ),
                          RadioListTile<String>(
                            contentPadding: EdgeInsets.zero,
                            title: const Text('Advanced'),
                            value: 'advanced',
                          ),
                        ],
                      ),
                    ),
                  ),

                  const SizedBox(height: 32),
                  // -------------------------------------------------------
                  // Multiple buttons with same label
                  // -------------------------------------------------------
                  const Text('Bills Section', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),

                  Column(
                    children: [
                      Row(
                        children: [
                          Expanded(child: Text('Jan 2026 Bill \$200')),
                          Semantics(
                            container: true,
                            // excludeSemantics: true,
                            label: 'Pay Jan Bill',
                            button: true,
                            onTap: () => print('Paying bill fpr Jan'),
                            child: ElevatedButton(
                              onPressed: () => print('Paying bill for Jan'),
                              child: const Padding(
                                padding: EdgeInsets.symmetric(vertical: 14),
                                child: Text('Pay Bill'),
                              ),
                            ),
                          ),
                        ],
                      ),
                      const SizedBox(height: 12),
                      Row(
                        children: [
                          Expanded(child: Text('Feb 2026 Bill \$100')),
                          Semantics(
                            container: true,
                            // excludeSemantics: true,
                            label: 'Pay Feb Bill',
                            button: true,
                            onTap: () => print('Paying bill for Feb'),
                            child: ElevatedButton(
                              onPressed: () => print('Paying bill for Feb'),
                              child: const Padding(
                                padding: EdgeInsets.symmetric(vertical: 14),
                                child: Text('Pay Bill'),
                              ),
                            ),
                          ),
                        ],
                      ),
                      const SizedBox(height: 12),
                      Row(
                        children: [
                          Expanded(child: Text('Mar 2026 Bill \$50')),
                          Semantics(
                            container: true,
                            // excludeSemantics: true,
                            label: 'Pay Mar Bill',
                            button: true,
                            onTap: () => print('Paying bill for Mar'),
                            child: ElevatedButton(
                              onPressed: () => print('Paying bill for Mar'),
                              child: const Padding(
                                padding: EdgeInsets.symmetric(vertical: 14),
                                child: Text('Pay Bill'),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                  const SizedBox(height: 32),
                  // -------------------------------------------------------
                  // SUBMIT BUTTON
                  // -------------------------------------------------------
                  SizedBox(
                    width: double.infinity,
                    child: Semantics(
                      container: true,
                      // excludeSemantics: true,
                      label: 'Cancel',
                      button: true,
                      onTap: () => print('Cancelling'),
                      child: ElevatedButton(
                        onPressed: () => print('Cancelling'),
                        child: const Padding(padding: EdgeInsets.symmetric(vertical: 14), child: Text('Cancel')),
                      ),
                    ),
                  ),
                  const SizedBox(height: 32),
                  SizedBox(
                    width: double.infinity,
                    child: ElevatedButton(
                      onPressed: _submitForm,
                      child: const Padding(padding: EdgeInsets.symmetric(vertical: 14), child: Text('Submit All')),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}