The main changes here are that the "select the text in" step was modified to select only the
first text node in the editor field, and to focus on it's parent instead of the entire editable div.
Some tests had to be modified to match the new behaviour, and another "real" bug was found in the table plugin.
toolbar order (base it on tinymce)
change plain to paragraph
default for collapse plugin should be 5 groups
fix alignment of table dialogue form
insert newlines in html generated by table plugin
rename accessibility helper to screenreader helper
remove accessibility hint for images and media files
fix some broken plugin names
style table captions
remove verbose accessibility hints
1/ Set the aria-labelledby attribute on the contenteditable div (find the label from
original textarea)
2/ Store/restore the selection for the contenteditable div when it is focused. This allows
you to select some text, then go to the toolbar and click a button, and the selection
will be restored before the button effect is applied.
3/ Add an accessibility helper plugin.
From testing in all screenreaders, I found that all of their support for contenteditable is not great.
They treat it like a textbox - which means you can type and edit text, but it tells you nothing about
the styles, links or images in the editor. So I added a button to the toolbar, that is only accessible
when navigating via keyboard, that opens an accesssibility helper dialogue. The dialogue shows the list
of current styles, a global list of all links, and a global list of all images. Choosing an image or link
from here, will focus on the editable region, and select the link/image.
4/ Add an accessibility checker plugin to Atto.
Checks for images with no alt, images and links with filenames as alternate text/link text, and contrast ratios
less than WCAG 2.0 AA.
Frederic Massart