Opened 7 years ago

Closed 7 years ago

Last modified 4 years ago

#16140 closed defect (fixed)

[PATCH][CCLA] dijit.Editor - add accessibility features to Editor's iframe

Reported by: mikeb Owned by: bill
Priority: undecided Milestone: 1.8.4
Component: Editor Version: 1.8.0
Keywords: Cc: Douglas Hays
Blocked By: Blocking:

Description

We have been finding some accessibility violations being generated from Dijit.Editor, specifically from the <iframe> that the Editor uses.

The patch fixes these errors:

  1. Html element must have lang and/or xml:lang attribute that conforms to BCP: 47.

Notes: This is because the <html> element inside the <iframe> document does not have a lang attribute. Fix: Around line 592 of _editor/RichText, when creating the iframe, use this.lang to use the parent documents' lang. I cannot get this to work for programmatically created Editors...

  1. The page must provide a link to skip directly to the main page content as the first link on each page or use WAI-ARIA landmarks.

Notes: This is because the <body> element inside the <iframe> does not contain role="main" Fix: Add role="main" to the iframe's body

  1. There must be a non-empty title element in the head of the document.

Notes: This is because the <head> element of the <iframe>'s document sometimes doesn't have <title> attribute. There is code in here around line 593 to get the title from a <label> element that matches the Editor's ID. This makes sense and works, except that users can set the label with aria-label OR aria-labelledby attributes. I edited this code to use the content of the <label> first, then aria-label, then the content of whatever is pointed to by aria-labelledby. Also I removed the has(mozilla) check because the <title> should be there for all browsers.

  1. Frames and IFrames must have a non-empty title attribute.

Notes: From WCAG 2.0 - Page Titles. This is because the <iframe> needs to have a title="..." attribute, even though the iframe's document has a <title> tag. It seems superfluous but I don't see any way around it. Fix: Around line 593 of _editor/RichText, when we write the <title> tag of the iframe, also write the title="" attribute to the <iframe>

  1. Fixes up the main test page for editor. There will still be violations because when there are multiple Toolbars on a page, each one needs its own aria-label attribute. See http://bugs.dojotoolkit.org/ticket/16139

Attachments (3)

editor._RichText-a11y-fixes.patch (8.7 KB) - added by mikeb 7 years ago.
Fix up accessibility violations on Editor, specifically the iframe, please proxy commit for Michael Billau CCLA on file with IBM
ViewSource.js.patch (481 bytes) - added by mikeb 7 years ago.
add aria-label to the textare created by editors ViewSource? plugin, please proxy commit for michael billau ccla on file
editor-test-pages.patch (38.5 KB) - added by mikeb 7 years ago.
Update all of the non-robot test pages in editor/tests to be accessible and compliant for ease of future testing, please proxy commit for michael billau ccla on file

Download all attachments as: .zip

Change History (15)

Changed 7 years ago by mikeb

Fix up accessibility violations on Editor, specifically the iframe, please proxy commit for Michael Billau CCLA on file with IBM

comment:1 Changed 7 years ago by mikeb

Cc: Douglas Hays added

Changed 7 years ago by mikeb

Attachment: ViewSource.js.patch added

add aria-label to the textare created by editors ViewSource? plugin, please proxy commit for michael billau ccla on file

comment:2 Changed 7 years ago by mikeb

ViewSource?.js.patch - This patch fixes an accessibility issue caused by the ViewSource? plugin. The problem was that the textarea the plugin created does not have aria-label. I set aria-label to the ID of the Editor. Now when you tab into the textarea with JAWS it reads "{editor id}{readonly} edit {content}" which improves accessibility and compliance.

Changed 7 years ago by mikeb

Attachment: editor-test-pages.patch added

Update all of the non-robot test pages in editor/tests to be accessible and compliant for ease of future testing, please proxy commit for michael billau ccla on file

comment:3 Changed 7 years ago by bill

Milestone: tbd1.9

comment:4 Changed 7 years ago by bill

Owner: set to bill
Resolution: fixed
Status: newclosed

In [29804]:

Various aria fixes for Editor, plus accessibility updates to test files, patches from Mike Billau (IBM, CCLA), fixes #16139, #16140 !strict

comment:4 Changed 7 years ago by Douglas Hays

In [30311]:

Refs #16139, #16140. Backport [29804] to 1.8. !strict

comment:5 Changed 7 years ago by Douglas Hays

Milestone: 1.91.8.4

comment:6 Changed 4 years ago by Bill Keese <bill@…>

In 1764dea7e7ad728c04841f46e9e93f1a4346a715/dijit:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

comment:7 Changed 4 years ago by Bill Keese <bill@…>

In 86a5530c912c9b2a8536c7ba04b828a42f1c4d22/dijit:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

comment:8 Changed 4 years ago by Bill Keese <bill@…>

In c62037ca7ccf3f9e91eae7a7dc1d2427115d7737/dijit:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

comment:9 Changed 4 years ago by Bill Keese <bill@…>

In 1ac31551a8da22a025a3699195de6cea60d28cf7/dijit:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

comment:10 Changed 4 years ago by Bill Keese <bill@…>

In 006f679d7bb2562dc29b0d5ccb5e7440b79211fa/dijit:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

comment:11 Changed 4 years ago by Bill Keese <bill@…>

In 052a273935de20d345f05e7d344121325d381cce/dijit:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 
Note: See TracTickets for help on using tickets.