flowbite
flowbite copied to clipboard
Published
20 hours ago •
themesberg
themesberg
An aria-hidden warning message in console when using sidebar and input together.
Describe the bug When using the sidebar and input simultaneously, some actions will cause aria-hidden warning messages to appear in the console.
Blocked aria-hidden on a <input> 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 Steps to reproduce the behavior:
- Create an
index.htmlfile. - Copy and paste these codes into
index.html.
<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/[email protected]/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/[email protected]/dist/flowbite.min.js"></script>
</body>
</html>
- Open it in a browser.
- Open the debug console (F12).
- Switch the interface to mobile mode in the console.
- Click the "☰" button to show the sidebar.
- Focus on the input box.
- Click on the empty area of the sidebar to unfocus it.
- Click on the gray semi-transparent area outside the sidebar to hide the sidebar.
- Rotate the device. The sidebar will automatically show up due to the change in the screen breakpoint.
- Focus on the input box again.
- The console will show a warning.
Video of steps to reproduce:
https://github.com/user-attachments/assets/ce9c62dd-aafe-4573-a386-5dddc1353f18
Expected behavior The console should remain clean and this warning should not be displayed.
Screenshots
Additional context Some previous description of the problem is at:
- https://github.com/themesberg/flowbite/issues/943#issuecomment-2274967284
- https://github.com/themesberg/flowbite/pull/945#issuecomment-2278151146
