G0 - ckeditor changes- to improve accessibility

[anncesar]

The ckeditor continues to be a problem for creating accessible content, and while we may be able to train clients, we should consider doing the following changes to help ensure users create accessible content:

1) Remove defaults from Image/table upon inserting 2) also Consider removing the following options, if possible from the editor: Image: Wdith, Height, Border Table: Border size, width, height, cell spacing, cell padding 3) consider removing the current insert table and insert image options and creating our own custom buttons that insert tables and images properly (using Bootstrap classes only). 4) we may also want to consider getting a license for this too: https://cksource.com/ckeditor/services#accessibility-checker --- Possibility-limit the output on filter to just appropriate html tags and bootstrap classes. Other research may be required, look to drupal 8 also?

[mmafe]

Original comment from @brharp : "@mmafe Please test. I imported the wysiwyg filter configuration from our old SVN/websolutions platform, and updated it to allow only bootstrap classes. I think we may need to expand the list of allowed tags. Looking for ideas."

[mmafe]

Test Notes

I'm seeing the following...

We may need to research options for removing as many of those input fields as we can... Also still seeing the inserted border /cell spacing etc.

[tqureshi-uog]

I remember working to resolve this issue on the old responsive theme. I don't believe it's possible to remove those default values without hacking ckeditor config files (not a good thing to do since the changes would be overwritten every time ckeditor gets an update). So the workaround I came up with was to configure the Filtered HTML text format to automatically strip all cellspacing, cellpadding, height and width markup from

