Some buttons on the header are tagged with the tab role without an associated element with the tabpanel role

[luixxiul]

Steps to reproduce

• Create E2E test to select buttons inside HeaderButtons on the room header such as the thread button and the room info button with findByRole("button", {name: "" }).

Outcome

What did you expect?

The buttons should be able to be found.

What happened instead?

They were not found as they are tagged as tab.

Since the content rendered by clicking those buttons is not a tabbed content tagged with role="tabpanel", it should be fine to tag them as role="button".

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role#description

I assume the role="tab" rather should be applied to the left column buttons on the setting dialogs, for example.

Operating system

No response

Browser information

No response

URL for webapp

No response

Application version

No response

Homeserver

No response

Will you send logs?

No

[andybalaam]

Are you talking about this button?

Why is it a problem? Isn't there another way to find this button?

[luixxiul]

I forgot that findbutton() was a function based on Cypress Testing Library, which can be used like this: cy.get(".mx_EventTile_last").realHover().findButton("Edit").click();

Currently it is not possible to find the button with cy.get(".mx_RoomHeader").findButton("Threads").click() as the button's role is specified as role="tab", while findButton() seeks an element with the role "button".

Of course it is possible to keep using cy.get(".mx_RoomHeader [aria-label='Threads']").click(), but I suppose using findButton would be natural and expected, based on the documentation.

[andybalaam]

I'm not convinced that we should change the button's role just because it makes the test look nicer. There might be lots of reasons why it is like this, or unintended consequences of changing it.

How about adding a new function findTabButton that finds things with role="tab"?

[luixxiul]

I see, I am going to add findTab function to find.ts, but I am not quite sure whether role="tab" on those buttons would be effective, though my knowledge on ARIA is fairly limited.

According to https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role#description,

The ARIA tab role indicates an interactive element ... displays its associated tabpanel.

An element with the tab role controls the visibility of an associated element with the tabpanel role.

Yet I could not find an element tagged with tabpanel role, other than on emojipicker's Category.tsx and ThirdPartyMemberInfo.tsx. The element might have been available on Riot era, though I have not investigated.

Here is an example which combines the role tab with tablist and elements with tabpanel to create an interactive group of tabbed content:

I suspect BaseCard has been regarded as tabpanel, though it has not been coded so.

[luixxiul]

I'm going to change the title to reflect the actual issue (which is not really about a test; sorry for confusion).

[andybalaam]

Thank you, I think this is definitely worth thinking about, and in the meantime if you add findTab (though I think I prefer findTabButton ;-) then it won't block your tests.

[luixxiul]

I understood, thanks!