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

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

Closed
luixxiul opened this issue Apr 2, 2023 · 7 comments · Fixed by matrix-org/matrix-react-sdk#10628
Assignees
Labels
A11y O-Occasional Affects or can be seen by some users regularly or most users rarely S-Tolerable Low/no impact on users T-Defect

Comments

@luixxiul
Copy link

luixxiul commented Apr 2, 2023

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
Copy link
Contributor

Are you talking about this button?

image

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

@andybalaam andybalaam added S-Tolerable Low/no impact on users A11y O-Occasional Affects or can be seen by some users regularly or most users rarely labels Apr 3, 2023
@luixxiul
Copy link
Author

luixxiul commented Apr 3, 2023

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.

@luixxiul luixxiul changed the title Some buttons on the header not selectable with findButton Some buttons on the header not selectable with findButton on Cypress Apr 3, 2023
@andybalaam
Copy link
Contributor

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
Copy link
Author

luixxiul commented Apr 3, 2023

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:

1

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

@luixxiul
Copy link
Author

luixxiul commented Apr 3, 2023

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

@luixxiul luixxiul changed the title Some buttons on the header not selectable with findButton on Cypress Some buttons on the header are tagged with the tab role without an associated element with the tabpanel role Apr 3, 2023
@andybalaam
Copy link
Contributor

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
Copy link
Author

luixxiul commented Apr 3, 2023

I understood, thanks!

