Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessibility warning on role="listbox" #1

Open
gunzip opened this issue Aug 5, 2016 · 1 comment
Open

Accessibility warning on role="listbox" #1

gunzip opened this issue Aug 5, 2016 · 1 comment

Comments

@gunzip
Copy link

gunzip commented Aug 5, 2016

get the following warning from aXe tool:

[Severe] Elements with ARIA roles must ensure required owned elements are present (1)
See AX_ARIA_08 for more information.
<div class=​"owl-carousel owl-theme owl-loaded owl-drag" role=​"listbox" id=​"carousel-1" tabindex=​"0" data-owl-access-keyup=​"1" data-owl-carousel-focusable=​"1">​…​</div>​

@Seika85
Copy link

Seika85 commented Apr 26, 2017

An element with role="listbox" requires its children to have role="option" per definition. The problem is that the child element is the outer-stage and not the owl-items.
I think one would need add role="listbox" to the stage and not to the owl-carousel wrapper.

This could be accomplished by changing the following:

  Owl2A11y.prototype.setupRoot = function() {
//    this.$element.attr({
//      role: 'listbox',
//      tabindex: '0'
//    });

    this._core.$stage.attr({
      role: 'listbox',
      tabindex: '0'
    });
    this._core.$stage.children().each(function() {
      var item = $(this);
      item.attr({
        role: 'option',
      });
    });
  };

But maybe someone with more expertise in the field of accessibility can look over that?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants