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.

Aria-selected is not updating correctly on dot or slide arrow navigation

See original GitHub issue

updateDots 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:open
  • Created 7 years ago
  • Comments:7

github_iconTop GitHub Comments

2reactions
jasondaycommented, Feb 8, 2017
1reaction
jasondaycommented, Feb 8, 2017

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:

Is this issue be fixed, I’ve found the same issue which slick always set the first item in the pips to be aria-select = “true” and not updating correctly

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/kenwheeler/slick/issues/2706#issuecomment-278184667, or mute the thread https://github.com/notifications/unsubscribe-auth/AAtp6yr36SIOnT4IumjgnJwORcnhzBqgks5raQU2gaJpZM4LmFTc .

Read more comments on GitHub >

github_iconTop 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 >

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