Accessibility: How to associate an input field with its label?

[jacob-willden]

In order for a field in a form to be accessible, it needs to have a label associated with it (this applies to both Web and native app experiences).

I'm developing a Flutter/Dart app using macos_ui that involves several forms with various inputs, including MacosPopupButton for selecting one of several options. While I can add a label that's visually adjacent to a MacosPopupButton, I cannot figure out how to associate the label with it (I can accomplish this in Material UI using InputDecoration(labelText) or in HTML by wrapping a <select> with a <label>).

Here's a minimal reproducible example of what I've tried:

// lib/main.dart
import 'package:flutter/cupertino.dart';
import 'package:macos_ui/macos_ui.dart';

void main() {
  runApp(const FavoriteAnimalApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MacosApp(
      title: 'Choose Your Favorite Animal',
      home: FavoriteAnimalPage()
    );
  }
}

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

  @override
  FavoriteAnimalPageState createState() => FavoriteAnimalPageState();
}

class FavoriteAnimalPageState extends State<FavoriteAnimalPage> {
  String? selectedAnimal;
  final List<String> animals = ['Dog', 'Cat', 'Turtle', 'Rabbit', 'Other'];

  @override
  Widget build(BuildContext context) {
    return MacosWindow(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Label(
              text: Text('Favorite Animal: '), 
              child: MacosPopupButton<String>(
              value: selectedAnimal,
              items:
                animals.map((String animal) {
                  return MacosPopupMenuItem<String>(
                    value: animal,
                    child: Text(animal),
                  );
                }).toList(),
              onChanged: (val) {
                setState(() => selectedAnimal = val);
              },
            )
            ),
          ],
        ),
      ),
    );
  }
}

Unfortunately, wrapping the MacosPopupButton in the Label does not associate the two, meaning the button has no accessible name. If you run the app and navigate it with a screen reader, it will only refer to the button as "button" rather than "Favorite Animal, button":

macos_ui_button_no_accessible_name.mov

Is it possible to give MacosPopupButton an accessible name? Thanks in advance!