@t3chguy t3chguy self-assigned this Apr 17, 2023
su-ex added a commit to SchildiChat/element-desktop that referenced this issue Jul 31, 2023
* If you package Element Desktop with a static sqlcipher, you may need to tweak some build scripts: SQLCIPHER_STATIC became SQLCIPHER_BUNDLED, and OpenSSL is now included too.
* Start packaging for Debian & Ubuntu aarch64 ([\element-hq#895](element-hq#895)).
* Use a fully static seshat build ([\element-hq#631](element-hq#631)). Contributed by @MatMaul.
* Improve Content-Security-Policy ([\#25210](element-hq/element-web#25210)).
* Add UIFeature.locationSharing to hide location sharing ([\#10727](matrix-org/matrix-react-sdk#10727)).
* Memoize field validation results ([\#10714](matrix-org/matrix-react-sdk#10714)).
* Commands for plain text editor ([\#10567](matrix-org/matrix-react-sdk#10567)). Contributed by @alunturner.
* Allow 16 lines of text in the rich text editors ([\#10670](matrix-org/matrix-react-sdk#10670)). Contributed by @alunturner.
* Bail out of `RoomSettingsDialog` when room is not found ([\#10662](matrix-org/matrix-react-sdk#10662)). Contributed by @kerryarchibald.
* Element-R: Populate device list for right-panel ([\#10671](matrix-org/matrix-react-sdk#10671)). Contributed by @florianduros.
* Make existing and new issue URLs configurable ([\#10710](matrix-org/matrix-react-sdk#10710)). Fixes element-hq/element-web#24424.
* Fix usages of ARIA tabpanel ([\#10628](matrix-org/matrix-react-sdk#10628)). Fixes element-hq/element-web#25016.
* Element-R: Starting a DMs with a user ([\#10673](matrix-org/matrix-react-sdk#10673)). Contributed by @florianduros.
* ARIA Accessibility improvements ([\#10675](matrix-org/matrix-react-sdk#10675)).
* ARIA Accessibility improvements ([\#10674](matrix-org/matrix-react-sdk#10674)).
* Add arrow key controls to emoji and reaction pickers ([\#10637](matrix-org/matrix-react-sdk#10637)). Fixes element-hq/element-web#17189.
* Translate credits in help about section ([\#10676](matrix-org/matrix-react-sdk#10676)).
* Fix macos update check exploding ([\element-hq#944](element-hq#944)). Fixes element-hq#668.
* Fix: reveal images when image previews are disabled ([\#10781](matrix-org/matrix-react-sdk#10781)). Fixes element-hq/element-web#25271. Contributed by @kerryarchibald.
* Workaround Squirrel.Mac wedging app restart after failed update check ([\element-hq#629](element-hq#629)).
* Fix autocomplete not resetting properly on message send ([\#10741](matrix-org/matrix-react-sdk#10741)). Fixes element-hq/element-web#25170.
* Fix start_sso not working with guests disabled ([\#10720](matrix-org/matrix-react-sdk#10720)). Fixes element-hq/element-web#16624.
* Fix soft crash with Element call widgets ([\#10684](matrix-org/matrix-react-sdk#10684)).
* Send correct receipt when marking a room as read ([\#10730](matrix-org/matrix-react-sdk#10730)). Fixes element-hq/element-web#25207.
* Offload some more waveform processing onto a worker ([\#9223](matrix-org/matrix-react-sdk#9223)). Fixes element-hq/element-web#19756.
* Consolidate login errors ([\#10722](matrix-org/matrix-react-sdk#10722)). Fixes element-hq/element-web#17520.
* Fix all rooms search generating permalinks to wrong room id ([\#10625](matrix-org/matrix-react-sdk#10625)). Fixes element-hq/element-web#25115.
* Posthog properly handle Analytics ID changing from under us ([\#10702](matrix-org/matrix-react-sdk#10702)). Fixes element-hq/element-web#25187.
* Fix Clock being read as an absolute time rather than duration ([\#10706](matrix-org/matrix-react-sdk#10706)). Fixes element-hq/element-web#22582.
* Properly translate errors in `ChangePassword.tsx` so they show up translated to the user but not in our logs ([\#10615](matrix-org/matrix-react-sdk#10615)). Fixes element-hq/element-web#9597. Contributed by @MadLittleMods.
* Honour feature toggles in guest mode ([\#10651](matrix-org/matrix-react-sdk#10651)). Fixes element-hq/element-web#24513. Contributed by @andybalaam.
* Fix default content in devtools event sender ([\#10699](matrix-org/matrix-react-sdk#10699)). Contributed by @tulir.
* Fix a crash when a call ends while you're in it ([\#10681](matrix-org/matrix-react-sdk#10681)). Fixes element-hq/element-web#25153.
* Fix lack of screen reader indication when triggering auto complete ([\#10664](matrix-org/matrix-react-sdk#10664)). Fixes element-hq/element-web#11011.
* Fix typing tile duplicating users ([\#10678](matrix-org/matrix-react-sdk#10678)). Fixes element-hq/element-web#25165.
* Fix wrong room topic tooltip position ([\#10667](matrix-org/matrix-react-sdk#10667)). Fixes element-hq/element-web#25158.
* Fix create subspace dialog not working ([\#10652](matrix-org/matrix-react-sdk#10652)). Fixes element-hq/element-web#24882.
su-ex added a commit to SchildiChat/element-web that referenced this issue Jul 31, 2023
* Improve Content-Security-Policy ([\element-hq#25210](element-hq#25210)).
* Add UIFeature.locationSharing to hide location sharing ([\element-hq#10727](matrix-org/matrix-react-sdk#10727)).
* Memoize field validation results ([\#10714](matrix-org/matrix-react-sdk#10714)).
* Commands for plain text editor ([\element-hq#10567](matrix-org/matrix-react-sdk#10567)). Contributed by @alunturner.
* Allow 16 lines of text in the rich text editors ([\element-hq#10670](matrix-org/matrix-react-sdk#10670)). Contributed by @alunturner.
* Bail out of `RoomSettingsDialog` when room is not found ([\#10662](matrix-org/matrix-react-sdk#10662)). Contributed by @kerryarchibald.
* Element-R: Populate device list for right-panel ([\element-hq#10671](matrix-org/matrix-react-sdk#10671)). Contributed by @florianduros.
* Make existing and new issue URLs configurable ([\element-hq#10710](matrix-org/matrix-react-sdk#10710)). Fixes element-hq#24424.
* Fix usages of ARIA tabpanel ([\element-hq#10628](matrix-org/matrix-react-sdk#10628)). Fixes element-hq#25016.
* Element-R: Starting a DMs with a user ([\element-hq#10673](matrix-org/matrix-react-sdk#10673)). Contributed by @florianduros.
* ARIA Accessibility improvements ([\element-hq#10675](matrix-org/matrix-react-sdk#10675)).
* ARIA Accessibility improvements ([\element-hq#10674](matrix-org/matrix-react-sdk#10674)).
* Add arrow key controls to emoji and reaction pickers ([\element-hq#10637](matrix-org/matrix-react-sdk#10637)). Fixes element-hq#17189.
* Translate credits in help about section ([\element-hq#10676](matrix-org/matrix-react-sdk#10676)).
* Fix: reveal images when image previews are disabled ([\element-hq#10781](matrix-org/matrix-react-sdk#10781)). Fixes element-hq#25271. Contributed by @kerryarchibald.
* Fix autocomplete not resetting properly on message send ([\element-hq#10741](matrix-org/matrix-react-sdk#10741)). Fixes element-hq#25170.
* Fix start_sso not working with guests disabled ([\element-hq#10720](matrix-org/matrix-react-sdk#10720)). Fixes element-hq#16624.
* Fix soft crash with Element call widgets ([\element-hq#10684](matrix-org/matrix-react-sdk#10684)).
* Send correct receipt when marking a room as read ([\element-hq#10730](matrix-org/matrix-react-sdk#10730)). Fixes element-hq#25207.
* Offload some more waveform processing onto a worker ([\element-hq#9223](matrix-org/matrix-react-sdk#9223)). Fixes element-hq#19756.
* Consolidate login errors ([\element-hq#10722](matrix-org/matrix-react-sdk#10722)). Fixes element-hq#17520.
* Fix all rooms search generating permalinks to wrong room id ([\element-hq#10625](matrix-org/matrix-react-sdk#10625)). Fixes element-hq#25115.
* Posthog properly handle Analytics ID changing from under us ([\element-hq#10702](matrix-org/matrix-react-sdk#10702)). Fixes element-hq#25187.
* Fix Clock being read as an absolute time rather than duration ([\element-hq#10706](matrix-org/matrix-react-sdk#10706)). Fixes element-hq#22582.
* Properly translate errors in `ChangePassword.tsx` so they show up translated to the user but not in our logs ([\element-hq#10615](matrix-org/matrix-react-sdk#10615)). Fixes element-hq#9597. Contributed by @MadLittleMods.
* Honour feature toggles in guest mode ([\element-hq#10651](matrix-org/matrix-react-sdk#10651)). Fixes element-hq#24513. Contributed by @andybalaam.
* Fix default content in devtools event sender ([\element-hq#10699](matrix-org/matrix-react-sdk#10699)). Contributed by @tulir.
* Fix a crash when a call ends while you're in it ([\element-hq#10681](matrix-org/matrix-react-sdk#10681)). Fixes element-hq#25153.
* Fix lack of screen reader indication when triggering auto complete ([\element-hq#10664](matrix-org/matrix-react-sdk#10664)). Fixes element-hq#11011.
* Fix typing tile duplicating users ([\element-hq#10678](matrix-org/matrix-react-sdk#10678)). Fixes element-hq#25165.
* Fix wrong room topic tooltip position ([\element-hq#10667](matrix-org/matrix-react-sdk#10667)). Fixes element-hq#25158.
* Fix create subspace dialog not working ([\element-hq#10652](matrix-org/matrix-react-sdk#10652)). Fixes element-hq#24882.
su-ex added a commit to SchildiChat/matrix-react-sdk that referenced this issue Jul 31, 2023
* Add UIFeature.locationSharing to hide location sharing ([\matrix-org#10727](matrix-org#10727)).
* Memoize field validation results ([\matrix-org#10714](matrix-org#10714)).
* Commands for plain text editor ([\matrix-org#10567](matrix-org#10567)). Contributed by @alunturner.
* Allow 16 lines of text in the rich text editors ([\matrix-org#10670](matrix-org#10670)). Contributed by @alunturner.
* Bail out of `RoomSettingsDialog` when room is not found ([\matrix-org#10662](matrix-org#10662)). Contributed by @kerryarchibald.
* Element-R: Populate device list for right-panel ([\matrix-org#10671](matrix-org#10671)). Contributed by @florianduros.
* Make existing and new issue URLs configurable ([\matrix-org#10710](matrix-org#10710)). Fixes element-hq/element-web#24424.
* Fix usages of ARIA tabpanel ([\matrix-org#10628](matrix-org#10628)). Fixes element-hq/element-web#25016.
* Element-R: Starting a DMs with a user ([\matrix-org#10673](matrix-org#10673)). Contributed by @florianduros.
* ARIA Accessibility improvements ([\matrix-org#10675](matrix-org#10675)).
* ARIA Accessibility improvements ([\matrix-org#10674](matrix-org#10674)).
* Add arrow key controls to emoji and reaction pickers ([\matrix-org#10637](matrix-org#10637)). Fixes element-hq/element-web#17189.
* Translate credits in help about section ([\matrix-org#10676](matrix-org#10676)).
* Fix: reveal images when image previews are disabled ([\matrix-org#10781](matrix-org#10781)). Fixes element-hq/element-web#25271. Contributed by @kerryarchibald.
* Fix autocomplete not resetting properly on message send ([\matrix-org#10741](matrix-org#10741)). Fixes element-hq/element-web#25170.
* Fix start_sso not working with guests disabled ([\matrix-org#10720](matrix-org#10720)). Fixes element-hq/element-web#16624.
* Fix soft crash with Element call widgets ([\matrix-org#10684](matrix-org#10684)).
* Send correct receipt when marking a room as read ([\matrix-org#10730](matrix-org#10730)). Fixes element-hq/element-web#25207.
* Offload some more waveform processing onto a worker ([\matrix-org#9223](matrix-org#9223)). Fixes element-hq/element-web#19756.
* Consolidate login errors ([\matrix-org#10722](matrix-org#10722)). Fixes element-hq/element-web#17520.
* Fix all rooms search generating permalinks to wrong room id ([\matrix-org#10625](matrix-org#10625)). Fixes element-hq/element-web#25115.
* Posthog properly handle Analytics ID changing from under us ([\matrix-org#10702](matrix-org#10702)). Fixes element-hq/element-web#25187.
* Fix Clock being read as an absolute time rather than duration ([\matrix-org#10706](matrix-org#10706)). Fixes element-hq/element-web#22582.
* Properly translate errors in `ChangePassword.tsx` so they show up translated to the user but not in our logs ([\matrix-org#10615](matrix-org#10615)). Fixes element-hq/element-web#9597. Contributed by @MadLittleMods.
* Honour feature toggles in guest mode ([\matrix-org#10651](matrix-org#10651)). Fixes element-hq/element-web#24513. Contributed by @andybalaam.
* Fix default content in devtools event sender ([\matrix-org#10699](matrix-org#10699)). Contributed by @tulir.
* Fix a crash when a call ends while you're in it ([\matrix-org#10681](matrix-org#10681)). Fixes element-hq/element-web#25153.
* Fix lack of screen reader indication when triggering auto complete ([\matrix-org#10664](matrix-org#10664)). Fixes element-hq/element-web#11011.
* Fix typing tile duplicating users ([\matrix-org#10678](matrix-org#10678)). Fixes element-hq/element-web#25165.
* Fix wrong room topic tooltip position ([\matrix-org#10667](matrix-org#10667)). Fixes element-hq/element-web#25158.
* Fix create subspace dialog not working ([\matrix-org#10652](matrix-org#10652)). Fixes element-hq/element-web#24882.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A11y O-Occasional Affects or can be seen by some users regularly or most users rarely S-Tolerable Low/no impact on users T-Defect
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants