search

kartik-v / yii2-tabs-x

Extended bootstrap tabbed navigation widget for Yii 2.0 with various alignment and styling options.
Other
30 stars 17 forks source link

Axe DevTools reports accessibility issues with Kartik tabs #81

Closed smohadjer closed 1 year ago

smohadjer commented 1 year ago

The aria role="tab" attribute should be set on list item and not on anchor element, because list item is the direct child of ul element which has the role="tablist" attribute and not the anchor elements. This causes several accessibility issues which are reported by Axe DevTools.

kartik-v commented 1 year ago

Thanks for the report. Can you submit a PR for this enhancement?

smohadjer commented 1 year ago

Hi @kartik-v,

Unfortunately moving role="tab" from anchors to list items caused new accessibility issues to appear since an element that is defined as a tab via aria should not have a focusable element like a link inside it. Also we have some other aria attributes on anchor elements that also need to be moved to list item if we move role attribute away from the anchors. After some researching I realized the easiest solution is to add a role="presentation" to list item so assistive technologies understand that this element has no accessibility semantics. This change stopped axe DevTools from showing accessibility issues with my tabs. I have opened a PR here: https://github.com/kartik-v/yii2-tabs-x/pull/83

kartik-v commented 1 year ago

Merged #83.

smohadjer commented 1 year ago

@kartik-v Would you release a new version so we can pick up this fix in our project via composer?

smohadjer commented 1 year ago

@kartik-v Is there any release schedule? I wonder how long we need to wait to pick up this fix.

kartik-v commented 1 year ago

will release it shortly.... missed this.