Element with role button contains an element that is not allowed

[blackfalcon]

Please verify the version of auro-datepicker you have installed

@latest

Rule description

One or more elements that has a role='button' attribute, not intentionally hidden in the DOM, contained one or more input elements (without an assigned ARIA role and not type=hidden), select elements (without an assigned ARIA role), textarea elements (without an assigned ARIA role) or A elements (without an assigned ARIA role).

Severity

Critical

WCAG Success criteria

4.1.2 Name, Role, Value - Level A

Why it matters

When elements with <code>role="button"</code> contain interactive elements, additional items may be appear in the focus order and the accessible name for an element may not be calculated correctly. This will cause users of screen reader who are blind or low vision to experience keyboard related access or may prevent the accessible name from being correctly communicated to these users preventing them from understanding the purpose of the control.

What to do

Avoid interactive elements within elements with <code>role="button"</code>. If two interactive elements are needed place them as siblings or in another structure that does not create an invalid structure.

Reproducing the error

This issue cannot be reproduced on the Auro docsite

Expected behavior

No accessibility error with role="button" use.

What browsers are you seeing the problem on?

No response

Additional context

LevelAccess issue https://alaskaair.hub.essentia11y.com/projects/6578ac73f0e9336405bfe140/tasks/6598ce4cf8acb247de0998dc?linkedPropertyData=652813da6eec28e13de119c4%7C652813da6eec28ef1ee119bd

Exit criteria

This issue can be closed once the error has been addressed and a LevelAccess scan indicates that the issue has been resolved.

Please be sure to include a screen shot of the scan with the pull request.