Page MenuHomePhabricator

ARIA hidden element must not contain focusable elements
Closed, ResolvedPublicBUG REPORT

Assigned To
None
Authored By
Wyslijp16
Jul 7 2023, 7:31 PM
Referenced Files
F37136873: logged-out.png
Jul 12 2023, 11:51 AM
F37136871: logged-in.png
Jul 12 2023, 11:51 AM
F37136792: image.png
Jul 12 2023, 9:53 AM
F37136790: image.png
Jul 12 2023, 9:53 AM
F37136787: image.png
Jul 12 2023, 9:53 AM

Description

Steps to replicate the issue (include links if applicable):

What happens?:
An error/warning is reported by the browser in the Accessibility section :

ARIA hidden element must not contain focusable elements
Affected ressource : <div class="vector-sticky-header-end" aria-hidden="true">
How to Fix the Problem : https://dequeuniversity.com/rules/axe/4.4/aria-hidden-focus

What should have happened instead?:
Nothing. The browser should not report any bugs.

Software version (skip for WMF-hosted wikis like Wikipedia): WMF-hosted wiki (French Wikinews)

Other information (browser name/version, screenshots, etc.):
System : Windows 10
Browser : Edge 114.0.1823.67
I'm only passing on what the browser says, but the problem is probably in the site code.
Thanks @CCiufo-WMF for helping me with the tags ! <3

Event Timeline

the only warnings I get on edge version Edge 114.0.1823.67, I could not test the same version on windows I only got to check it on macos.

[Intervention] Images loaded lazily and replaced with placeholders. Load events are deferred. See https://go.microsoft.com/fwlink/?linkid=2048113

and

VM138:1  This page is using the deprecated ResourceLoader module "mediawiki.ui".
Please use OOUI instead.

I agree that Nothing. The browser should not report any bugs. but the deprecation warning is to drive wikis to use the newest api's.

and for macos we need to look into the lazy loading one as well.

Hi @Mabualruz !

For the "Images loadad lazily..." problem : T341480
For the "Please use OOUI instead." problem : T258196

You didn't see the problem because you're looking directly to the Console, don't forget to go to Issues :

image.png (944×733 px, 40 KB)

image.png (267×738 px, 30 KB)

image.png (254×737 px, 21 KB)

this is what I get on macos
logged in

logged-in.png (1×3 px, 417 KB)

logged out

logged-out.png (1×3 px, 418 KB)

this is what I get on macos
logged in

logged-in.png (1×3 px, 417 KB)

logged out

logged-out.png (1×3 px, 418 KB)

Try going to an article (for example this : Réélection écrasante de Shavkat Mirziyoyev à la présidence de l'Ouzbékistan). If it don't show the message, try refreshing or waiting 15/20 seconds.

Still the same, if someone have a browser stack account that can check this across operating systems.

LGoto triaged this task as Low priority.Jul 13 2023, 5:11 PM
LGoto moved this task from Incoming to Groomed on the Web-Team-Backlog board.

This is due to the user menu in the sticky header, the links are focusable currently. We should apply tabindex="-1" to the links to fix this

I believe this is now fixed, tabindex="-1" is now applied to the user menu dropdown toggle and i dont see these errors in the browser