question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Feature Request] V-slider a11y: readonly is always set to true and aria-readonly is present which isn't allowed by specs

See original GitHub issue

Problem to solve

https://codepen.io/lol2x/pen/oMMmdx Only the second slider have readonly prop set to true, however the HTML generated is always with readonly=“readonly”. What is more aria-readonly attribute should only be used for elements that are not allowed to have a readonly attribute in HTML5 - according to spec https://www.w3.org/TR/html-aria/

Proposed solution

The presence of HTML readonly prop should be based on readonly prop from Vuetify readonly: String(this.readonly) and https://github.com/vuetifyjs/vuetify/blob/dev/src/components/VSlider/VSlider.js#L253 should be removed I can create PR if you want this changes.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:6 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
KaelWDcommented, Aug 9, 2018

So it’s a a “muh spec” thing. If this doesn’t actually cause real problems then we’ll leave it as it is, your suggested change would result in incorrect behaviour.

0reactions
lol2xcommented, Aug 9, 2018

Yup, also adding

aria-valuemin
aria-valuemax
aria-valuenow
aria-valuetext

could be then considered

Read more comments on GitHub >

github_iconTop Results From Across the Web

aria-readonly - Accessibility - MDN Web Docs
When aria-readonly is set to true , it means the user can read but not set the value of the widget. Read-only elements...
Read more >
6. Supported States and Properties - W3C
The "undefined" value, when allowed on a state or property, is an explicit indication that the state or property is not set. The...
Read more >
WAI-ARIA: aria-readonly (Property) - DigitalA11Y
This means the user can read but not set the value of the widget. Readonly elements are relevant to the user, and application...
Read more >
lightning-input - documentation - Salesforce Developers
The label attribute is required. If you don't want to display a label, specify the variant="label-hidden" attribute. See Accessibility for more information.
Read more >
Using WAI-ARIA in HTML
HTML language feature Default ARIA semantics Should authors explicitly define default AR... All elements varies varies a element with a href role=link NO address NONE N/A...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found