Issue Summary

The buttons that are used to set the time have not been grouped.

Steps to Reproduce

1. Open the "Create sprint" modal dialog.
2. Navigate to the "Calendar" and activate it.
3. Using the screen reader, navigate to the mentioned instances.
4. Listen that the instruction is not announced along with the label for the buttons.

Screenshot

Actual Results

The buttons such as "Hours", "Minutes" and "ampm" are not programmatically grouped and associated with "Time" instruction.

As a result, screen reader users will not understand the purpose of the radio buttons.

Expected Results

The screen reader should announce the instructions along with the label for the radio buttons.

Include the instruction “Time” within <legend> element. Use <fieldset> and <legend> elements to group the instructions and buttons.

Code Example:

<fieldset>
    <legend>Time</legend>
    
    <button class="hour" aria-label="12 hours" aria-live="assertive" aria-describedby="calendar-time-instructions">12</button>
    <p id="calendar-time-instructions" aria-hidden="true" class="assistive">Press the button to increase the value by one</p>

    <button class="minute" aria-label="54 minutes" aria-live="assertive" aria-describedby="calendar-time-instructions">54</button>

    <button class="ampm" aria-live="assertive" aria-describedby="calendar-am-pm-instructions">am</button>
    <p id="calendar-am-pm-instructions" aria-hidden="true" class="assistive">Press the button to switch the value</p>

</fieldset>

Workaround

Currently, there is no known workaround for this behaviour. A workaround will be added here when available

Environment

MacBook Pro (16-inch, 2021)
macOs Sonoma 14.3
Chrome - Version 120.0.6099.109 (Official Build) (arm64)
Firefox- Version 92.0 (64-bit) 
Safari- Version 17.3 (19617.2.4.11.8)
JAWS- Version 2023
NVDA- Version 2021.2 
Voiceover - Version Latest