Accessibility issue when pagination link is disabled

[bishalpaudel]

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