Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BITV] 9.4.1.2/3.10 - The "Details" section contains a tab list that has not been implemented correctly. (2) #37107

Closed
7 tasks done
AndyScherzinger opened this issue Mar 7, 2023 · 6 comments
Assignees
Labels
4. to release Ready to be released and/or waiting for tests to finish accessibility

Comments

@AndyScherzinger AndyScherzinger added 1. to develop Accepted and waiting to be taken care of accessibility labels Mar 7, 2023
@Pytal Pytal self-assigned this Aug 17, 2023
@Pytal
Copy link
Member

Pytal commented Aug 17, 2023

The current implementation
image
uses a nav wrapper with role="tablist" around span elements with role="tab"

Will changing navul and spanli while keeping the roles meet a11y requirements @michaelnissenbaum?

@AndyScherzinger AndyScherzinger changed the title [BITV] 9.4.1.2/3.10 - The "Details" section contains a tab list that has not been implemented correctly. It is recommended to set the role="tablist" on the ul element and remove the nav element. (2) [BITV] 9.4.1.2/3.10 - The "Details" section contains a tab list that has not been implemented correctly. (2) Aug 18, 2023
@michaelnissenbaum
Copy link

I don't see an advantage in using an unordered list here. A proper implementation should look like the example at https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/. I've examined the current implementation at https://try.nextcloud.com/ltd/a11y/index.php/apps/files/?dir=/&fileid=677 using VoiceOver, and it seems to work correctly. However, I don't understand why there's a radio button inside the element with role="tab". In theory, this could lead to issues. As I mentioned before, you can find a correctly functioning example at the URL above.

@Pytal
Copy link
Member

Pytal commented Aug 18, 2023

Understood 👍

Would making the input type="button" be sufficient or is a button element necessary to meet a11y requirements @michaelnissenbaum?

@michaelnissenbaum
Copy link

From my perspective, it's irrelevant in this case, as shown in the example the native role is overridden by the role="tab".


<button id="tab-1"
            type="button"
            role="tab"
            aria-selected="true"
            aria-controls="tabpanel-1">
      <span class="focus">
        Maria Ahlefeldt
      </span>
    </button>

@Pytal Pytal added 3. to review Waiting for reviews and removed 1. to develop Accepted and waiting to be taken care of labels Aug 24, 2023
@Pytal
Copy link
Member

Pytal commented Sep 1, 2023

Is the tablist implementation on https://try.nextcloud.com/ltd/a11y/ accessible @michaelnissenbaum ?

@michaelnissenbaum
Copy link

From my perspective, the implementation of the tab bar is still not 100% accessible. The use of button elements (type="button") nested within "span" elements with the role "tab" results in being able to access the individual tabs one by one using the TAB key. Depending on the screen reader, they may not be identified as tabs but rather as buttons. Additionally, navigation through the tabs should only be possible using arrow keys. Even when using Chromium-based browsers, both the "tab" and "group" roles are announced in the reading mode. Here's another example for reference: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role.

@Pytal Pytal added 4. to release Ready to be released and/or waiting for tests to finish and removed 3. to review Waiting for reviews labels Oct 23, 2023
@Pytal Pytal closed this as completed Oct 23, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
4. to release Ready to be released and/or waiting for tests to finish accessibility
Projects
None yet
Development

No branches or pull requests

3 participants