Aria-selected is not updating correctly on dot or slide arrow navigation
See original GitHub issueupdateDots
is executing, but changes to _.$dots
are not occurring (expanding accessibility and correcting dots roles)
Demo: https://jsfiddle.net/b5bqk68j/29/
Steps to reproduce the problem
Code changes:
Line 1300 - change role
to tab
(selected state is not recognized unless child elements of tablist
have role of tab
_.$dots.attr('role', 'tablist').find('li').each(function(i) {
$(this).attr({
'role': 'tab',
'aria-selected': 'false',
'aria-controls': 'navigation' + _.instanceUid + i + '',
'id': 'slick-slide' + _.instanceUid + i + ''
});
})
Line 2836 - added aria-selected
changes:
Slick.prototype.updateDots = function() {
var _ = this;
if (_.$dots !== null) {
_.$dots
.find('li')
.removeClass('slick-active')
.attr('aria-hidden','true')
.attr('aria-selected', 'false');
_.$dots
.find('li')
.eq(Math.floor(_.currentSlide / _.options.slidesToScroll))
.addClass('slick-active')
.attr('aria-hidden','false')
.attr('aria-selected', 'true');
}
};
====================================================================
What is the expected behaviour?
aria-selected="true"
should be applied appropriately to the active dot
====================================================================
What is observed behaviour?
aria-selected="true"
sticks on the first dot li
and does not update with updateDots
.
Additionally, aria-selected does not update on arrow navigation.
====================================================================
More Details
- all browsers
- multiple screenreaders
- v1.6.0
Issue Analytics
- State:
- Created 7 years ago
- Comments:7
Top Results From Across the Web
ROLE values not valid and ARIA attribute mismatch in Slider ...
So, little update: It seems the team has solved the role=section attribute error, however the other two errors are still present, both related ......
Read more >WAI-ARIA Best Practices - W3C
Abstract. This document specifies Best Practices for delivering accessible rich internet applications using WAI-ARIA [ ARIA ].
Read more >Slide 9: Updating Global Attributes - Accessible IT Group
For example, a presentation slide editor uses arrow keys to change the positions of textbox and image elements on the slide. There are...
Read more >(Not so) Simple ARIA Tree Views and Screen Readers | Articles
It does not move through the tree nodes. Instead, using the arrow keys to select or expand/collapse a node updates the nodes' aria-selected...
Read more >Change the Arrow buttons in Slick slider - Stack Overflow
I want the next and previous button as an image. I have tried putting it in a <style> but it still not working....
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Here’s the link: https://github.com/kenwheeler/slick/pull/2708
I ended up correcting the code and improving accessibility overall. Look for my open pull request.
On Feb 7, 2017 6:58 PM, “A.C” notifications@github.com wrote: