QInput clearable property breaks accessibility by default

[jannhama]

What happened?

If your form has QInput and you have set clearable property to true by default this adds icon button where you can clear the input content. However the way it does it (at least in material design) is that it creates: <i class="q-icon notranslate material-icons q-field__focusable-action" aria-hidden="false" tabindex="0" role="button" aria-label="Clear">cancel</i> element where aria-label is set to Clear while button content is named as cancel. This breaks A -level WCAG rules where button content and label should be the same.

What did you expect to happen?

Aria-label should be same as button content (title) to fill WCAG requirements or actual clear icon should be shown as an SVG element or instead of using just icon use real button tag for the button itself.

Reproduction URL

https://codepen.io/jannhama/pen/gbaWvRw?editors=1010

How to reproduce?

1. Go to the provided link and make sure you have content visible
2. Open debugger and check what tags are formed for the clear icon
3. You should see similar tag as provided above.

Flavour

Vite Plugin (@quasar/vite-plugin)

Areas

Accessibility [a11y] (quasar)

Platforms/Browsers

Chrome

Quasar info output

No Quasar info available: Quasar version is 2.18.2, node v22.14.0 and Vue version is 3.5.13

Relevant log output

Additional context

No response