Ensuring a drop-down selection box has keyboard access to fix axe violation(WCAG) - js

Question

So running Axe (Web accessibility tool) on my web page produces a violation:

Elements that have scrollable content should be accessible by keyboard https://dequeuniversity.com/rules/axe/3.3/scrollable-region-focusable?application=AxeChrome

The link states that in order to fix it, the element should have focusable content or should be focusable. I can navigate to it by tabbing, however I am unable to expand the drop-down pressing the enter key. (Expands by pressing the up key)

How can i fix this so that my drop-down list can be expanded / triggered by pressing the enter key (assuming this is what will fix this error?)

My js code:

self.filterFields.forEach(x => {
                var titleDep = $('th[data-field="' + x + '"]');
                if (titleDep.find('select').length === 0 && self.foreignKeyData[x]) {
                    titleDep.append('<select aria-label="Filter ' + x + ' to show" multiple data-live-search="true" data-actions-box="true" tabindex="0" data-size="10"></select>');
                }
            });

            self.stringFilters.forEach(x => {
                var titleDep = $('th[data-field="' + x + '"]');
                if (titleDep.find('select').length === 0 && self.stringFilterValues[x]) {
                    titleDep.append('<select aria-label="Filter ' + x + ' to show" multiple data-live-search="true" data-actions-box="true" tabindex="0" data-size="10"></select>');     
                }
            });

I have tried fixing it by adding in

                titleDep.find('input').attr({ "tabindex": "0" });
                titleDep.find('input').attr({ "tabindex": 0 });

as well as focusable="true" and autofocus into the append statement but this doesn't work either.

However this doesn't seem to get me any closer to the solution. Any help would be appreciated.

Cheers

Answer 1

The error aXe is giving you is because there's a tabindex of -92 on the select element. So you'd want to find out where that is coming from. <select> elements should be tabbable by default with no need to add an explicit tabindex. Anything with a negative tabindex is not keyboard accessible by definition. See https://stackoverflow.com/a/32912224/3010362 for a good discussion of how tabindex works. I can't tell from what you've provided what other code might be modifying the tabindex.