-
Bug
-
Resolution: Fixed
-
Low
-
8.4.0
-
Severity 3 - Minor
-
Issue Summary
The "General", "Event types" and so on buttons are not programmatically determined as a tab
Steps to Reproduce
- Navigate to the header and activate the "Calendar" link
- Navigate to the dates and activate it
- Navigate to the "Add Reminder" link and activate it
- Using a screen reader, navigate to the mentioned elements in the main content area of the page.
- 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
[CONFSERVER-90568] Calendar | Add Reminder: Tab not programmatically determined
| Labels | Original: 4.1.2 Level-A WCAG21 a11y-277 ax-A11y-251 ax-at-user ax-bug ax-confluence-dc-vpat ax-confluence-dc-vpat-calendar ax-confluence-dc-vpat-pg09 ax-customer-escalated ax-esc-arbeitsagentur.de ax-esc-atlassian ax-esc-itzbund ax-high-priority ax-qa | New: 4.1.2 Level-A WCAG21 a11y-277 ax-A11y-251 ax-at-user ax-bug ax-confluence-dc-2023-vpat ax-confluence-dc-vpat ax-confluence-dc-vpat-calendar ax-confluence-dc-vpat-pg09 ax-customer-escalated ax-esc-arbeitsagentur.de ax-esc-atlassian ax-esc-itzbund ax-high-priority ax-qa |
| Resolution | New: Fixed [ 1 ] | |
| Status | Original: Waiting for Release [ 12075 ] | New: Closed [ 6 ] |
| Remote Link |
New:
This issue links to "Confluence Bundled Plugins › Confluence Jira-Integration Plugins › issue- |
| Remote Link |
New:
This issue links to "Confluence Bundled Plugins › Confluence Jira-Integration Plugins › issue- |
| Remote Link |
New:
This issue links to "Confluence Bundled Plugins › Confluence Jira-Integration Plugins › issue- |
| Remote Link | Original: This issue links to "Page (Confluence)" [ 839968 ] |
| Fix Version/s | New: 8.8.0 [ 106508 ] | |
| Status | Original: Awaiting Merge [ 10064 ] | New: Waiting for Release [ 12075 ] |
| Labels | Original: 4.1.2 Level-A WCAG21 a11y-277 ax-A11y-251 ax-at-user ax-bug ax-confluence-dc-vpat ax-confluence-dc-vpat-calendar ax-confluence-dc-vpat-pg09 ax-critical-priority ax-customer-escalated ax-esc-arbeitsagentur.de ax-esc-atlassian ax-esc-itzbund ax-qa | New: 4.1.2 Level-A WCAG21 a11y-277 ax-A11y-251 ax-at-user ax-bug ax-confluence-dc-vpat ax-confluence-dc-vpat-calendar ax-confluence-dc-vpat-pg09 ax-customer-escalated ax-esc-arbeitsagentur.de ax-esc-atlassian ax-esc-itzbund ax-high-priority ax-qa |
| Remote Link | Original: This issue links to "Page (Confluence)" [ 814037 ] |
| Labels | Original: 4.1.2 Level-A WCAG21 a11y-277 ax-A11y-251 ax-at-user ax-bug ax-confluence-dc-vpat ax-confluence-dc-vpat-calendar ax-confluence-dc-vpat-createanewpage-editor ax-confluence-dc-vpat-pg07 ax-confluence-dc-vpat-pg09 ax-critical-priority ax-customer-escalated ax-esc-arbeitsagentur.de ax-esc-atlassian ax-esc-itzbund ax-qa | New: 4.1.2 Level-A WCAG21 a11y-277 ax-A11y-251 ax-at-user ax-bug ax-confluence-dc-vpat ax-confluence-dc-vpat-calendar ax-confluence-dc-vpat-pg09 ax-critical-priority ax-customer-escalated ax-esc-arbeitsagentur.de ax-esc-atlassian ax-esc-itzbund ax-qa |