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

An aria-hidden warning message in console when using sidebar and input together. #946

Open
angelofan opened this issue Aug 12, 2024 · 0 comments
Open

An aria-hidden warning message in console when using sidebar and input together. #946

angelofan opened this issue Aug 12, 2024 · 0 comments

Comments

@angelofan
Copy link

angelofan commented Aug 12, 2024 •
edited
Loading

Describe the bug
When using the sidebar and input simultaneously, some actions will cause aria-hidden warning messages to appear in the console.

image

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:

  1. Create an index.html file.
  2. 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>
  1. Open it in a browser.
  2. Open the debug console (F12).
  3. Switch the interface to mobile mode in the console.
  4. Click the "☰" button to show the sidebar.
  5. Focus on the input box.
  6. Click on the empty area of ​​the sidebar to unfocus it.
  7. Click on the gray semi-transparent area outside the sidebar to hide the sidebar.
  8. Rotate the device. The sidebar will automatically show up due to the change in the screen breakpoint.
  9. Focus on the input box again.
  10. The console will show a warning.

Video of steps to reproduce:

Video.of.steps.to.reproduce.mp4

Expected behavior
The console should remain clean and this warning should not be displayed.

Screenshots
image

Additional context
Some previous description of the problem is at:
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@angelofan