Question about Vuejs and disabled links
I'm currently doing an ADA assessment on a project that is failing on their disabled links because the html rendered is
<a disabled="disable"> instead of <a disabled>
As far as I can tell, this is how Vuejs renders it because even if I change the <a v-bind:disabled="disabledValue"> to just hard code the <a disabled> Vuejs still seems to change it to <a disabled="disable">
Does anyone know if this is just how Vuejs handles its boolean attributes and if so is there a way around it? I've never used Vuejs before so I'm assuming I'm just missing something.25 Replies
have you tried to set
disabledValue to an empty string or null?
disabled="" should be the exact same as disabled, so, if you can output an empty string then that might be enoughPer ADA compliance, it needs to use the boolean attribute of
disableddisabled and disabled="" is the exact same@Scott Borrowman I think for something this specific, you might want to try at the Vue.js server directly.
https://discord.gg/vue
If you find out, please ping me as I'd like to know this as well 😄
by the way, which compliance tester are you using?
Thanks! Though, it looks like the issue I'm trying to fix needs something different. I need the screen reader to announce that it's disabled and I read that it won't announce
disabled="disable" but after more research it seems it only might announce disabled
What I need to make sure it's announced is aria-disabled="true"
ADA is fun.... hah!that's weird, but makes some sense
wait, why are you trying to disable a link?
and a link without an href at that...
i dont think that a link even has a
disabled attributeThe site is using anchors for previous and next buttons in their pagination instead of buttons. I'm just trying to fix some of their ADA fails without rebuilding the whole site. And they are using the old
<a href="#">can't you change it to
<button>?
with a tiny bit of css, and a touch in js, it should work"Should" work. They are using this pagination in multiple locations with different css and javascipt for each one. Changing the html could lead to breaking something somewhere without me knowing it
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled <-- links don't support the attribute, btw
They do support the
aria-disable="true" howeverwhich does nothing
that is, the link is still enabled
It makes the screen reader anounce that it's disable. Which is what I am trying to accomplish.
and the disabling of the link is working?
Yes, because they are using javascript to handle the click event
and the link is styled differently when disabled?
Yup. The link itself is working the way they need but right now nothing tells the screen reader that it's disabled
then yeah, aria-disabled is the way to go
Yup. That is the bandaid fix until I can convince the client they need a new site with code that isn't 10 years old 😆
that's actually the permanent solution, if you use links
"you"
but shhh, don't say that
If I were to build this from scratch, I definitely would use buttons instead of links. And I, personally, wouldn't use Vue for pagination
i've never used vue, so, can't comment on that part
Ya, I've never used it either. Definitely seems weird that it changes
disabled to disabled="disabled" thoughthat's probably for html4 compatibility, where attributes must have a value