Missing aria-hidden set false/true when dropdown show/hide
Lexachoc opened this issue · 6 comments
Describe the bug
warning message in console from Chrome:
Blocked aria-hidden on a element because the element that just received focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.
To Reproduce
This warning from Chrome is because I have make the input field within the dropdown focused when open the dropdown when using Chrome (after recent updates).
Open a dropdown and then click on the input field to focus it. The error is shown in the console. (can only occur with the new Chrome version)
Expected behavior
The arial-hidden attribute should be removed when dropdown showing and set true when hiding.
Desktop (please complete the following information):
-
OS: Win 10
-
Browser Chrome Version 127.0.6533.89 (Official Build) (64-bit)
-
Flowbite version: 2.5.1
The same error will appear in the console when using sidebar and input together.
@angelofan I replace the item in https://flowbite.com/docs/components/sidebar/#off-canvas-sidebar with an input field from https://flowbite.com/docs/forms/input-field/#input-fields.
But I didn't get the error in console. And in the source code:
https://github.com/themesberg/flowbite/blob/main/src/components/drawer/index.ts#L131
https://github.com/themesberg/flowbite/blob/main/src/components/drawer/index.ts#L179
It seems that the aria-hidden attribute is set and removed properly.
Do you have an example to reproducible the error of using the off canvas sidebar with input?
HTML code
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<title>Demo</title>
<link href="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.css" rel="stylesheet" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="relative font-sans antialiased bg-gray-100 dark:bg-gray-900 min-h-screen overflow-x-hidden">
<main class="px-4 pt-24 flex flex-col gap-4">
<div class="w-full max-w-screen-xl mx-auto bg-white dark:bg-gray-800 border-2 dark:border-gray-700 rounded-xl overflow-hidden">
<div class="mx-auto text-gray-800 dark:text-gray-100">
<div class="relative h-[calc(100vh-120px)]" x-data='{
search_user_popover_open: false,
}'>
<aside id="default-sidebar" class="h-full overflow-y-auto ez-scrollbar bg-gray-50 dark:bg-gray-900 absolute top-0 left-0 z-[38] w-64 transition-transform sm:translate-x-0 border-r dark:border-gray-700 -translate-x-full" aria-label="Sidebar" aria-hidden="true">
<div class="h-full px-3 flex flex-col">
<div class="sticky top-0 bg-gray-50 dark:bg-gray-900 border-b dark:border-gray-700 py-4">
<div class="flex items-center gap-1">
<div x-data="{
popoverArrow: false,
popoverPosition: 'bottom',
popoverHeight: 0,
popoverOffset: 8
}" class="w-full">
<div class="relative">
<div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="m21 21-3.5-3.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z"></path>
</svg>
</div>
<input type="search" id="search" x-model="search_user_text" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search" />
</div>
</div>
</div>
</div>
</div>
</aside>
<div class="relative h-full sm:ml-64 flex flex-col justify-between">
<div class="mx-4 mt-2 md:mt-4 flex items-center justify-between gap-2">
<div class="flex items-center gap-4">
<button data-drawer-target="default-sidebar" data-drawer-toggle="default-sidebar" aria-controls="default-sidebar" type="button" class="inline-flex items-center text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
<svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.js"></script>
</body>
</html>
Video of steps to reproduce
reproduce.mp4
@Lexachoc Rotating the phone screen will also display this error.
reproduce-1.mp4
@angelofan Thank you for the video! I see the problem now.
I think this is related to this PR #945
The same error will appear in the console when using sidebar and input together.
@zoltanszogyenyi Oh, I see you closed this issue. I will open a new issue and describe it in detail.