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.

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

Error show up when clicking clear button on q-select #17407

Closed
skgadi opened this issue Jul 31, 2024 · 2 comments
Closed

Error show up when clicking clear button on q-select #17407

skgadi opened this issue Jul 31, 2024 · 2 comments

Comments

@skgadi
Copy link

skgadi commented Jul 31, 2024

What happened?

In the q-select, if I open the list to chose the elements and click the clear icon, the following error appears in the console. However, it looks to work all like expected.

Blocked aria-hidden on a <i> 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. <i class=​"q-icon q-field__focusable-action" aria-hidden=​"true" role=​"button" tabindex=​"0" aria-label=​"Clear">​…​</i>​

What did you expect to happen?

I expect no error message when I press the clear button on q-select.

Reproduction URL

https://github.com/quasarframework/quasar/edit/dev/docs/src/pages/vue-components/select.md

How to reproduce?

  1. Go to the Quasar's website https://quasar.dev/vue-components/select#clearable on Chrome
  2. Scroll down to section 3.4 which has example of clearable
  3. Open the browser's Developer tools
  4. Click down arrow of the select element in the clearable
  5. Press clear icon to clear the content.
  6. You should be able to observe and error in the developer tools.

Screenshot 2024-07-31 095631
Screenshot 2024-07-31 095648

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

Chrome

Quasar info output

Operating System - Linux(5.15.0-116-generic) - linux/x64
NodeJs - 20.12.2

Global packages
  NPM - 10.8.0
  yarn - Not installed
  @quasar/cli - 2.4.1
  @quasar/icongenie - 4.0.0
  cordova - Not installed

Important local packages
  quasar - 2.16.4 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.9.3 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.11 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.27 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.3.2
  pinia - 2.1.7 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.9.18 -- Native-ESM powered web dev build tool
  eslint - 8.57.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  @electron/packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - switchgear
  ens160 - 192.168.20.27

Relevant log output

Blocked aria-hidden on a <i> 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.

Additional context

No response

Copy link

Hi @skgadi! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, StackBlitz, Codesandbox, and GitHub.
Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc.
Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

rstoenescu added a commit that referenced this issue Aug 1, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
@rstoenescu
Copy link
Member

Thank you for reporting.
Fix will be available in Quasar v2.16.7

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants