Issue Summary

The "General", "Event types" and so on buttons are not programmatically determined as a tab

Steps to Reproduce

1. Navigate to the header and activate the "Calendar" link
2. Navigate to the dates and activate it 
3. Navigate to the "Add Reminder" link and activate it 
4. Using a screen reader, navigate to the mentioned elements in the main content area of the page.
5. Observe that the elements are not identified as tabs and state tabs are not announced as well.

Screenshot 1: Add Reminder

Actual Results

The "General", "Event types" and so on buttons are not programmatically determined as tabs. Also, the number of tabs is not programmatically determined. On activating the elements, the related content gets dynamically updated below and visually an underline appears on the selected element to convey the state. Although the dynamic change in the content is easier to understand for sighted users, it is not intuitive for screen reader users.

Expected Results

Apply the following changes:

• Set the role="tablist" for the <div> tag containing the elements that behave as a tab.
• Specify 'id' attribute for the container of visible text that determines the name of the tablist. Reference the value of the 'id' attribute correctly via the 'aria-labelledby' attribute of tablist.
• Set the role="tab" for the <button> tags used for displaying "General", "Event types" and so on. In addition, specify the ARIA attributes for tabs, such as “aria-controls” and “aria-selected”. (The value of the aria-selected attribute needs to change on the basis of the currently active tab.)
• Set aria-selected=”true” for the active tab.
• Specify an 'id' attribute for the <div> tags used to display the content of the respective tab. Reference the value of the 'id' attribute correctly via the 'aria-controls' attribute of each tab.
• Specify an 'id' attribute for the <button> tags used to display each tab. Reference the value of the 'id' attribute correctly via 'aria-labelledby' attribute of each tab panel.
• Set the role="tabpanel" for the <div> tags displaying the contents associated with the "General", "Event types" and so on tabs.
• As best practice, provide tabindex="0" attribute on the container of the tab panel.

 Refer to the below link for implementation: 
https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html

Workaround

Not available 

Environment 

MacBook Pro (16-inch, 2019)
macOS 13.4.1 (c) (22F770820d)
Chrome - Version 115.0.5790.170 (Official Build) (x86_64)
Firefox- Version 114.0 (64-bit)
Safari- Version 16.5.2 (18615.2.9.11.10)
JAWS- Version 2023.2306.28
NVDA- Version 2022.2.2
Voiceover - Version Latest