search

Automattic / sensei

Sensei LMS - Online Courses, Quizzes, & Learning
https://senseilms.com
GNU General Public License v2.0
532 stars 197 forks source link

Combobox in module & order module screen not accessible with assistive technology #2801

Open digitala11y opened 4 years ago

digitala11y commented 4 years ago

The combobox presented in the add module screen is not accessible to screen reader users. When screen reader moves into the courses are not announced by NVDA or JAWS screen reader on any browser [chrome & firefox]

Inspecting the code gives this output

<span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="-1" aria-owns="select2-module_courses-results"><ul class="select2-selection__rendered"><li class="select2-search select2-search--inline"><input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="Search for courses..." style="width: 298px;"></li></ul></span>

It looks like necessary ARIA roles, states & properties are not provided for the widget to work as expected. Tabindex-1 Iis not allowing the screen reader to enter the combobox.

The same bug also exists in order modules screen. The combobox is not operable with screen rreader. The same bug also exists in Add lesson page where we cannot select course or module from the combobox.

digitala11y commented 4 years ago

Am a blind person & i tried providing the code of the combobox but i see it did not materialize. let me know how i can contribute to fixing this issue.

donnapep commented 4 years ago

@digitala11y Thanks for the report! If you already have a solution, please feel free to submit a PR and we will be happy to put it into the next release!