[Bug Report][3.4.7] VPagination ARIA attributes on buttons do not render correctly #18885
Comments
|
What am I supposed to do with the repository to reproduce the issue? |
|
I have updated the repo with a bit more information, documenting HTML behavior, JS behavior, and better outlining current and expected behaviors. Since it seems like the browser does some magic to cover up the issue, I'm not sure how to reproduce without staying in a test environment. If direct Vue HTML generation is needed to "prove" the issue, I'll try to find a way. I'm not familiar enough to know other ways of demonstrating the issue. |
|
@KaelWD Is this a non-issue? |
|
I do not see any other instances of an ARIA attribute being used in a camelCase style. Everything I've seen in kebab-case, such as
|
|
maybe unit test can help to check this issue? At least I think so |
|
A single search returned this: |
|
I just threw together a test quick over lunch w/ VWindow, appears to behave similarly to VPagination. I will add tests to the reproduction repo. describe('VWindow', () => {
it('renders with arialabel', () => {
render(VWindow, {
global: {
plugins: [vuetify]
},
props: {
showArrows: true
}
})
screen.debug()
})
})<body>
<div>
<div
class="v-window v-theme--light"
>
<div
class="v-window__container"
>
<div
class="v-window__controls"
>
<button
arialabel="Previous visual"
class="v-btn v-btn--elevated v-btn--icon v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-elevated v-window__left"
type="button"
>
<span
class="v-btn__overlay"
/>
<span
class="v-btn__underlay"
/>
<span
class="v-btn__content"
data-no-activator=""
>
<i
aria-hidden="true"
class="mdi-chevron-left mdi v-icon notranslate v-theme--light v-icon--size-default"
/>
</span>
</button>
<div />
</div>
</div>
</div>
</div>
</body> |
KaelWD
added
T: bug
Environment
Vuetify Version: 3.4.7
Vue Version: 3.3.11
Browsers: Chrome 119.0.0.0
OS: Mac OS 10.15.7
Steps to reproduce
Use a VPagination component, view the generated HTML (without browser interference)
Expected Behavior
buttons in a VPagination have
aria-labelandaria-disabledattributesActual Behavior
buttons in a VPagination do not have
aria-labelandaria-disabledattributes, but insteadarialabelandariadisabledattributesReproduction Link
https://github.com/tahornback/vuetify-vpagination-issue
Other comments
I discovered this when working with VDataTable, which was converted to using VPagination in 3.4.2.
The text was updated successfully, but these errors were encountered: