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.

Sign up for GitHub

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

Jump to bottom

a11y: Multiple issues and spec violations with space panel #22995

Closed
ndarilek opened this issue Aug 4, 2022 · 2 comments · Fixed by matrix-org/matrix-react-sdk#9157
Closed

a11y: Multiple issues and spec violations with space panel #22995

ndarilek opened this issue Aug 4, 2022 · 2 comments · Fixed by matrix-org/matrix-react-sdk#9157
Assignees
@t3chguy
Labels
A11y A-Spaces Spaces, groups, communities O-Frequent Affects or can be seen by most users regularly or impacts most users' first experience S-Minor Impairs non-critical functionality or suitable workarounds exist T-Defect

Comments

@ndarilek
Copy link
Contributor

ndarilek commented Aug 4, 2022

Steps to reproduce

There are a few issues with the markup as generated by SpacePanel.tsx:

  1. A <ul role="tree"> is created, but the user panel is added as a child in a <div>. I'm fairly sure lists can't have divs as children in the HTML spec.
  2. As presented to NVDA, the user menu is presented as if it was a child of the spaces tree. I'm guessing this tree should only have actual spaces as its children, and that the user menu should be a separate item. If not, it should be presented as a <li> with appropriate ARIA attributes for its role as a tree item.
  3. aria-selected="true" needs to be set on only the selected item in the tree.

I did manage to move the <div> out from the ttree, though I don't know how it might have affected things visually. Got a bit lost in trying to set aria-selected though and doubt I'll have time to get to it soon.

Outcome

What did you expect?

To be able to use the spaces tree accessibly

What happened instead?

Tabbing to the spaces tree presents the user menu as if it's a space. Also, NVDA is generally confused about how to handle it given the markup isn't compliant.

Operating system

No response

Browser information

No response

URL for webapp

No response

Application version

No response

Homeserver

No response

Will you send logs?

Yes
@turt2live turt2live added S-Minor Impairs non-critical functionality or suitable workarounds exist A-Spaces Spaces, groups, communities A11y O-Frequent Affects or can be seen by most users regularly or impacts most users' first experience labels Aug 5, 2022
@t3chguy t3chguy self-assigned this Aug 5, 2022
@t3chguy t3chguy mentioned this issue Aug 9, 2022
Merged
@t3chguy
Copy link
Member

t3chguy commented Aug 9, 2022

@ndarilek thanks for the write up, if you could test matrix-org/matrix-react-sdk#9157 to see if it resolves your three issues that would be great

@ndarilek
Copy link
Contributor Author

ndarilek commented Aug 9, 2022 via email

su-ex added a commit to SchildiChat/element-desktop that referenced this issue Sep 1, 2022
@su-ex
Merge tag 'v1.11.4' into sc
5530159 
* Upgrade to Electron 20 ([\element-hq#403](element-hq#403)).
* Device manager - scroll to filtered list from security recommendations ([\#9227](matrix-org/matrix-react-sdk#9227)). Contributed by @kerryarchibald.
* Device manager - updated dropdown style in filtered device list ([\#9226](matrix-org/matrix-react-sdk#9226)). Contributed by @kerryarchibald.
* Device manager - device type and verification icons on device tile ([\#9197](matrix-org/matrix-react-sdk#9197)). Contributed by @kerryarchibald.
* Ignore unreads in low priority rooms in the space panel ([\#6518](matrix-org/matrix-react-sdk#6518)). Fixes element-hq/element-web#16836.
* Release message right-click context menu out of labs ([\#8613](matrix-org/matrix-react-sdk#8613)).
* Device manager - expandable session details in device list ([\#9188](matrix-org/matrix-react-sdk#9188)). Contributed by @kerryarchibald.
* Device manager - device list filtering ([\#9181](matrix-org/matrix-react-sdk#9181)). Contributed by @kerryarchibald.
* Device manager - add verification details to session details ([\#9187](matrix-org/matrix-react-sdk#9187)). Contributed by @kerryarchibald.
* Device manager - current session expandable details ([\#9185](matrix-org/matrix-react-sdk#9185)). Contributed by @kerryarchibald.
* Device manager - security recommendations section ([\#9179](matrix-org/matrix-react-sdk#9179)). Contributed by @kerryarchibald.
* The Welcome Home Screen: Return Button ([\#9089](matrix-org/matrix-react-sdk#9089)). Fixes element-hq/element-web#22917. Contributed by @justjanne.
* Device manager - label devices as inactive ([\#9175](matrix-org/matrix-react-sdk#9175)). Contributed by @kerryarchibald.
* Device manager - other sessions list ([\#9155](matrix-org/matrix-react-sdk#9155)). Contributed by @kerryarchibald.
* Implement MSC3846: Allowing widgets to access TURN servers ([\#9061](matrix-org/matrix-react-sdk#9061)).
* Allow widgets to send/receive to-device messages ([\#8885](matrix-org/matrix-react-sdk#8885)).
* Add super cool feature ([\#9222](matrix-org/matrix-react-sdk#9222)). Contributed by @gefgu.
* Make use of js-sdk roomNameGenerator to handle i18n for generated room names ([\#9209](matrix-org/matrix-react-sdk#9209)). Fixes element-hq/element-web#21369.
* Fix progress bar regression throughout the app ([\#9219](matrix-org/matrix-react-sdk#9219)). Fixes element-hq/element-web#23121.
* Reuse empty string & space string logic for event types in devtools ([\#9218](matrix-org/matrix-react-sdk#9218)). Fixes element-hq/element-web#23115.
* Reduce amount of requests done by the onboarding task list ([\#9194](matrix-org/matrix-react-sdk#9194)). Fixes element-hq/element-web#23085. Contributed by @justjanne.
* Avoid hardcoding branding in user onboarding ([\#9206](matrix-org/matrix-react-sdk#9206)). Fixes element-hq/element-web#23111. Contributed by @justjanne.
* End jitsi call when member is banned ([\#8879](matrix-org/matrix-react-sdk#8879)). Contributed by @maheichyk.
* Fix context menu being opened when clicking message action bar buttons ([\#9200](matrix-org/matrix-react-sdk#9200)). Fixes element-hq/element-web#22279 and element-hq/element-web#23100.
* Add gap between checkbox and text in report dialog following the same pattern (8px) used in the gap between the two buttons. It fixes element-hq/element-web#23060 ([\#9195](matrix-org/matrix-react-sdk#9195)). Contributed by @gefgu.
* Fix url preview AXE and layout issue & add percy test ([\#9189](matrix-org/matrix-react-sdk#9189)). Fixes element-hq/element-web#23083.
* Wrap long space names ([\#9201](matrix-org/matrix-react-sdk#9201)). Fixes element-hq/element-web#23095.
* Attempt to fix `Failed to execute 'removeChild' on 'Node'` ([\#9196](matrix-org/matrix-react-sdk#9196)).
* Fix soft crash around space hierarchy changing between spaces ([\#9191](matrix-org/matrix-react-sdk#9191)). Fixes matrix-org/element-web-rageshakes#14613.
* Fix soft crash around room view store metrics ([\#9190](matrix-org/matrix-react-sdk#9190)). Fixes matrix-org/element-web-rageshakes#14361.
* Fix the same person appearing multiple times when searching for them. ([\#9177](matrix-org/matrix-react-sdk#9177)). Fixes element-hq/element-web#22851.
* Fix space panel subspace indentation going missing ([\#9167](matrix-org/matrix-react-sdk#9167)). Fixes element-hq/element-web#23049.
* Fix invisible power levels tile when showing hidden events ([\#9162](matrix-org/matrix-react-sdk#9162)). Fixes element-hq/element-web#23013.
* Space panel accessibility improvements ([\#9157](matrix-org/matrix-react-sdk#9157)). Fixes element-hq/element-web#22995.
* Fix inverted logic for showing UserWelcomeTop component ([\#9164](matrix-org/matrix-react-sdk#9164)). Fixes element-hq/element-web#23037.
su-ex added a commit to SchildiChat/element-web that referenced this issue Sep 1, 2022
@su-ex
Merge tag 'v1.11.4' into sc
167861c 
* Device manager - scroll to filtered list from security recommendations ([\element-hq#9227](matrix-org/matrix-react-sdk#9227)). Contributed by @kerryarchibald.
* Device manager - updated dropdown style in filtered device list ([\element-hq#9226](matrix-org/matrix-react-sdk#9226)). Contributed by @kerryarchibald.
* Device manager - device type and verification icons on device tile ([\element-hq#9197](matrix-org/matrix-react-sdk#9197)). Contributed by @kerryarchibald.
* Ignore unreads in low priority rooms in the space panel ([\element-hq#6518](matrix-org/matrix-react-sdk#6518)). Fixes element-hq#16836.
* Release message right-click context menu out of labs ([\element-hq#8613](matrix-org/matrix-react-sdk#8613)).
* Device manager - expandable session details in device list ([\element-hq#9188](matrix-org/matrix-react-sdk#9188)). Contributed by @kerryarchibald.
* Device manager - device list filtering ([\element-hq#9181](matrix-org/matrix-react-sdk#9181)). Contributed by @kerryarchibald.
* Device manager - add verification details to session details ([\element-hq#9187](matrix-org/matrix-react-sdk#9187)). Contributed by @kerryarchibald.
* Device manager - current session expandable details ([\element-hq#9185](matrix-org/matrix-react-sdk#9185)). Contributed by @kerryarchibald.
* Device manager - security recommendations section ([\element-hq#9179](matrix-org/matrix-react-sdk#9179)). Contributed by @kerryarchibald.
* The Welcome Home Screen: Return Button ([\element-hq#9089](matrix-org/matrix-react-sdk#9089)). Fixes element-hq#22917. Contributed by @justjanne.
* Device manager - label devices as inactive ([\element-hq#9175](matrix-org/matrix-react-sdk#9175)). Contributed by @kerryarchibald.
* Device manager - other sessions list ([\element-hq#9155](matrix-org/matrix-react-sdk#9155)). Contributed by @kerryarchibald.
* Implement MSC3846: Allowing widgets to access TURN servers ([\element-hq#9061](matrix-org/matrix-react-sdk#9061)).
* Allow widgets to send/receive to-device messages ([\element-hq#8885](matrix-org/matrix-react-sdk#8885)).
* Add super cool feature ([\element-hq#9222](matrix-org/matrix-react-sdk#9222)). Contributed by @gefgu.
* Make use of js-sdk roomNameGenerator to handle i18n for generated room names ([\element-hq#9209](matrix-org/matrix-react-sdk#9209)). Fixes element-hq#21369.
* Fix progress bar regression throughout the app ([\element-hq#9219](matrix-org/matrix-react-sdk#9219)). Fixes element-hq#23121.
* Reuse empty string & space string logic for event types in devtools ([\element-hq#9218](matrix-org/matrix-react-sdk#9218)). Fixes element-hq#23115.
* Reduce amount of requests done by the onboarding task list ([\element-hq#9194](matrix-org/matrix-react-sdk#9194)). Fixes element-hq#23085. Contributed by @justjanne.
* Avoid hardcoding branding in user onboarding ([\#9206](matrix-org/matrix-react-sdk#9206)). Fixes element-hq#23111. Contributed by @justjanne.
* End jitsi call when member is banned ([\element-hq#8879](matrix-org/matrix-react-sdk#8879)). Contributed by @maheichyk.
* Fix context menu being opened when clicking message action bar buttons ([\element-hq#9200](matrix-org/matrix-react-sdk#9200)). Fixes element-hq#22279 and element-hq#23100.
* Add gap between checkbox and text in report dialog following the same pattern (8px) used in the gap between the two buttons. It fixes element-hq#23060 ([\element-hq#9195](matrix-org/matrix-react-sdk#9195)). Contributed by @gefgu.
* Fix url preview AXE and layout issue & add percy test ([\element-hq#9189](matrix-org/matrix-react-sdk#9189)). Fixes element-hq#23083.
* Wrap long space names ([\element-hq#9201](matrix-org/matrix-react-sdk#9201)). Fixes element-hq#23095.
* Attempt to fix `Failed to execute 'removeChild' on 'Node'` ([\element-hq#9196](matrix-org/matrix-react-sdk#9196)).
* Fix soft crash around space hierarchy changing between spaces ([\element-hq#9191](matrix-org/matrix-react-sdk#9191)). Fixes matrix-org/element-web-rageshakes#14613.
* Fix soft crash around room view store metrics ([\element-hq#9190](matrix-org/matrix-react-sdk#9190)). Fixes matrix-org/element-web-rageshakes#14361.
* Fix the same person appearing multiple times when searching for them. ([\element-hq#9177](matrix-org/matrix-react-sdk#9177)). Fixes element-hq#22851.
* Fix space panel subspace indentation going missing ([\element-hq#9167](matrix-org/matrix-react-sdk#9167)). Fixes element-hq#23049.
* Fix invisible power levels tile when showing hidden events ([\element-hq#9162](matrix-org/matrix-react-sdk#9162)). Fixes element-hq#23013.
* Space panel accessibility improvements ([\element-hq#9157](matrix-org/matrix-react-sdk#9157)). Fixes element-hq#22995.
* Fix inverted logic for showing UserWelcomeTop component ([\element-hq#9164](matrix-org/matrix-react-sdk#9164)). Fixes element-hq#23037.
su-ex added a commit to SchildiChat/matrix-react-sdk that referenced this issue Sep 1, 2022
@su-ex
Merge tag 'v3.53.0' into sc
66ad3e0 
* Device manager - scroll to filtered list from security recommendations ([\matrix-org#9227](matrix-org#9227)). Contributed by @kerryarchibald.
* Device manager - updated dropdown style in filtered device list ([\matrix-org#9226](matrix-org#9226)). Contributed by @kerryarchibald.
* Device manager - device type and verification icons on device tile ([\matrix-org#9197](matrix-org#9197)). Contributed by @kerryarchibald.
* Ignore unreads in low priority rooms in the space panel ([\matrix-org#6518](matrix-org#6518)). Fixes element-hq/element-web#16836.
* Release message right-click context menu out of labs ([\matrix-org#8613](matrix-org#8613)).
* Device manager - expandable session details in device list ([\matrix-org#9188](matrix-org#9188)). Contributed by @kerryarchibald.
* Device manager - device list filtering ([\matrix-org#9181](matrix-org#9181)). Contributed by @kerryarchibald.
* Device manager - add verification details to session details ([\matrix-org#9187](matrix-org#9187)). Contributed by @kerryarchibald.
* Device manager - current session expandable details ([\matrix-org#9185](matrix-org#9185)). Contributed by @kerryarchibald.
* Device manager - security recommendations section ([\matrix-org#9179](matrix-org#9179)). Contributed by @kerryarchibald.
* The Welcome Home Screen: Return Button ([\matrix-org#9089](matrix-org#9089)). Fixes element-hq/element-web#22917. Contributed by @justjanne.
* Device manager - label devices as inactive ([\matrix-org#9175](matrix-org#9175)). Contributed by @kerryarchibald.
* Device manager - other sessions list ([\matrix-org#9155](matrix-org#9155)). Contributed by @kerryarchibald.
* Implement MSC3846: Allowing widgets to access TURN servers ([\matrix-org#9061](matrix-org#9061)).
* Allow widgets to send/receive to-device messages ([\matrix-org#8885](matrix-org#8885)).
* Add super cool feature ([\matrix-org#9222](matrix-org#9222)). Contributed by @gefgu.
* Make use of js-sdk roomNameGenerator to handle i18n for generated room names ([\matrix-org#9209](matrix-org#9209)). Fixes element-hq/element-web#21369.
* Fix progress bar regression throughout the app ([\matrix-org#9219](matrix-org#9219)). Fixes element-hq/element-web#23121.
* Reuse empty string & space string logic for event types in devtools ([\matrix-org#9218](matrix-org#9218)). Fixes element-hq/element-web#23115.
* Reduce amount of requests done by the onboarding task list ([\matrix-org#9194](matrix-org#9194)). Fixes element-hq/element-web#23085. Contributed by @justjanne.
* Avoid hardcoding branding in user onboarding ([\matrix-org#9206](matrix-org#9206)). Fixes element-hq/element-web#23111. Contributed by @justjanne.
* End jitsi call when member is banned ([\matrix-org#8879](matrix-org#8879)). Contributed by @maheichyk.
* Fix context menu being opened when clicking message action bar buttons ([\matrix-org#9200](matrix-org#9200)). Fixes element-hq/element-web#22279 and element-hq/element-web#23100.
* Add gap between checkbox and text in report dialog following the same pattern (8px) used in the gap between the two buttons. It fixes element-hq/element-web#23060 ([\matrix-org#9195](matrix-org#9195)). Contributed by @gefgu.
* Fix url preview AXE and layout issue & add percy test ([\matrix-org#9189](matrix-org#9189)). Fixes element-hq/element-web#23083.
* Wrap long space names ([\matrix-org#9201](matrix-org#9201)). Fixes element-hq/element-web#23095.
* Attempt to fix `Failed to execute 'removeChild' on 'Node'` ([\matrix-org#9196](matrix-org#9196)).
* Fix soft crash around space hierarchy changing between spaces ([\matrix-org#9191](matrix-org#9191)). Fixes matrix-org/element-web-rageshakes#14613.
* Fix soft crash around room view store metrics ([\matrix-org#9190](matrix-org#9190)). Fixes matrix-org/element-web-rageshakes#14361.
* Fix the same person appearing multiple times when searching for them. ([\matrix-org#9177](matrix-org#9177)). Fixes element-hq/element-web#22851.
* Fix space panel subspace indentation going missing ([\matrix-org#9167](matrix-org#9167)). Fixes element-hq/element-web#23049.
* Fix invisible power levels tile when showing hidden events ([\matrix-org#9162](matrix-org#9162)). Fixes element-hq/element-web#23013.
* Space panel accessibility improvements ([\matrix-org#9157](matrix-org#9157)). Fixes element-hq/element-web#22995.
* Fix inverted logic for showing UserWelcomeTop component ([\matrix-org#9164](matrix-org#9164)). Fixes element-hq/element-web#23037.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@t3chguy t3chguy

Labels
A11y A-Spaces Spaces, groups, communities O-Frequent Affects or can be seen by most users regularly or impacts most users' first experience S-Minor Impairs non-critical functionality or suitable workarounds exist T-Defect
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Space panel accessibility improvements matrix-org/matrix-react-sdk
3 participants
@ndarilek @turt2live @t3chguy