eureka2 / ab-datepicker

An accessible and bootstrap compatible datepicker
MIT License
63 stars 55 forks source link

Accessibility: Required ARIA attribute not present: aria-level #54

Open ambrosew opened 4 years ago

ambrosew commented 4 years ago

The datepicker month button has role="heading" but missing aria-level attribute. Either set role="button", or provide an option for setting aria-level, default to 1.

Title: WCAG 4.1.1,WCAG 4.1.2: Ensures elements with ARIA roles have all required ARIA attributes (#datepicker-month-date)
Tags: Accessibility, WCAG 4.1.1, WCAG 4.1.2, aria-required-attr

Issue: Ensures elements with ARIA roles have all required ARIA attributes (aria-required-attr - https://dequeuniversity.com/rules/axe/3.3/aria-required-attr?application=msftAI)

Target application: ab-datepicker - https://codepen.io/ambrosew/pen/PowKVZY

Element path: #iFrameKey-fe0f5c36-704c-05f4-e5ec-df87191795b4;#datepicker-month-date

Snippet: <div id="datepicker-month-date" class="datepicker-button datepicker-month" tabindex="0" role="heading" aria-live="assertive" aria-atomic="true" title="Click or press the Enter key or the spacebar to change the month">January 2020</div>

How to fix: 
Fix any of the following:
  Required ARIA attribute not present: aria-level

Environment: Chrome version 79.0.3945.117

====

This accessibility issue was found using Accessibility Insights for Web 2.13.1 (axe-core 3.3.2), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.