----- Original Message ----- From: "mmafe" notifications@github.com To: "ccswbs/hjckrrh" hjckrrh@noreply.github.com Sent: Thursday, December 3, 2015 5:04:40 PM Subject: Re: [hjckrrh] G0 - ckeditor changes- to improve accessibility (#174)

Test Notes

I'm seeing the following...

We may need to research options for removing as many of those input fields as we can... Also still seeing the inserted border /cell spacing etc.

---

Reply to this email directly or view it on GitHub: https://github.com/ccswbs/hjckrrh/issues/174#issuecomment-161799424

Tanya Qureshi Analyst II, Web Solutions Computing & Communication Services (CCS) University of Guelph

519-824-4120 Ext 56020 tqureshi@uoguelph.ca www.uoguelph.ca/ccs

brharp commented 8 years ago

As Tanya mentioned, those height/width/cell spacing/cell padding properties will appear in CKEditor up until the first save. After the first save, the text filter will remove them.

To test:

1. Update issue174 branch.
2. Create a new basic page.
3. Change text format to Filtered HTML.
4. Insert a table and image.
5. Save

Expected result:

• After save, border, cell padding, cell spacing, width and height attributes should be removed.

Note: I have also allowed the class attribute on tables and images, to enable use of the 'table' and 'img-*' classes.

mmafe commented 8 years ago

Followed these steps:

1. Checked out branch issue174.
2. Added new basic page.
3. Switched format from Full HTML to Filtered HTML

Sub-Result: Image button is available, but table button is missing.

1. Inserted image.
2. Added img-responsive bootstrap class to image.
3. Added border, height, hspace, vspace
4. Saved.

Result: Image appeared. Border, height, hspace, vpsace stripped.

Img-responsive bootstrap class stripped as well.

We would need to update the solution so the img-responsive class does not get stripped out.

brharp commented 8 years ago

@mmafe did you clear your cache after switching branches? I tried starting from the develop branch and switching to branch issue174. The table button did not appear until I cleared all caches.

mmafe commented 8 years ago

Meeting Notes

From @anncesar, @brharp, and @mmafe

What's done...

• Filtered HTML allows for tables and images >> we'll need to re-add the buttons from Full HTML

What we can do

• Full HTML is only available for the site manager
• Filtered HTML is available to all other roles
• Allow default dropdown to be "Filtered HTML" for all roles
• Perhaps a more stripped down "Basic" format -- only allow lists, bold, italic, etc. (an idea) >> We could do this on a per situation basis (a custom one)

Options we'd like to see if possible

• Check to see if we can remove the default values
• Image: Remove the width, height, border input fields; Add img-responsive class (if possible)
• Table: Remove border, alignment, width, height, cellspacing, cell padding; Add table class (if possible)
• Link: Possibly remove target options like "pop-up dialogue" etc. Remove "browse server" from the link dialogue
• Style horizontal line similarly to divider on media listing pages
• Add help text for file attachments. "Please ensure your uploaded file is AODA compliant" (or something like that)

Preferred Practice for Linking to a file

1. Attach the file in File Attachments
2. Deselect "Display" on the file attachment
3. Link to the file in the body field (either by dragging the file up to the body field or copying the link location)

Ensure that the full html and filtered html buttons are tested.

mancusop commented 8 years ago

If we can really do:

• Image: Add img-responsive class (if possible)
• Table: Add table class (if possible)

And have a patch to apply whenever ckeditor gets updated we may limit a lot of potential future accessibility issues.

mmafe commented 8 years ago

Related to issue #16

mancusop commented 8 years ago

@brharp @mmafe Are there any updates to ckeditor coming down the line in relation to img-responsive class and table class?

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[brharp]

As Tanya mentioned, those height/width/cell spacing/cell padding properties will appear in CKEditor up until the first save. After the first save, the text filter will remove them.

To test:

1. Update issue174 branch.
2. Create a new basic page.
3. Change text format to Filtered HTML.
4. Insert a table and image.
5. Save

Expected result:

• After save, border, cell padding, cell spacing, width and height attributes should be removed.

Note: I have also allowed the class attribute on tables and images, to enable use of the 'table' and 'img-*' classes.

[mmafe]

Followed these steps:

1. Checked out branch issue174.
2. Added new basic page.
3. Switched format from Full HTML to Filtered HTML

Sub-Result: Image button is available, but table button is missing.

1. Inserted image.
2. Added img-responsive bootstrap class to image.
3. Added border, height, hspace, vspace
4. Saved.

Result: Image appeared. Border, height, hspace, vpsace stripped.

Img-responsive bootstrap class stripped as well.

We would need to update the solution so the img-responsive class does not get stripped out.

[brharp]

@mmafe did you clear your cache after switching branches? I tried starting from the develop branch and switching to branch issue174. The table button did not appear until I cleared all caches.

[mmafe]

Meeting Notes

From @anncesar, @brharp, and @mmafe

What's done...

• Filtered HTML allows for tables and images >> we'll need to re-add the buttons from Full HTML

What we can do

• Full HTML is only available for the site manager
• Filtered HTML is available to all other roles
• Allow default dropdown to be "Filtered HTML" for all roles
• Perhaps a more stripped down "Basic" format -- only allow lists, bold, italic, etc. (an idea) >> We could do this on a per situation basis (a custom one)

Options we'd like to see if possible

• Check to see if we can remove the default values
• Image: Remove the width, height, border input fields; Add img-responsive class (if possible)
• Table: Remove border, alignment, width, height, cellspacing, cell padding; Add table class (if possible)
• Link: Possibly remove target options like "pop-up dialogue" etc. Remove "browse server" from the link dialogue
• Style horizontal line similarly to divider on media listing pages
• Add help text for file attachments. "Please ensure your uploaded file is AODA compliant" (or something like that)

Preferred Practice for Linking to a file

1. Attach the file in File Attachments
2. Deselect "Display" on the file attachment
3. Link to the file in the body field (either by dragging the file up to the body field or copying the link location)

Ensure that the full html and filtered html buttons are tested.

[mancusop]

If we can really do:

• Image: Add img-responsive class (if possible)
• Table: Add table class (if possible)

And have a patch to apply whenever ckeditor gets updated we may limit a lot of potential future accessibility issues.

[mmafe]

Related to issue #16

[mancusop]

@brharp @mmafe Are there any updates to ckeditor coming down the line in relation to img-responsive class and table class?