Accessibility - Default Menu Items break Aria rules

[Ghada El-Zoghbi]

Mahara: 19.04.0
OS: Linux 16.04
DB: Postgres
Browser: Chome Version 75.0.3770.100 (Official Build) (64-bit)

* Install WCAG Accessibility Audit Developer UI Chrome extension

* Using the Default Mahara theme.

* Run the Access Audit Report. Several errors are highlighted by the WCAG report for the drop-down menu:

* On the Dashboard page:

There are 4 fail-rules:
This implies that there were elements on the page that did not pass this audit rule. This is the only result you will probably be interested in.

2 Severe:
Elements with ARIA roles must use a valid, non-abstract ARIA role
https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_01
3 elements break this rule:

id("main-nav")
id("main-nav-admin")
id("main-nav-user")
Elements with ARIA roles must ensure required owned elements are present
https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_08
12 elements break this rule:

id("childmenu-1")
id("childmenu-2")
id("childmenu-3")
id("childmenu-4")
id("adminchildmenu-0")
id("adminchildmenu-1")
id("adminchildmenu-2")
id("adminchildmenu-3")
id("adminchildmenu-4")
id("adminchildmenu-6")
id("adminchildmenu-7")
id("userchildmenu-8")

* On the Pages and Collections, there are more elements:

2 Severe:
Elements with ARIA roles must use a valid, non-abstract ARIA role
https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_01
3 elements break this rule:

id("main-nav")
id("main-nav-admin")
id("main-nav-user")
Elements with ARIA roles must ensure required owned elements are present
https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_08
27 elements break this rule:

id("childmenu-1")
id("childmenu-2")
id("childmenu-3")
id("childmenu-4")
id("adminchildmenu-0")
id("adminchildmenu-1")
id("adminchildmenu-2")
id("adminchildmenu-3")
id("adminchildmenu-4")
id("adminchildmenu-6")
id("adminchildmenu-7")
id("userchildmenu-8")
id("myviews")/div[@class="card-quarter card-view"]/div[@class="card "]/div[@class="card-footer"]/div[@class="page-access"]/ul[@class="dropdown-menu"]
id("myviews")/div[@class="card-quarter card-view"]/div[@class="card "]/div[@class="card-footer"]/div[@class="page-controls"]/ul[@class="dropdown-menu dropdown-menu-right"]
id("myviews")/div[@class="card-quarter card-collection"]/div[@class="card "]/div[@class="card-footer"]/div[@class="page-access"]/ul[@class="dropdown-menu"]
id("myviews")/div[@class="card-quarter card-collection"]/div[@class="card "]/div[@class="card-footer"]/div[@class="page-controls"]/ul[@class="dropdown-menu dropdown-menu-right"]
id("myviews")/div[@class="card-quarter card-collection"]/div[@class="card "]/div[@class="card-footer"]/div[@class="collection-list"]/ul[@class="dropdown-menu"]
id("myviews")/div[@class="card-quarter card-view"]/div[@class="card "]/div[@class="card-footer"]/div[@class="page-access"]/ul[@class="dropdown-menu"]
id("myviews")/div[@class="card-quarter card-view"]/div[@class="card "]/div[@class="card-footer"]/div[@class="page-controls"]/ul[@class="dropdown-menu dropdown-menu-right"]
id("myviews")/div[@class="card-quarter card-view"]/div[@class="card "]/div[@class="card-footer"]/div[@class="page-access"]/ul[@class="dropdown-menu"]
id("myviews")/div[@class="card-quarter card-view"]/div[@class="card "]/div[@class="card-footer"]/div[@class="page-controls"]/ul[@class="dropdown-menu dropdown-menu-right"]
id("myviews")/div[@class="card-quarter card-collection"]/div[@class="card "]/div[@class="card-footer"]/div[@class="page-access"]/ul[@class="dropdown-menu"]
id("myviews")/div[@class="card-quarter card-collection"]/div[@class="card "]/div[@class="card-footer"]/div[@class="page-controls"]/ul[@class="dropdown-menu dropdown-menu-right"]
id("myviews")/div[@class="card-quarter card-collection"]/div[@class="card "]/div[@class="card-footer"]/div[@class="collection-list"]/ul[@class="dropdown-menu"]
id("myviews")/div[@class="card-quarter card-view"]/div[@class="card "]/div[@class="card-footer"]/div[@class="page-controls"]/ul[@class="dropdown-menu dropdown-menu-right"]
id("myviews")/div[@class="card-quarter card-view"]/div[@class="card "]/div[@class="card-footer"]/div[@class="page-access"]/ul[@class="dropdown-menu"]
id("myviews")/div[@class="card-quarter card-view"]/div[@class="card "]/div[@class="card-footer"]/div[@class="page-controls"]/ul[@class="dropdown-menu dropdown-menu-right"]

There are also several warnings that I'm not listing here.

* On a portfolio page with journals and several variations of headings (H4-H6): (see attached image)

There are 6 fail-rules:
This implies that there were elements on the page that did not pass this audit rule. This is the only result you will probably be interested in.

4 Severe:
ARIA state and property values must be valid
https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_04
1 element breaks this rule:

id("collectionbtns")/nav[@class="custom-dropdown dropdown"]/span[@class="picker form-control AccessAudit18 AccessAudit5"]
Elements with ARIA roles must use a valid, non-abstract ARIA role
https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_01
3 elements break this rule:

id("main-nav")
id("main-nav-admin")
id("main-nav-user")
ARIA attributes which refer to other elements by ID should refer to elements which exist in the DOM
https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_02
1 element breaks this rule:

id("collectionbtns")/nav[@class="custom-dropdown dropdown"]/span[@class="picker form-control AccessAudit18 AccessAudit5"]
Elements with ARIA roles must ensure required owned elements are present
https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_08
6 elements break this rule:

id("childmenu-1")
id("childmenu-2")
id("childmenu-3")
id("childmenu-4")
id("userchildmenu-0")
id("pageheader-column-container")/div[@class="pageactions"]/div[@class="btn-group-vertical"]/ul[@class="dropdown-menu dropdown-menu-right AccessAudit21"]