Giters

bootstrap-vue / bootstrap-vue

BootstrapVue provides one of the most comprehensive implementations of Bootstrap v4 for Vue.js. With extensive and automated WAI-ARIA accessibility markup.

Home Page:https://bootstrap-vue.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Accessibility issue when pagination link is disabled

bishalpaudel opened this issue · comments

commented

When one of the pagination link is disabled (for example, Prev button), accessibility fails saying: Certain ARIA roles must contain particular children

Each child inside role="menubar" must contain the child roles (like menuitem or menuitemradio). This condition is satisfied by all elements (all li contains either menuitem or menitemradio). The issue arises when some of the links are disabled (for example, the prev and next buttons are disabled when there is only one page in pagination), causing aria-hidden="true", and thus removes all elements inside it from the aria-tree, and thus removing role="menuitem" from the disabled pagination links, which fails the requirement of Certain ARIA roles must contain particular children.
I am using Axe DevTools with WCAG2.1AA as WCAG level.

Versions

Libraries:

  • WCAG level: WCAG2.1AA
  • Axe DevTools: 4.x
  • Vue: 2.#.#

Environment:

  • OS: [macOS Monterey]
  • Browser: [Chrome]
  • Version: [112]

Demo link

Screenshot: https://pasteboard.co/vNme2OWn4Pdv.png