mahara-contributors team mailing list archive

Thread
Date
[Bug 1835851] [NEW] Accessibility - Default Menu Items break Aria rules

To: mahara-contributors@xxxxxxxxxxxxxxxxxxx
From: Ghada El-Zoghbi <ghada@xxxxxxxxxxxxxxx>
Date: Tue, 09 Jul 2019 02:40:57 -0000
Reply-to: Bug 1835851 <1835851@xxxxxxxxxxxxxxxxxx>
Sender: bounces@xxxxxxxxxxxxx
Public bug reported:

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"]

** Affects: mahara
     Importance: Undecided
         Status: New

** Attachment added: "aria_default_theme_errors.jpg"
   https://bugs.launchpad.net/bugs/1835851/+attachment/5275743/+files/aria_default_theme_errors.jpg

-- 
You received this bug notification because you are a member of Mahara
Contributors, which is subscribed to Mahara.
Matching subscriptions: Subscription for all Mahara Contributors -- please ask on #mahara-dev or mahara.org forum before editing or unsubscribing it!
https://bugs.launchpad.net/bugs/1835851

Title:
  Accessibility - Default Menu Items break Aria rules

Status in Mahara:
  New

Bug description:
  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"]

To manage notifications about this bug go to:
https://bugs.launchpad.net/mahara/+bug/1835851/+subscriptions
Follow ups

[Bug 1835851] Re: Accessibility - Default Menu Items break Aria rules
From: Kristina Hoeppner, 2019-09-08