Floating space for inline editors needs a label

[Teresa Monahan]

The floating space which displays the toolbar for inline editors uses role=application. Therefore it should be labelled using either aria-label or aria-labelledby (Ref:http://www.w3.org/TR/wai-aria/roles#application).[[BR]]

This can be achieved by mimicking the behavior of the IFrame based editor. Note that each instance of an inline editor should have a unique label as described in ticket #10510.

A proposed fix is to add the following to the floatSpaceTpl in floatingspace/plugin.js:

' aria-labelledby="cke_{name}_arialbl">' +
'<span id="cke_{name}_arialbl" class="cke_voice_label">{voiceLabel}</span>' +

and then pass in a voiceLabel to the vars used in the floatSpaceTpl.output call:

	voiceLabel: [ editor.lang.editor, editor.name ].join( ', ' )

[Jakub Ś]

Yes, this sounds exactly like ticket #10510 :).

Since there is no visible text describing toolbar I'm guessing that aria-label should be used to give "toolbar for particular editor" meaningful name - ​http://www.w3.org/TR/wai-aria/states_and_properties#aria-label

[Frederico Caldeira Knabben]

Hum... the proposal looks good, technically speaking, but I'm a bit unsure about this approach.

The idea of that aria label in the framed editor is to *announce* the editor as soon as the user reaches it with the TAB key. Then, the toolbar is activated with ALT+F10, but it behaves as basically part of the same entity we were earlier - the edited contents.

If for some practical or theoretical reason the floating panel needs to have a label (please confirm this), then shouldn't it be correct to have instead a dedicated label for it, which doesn't really represents the editor instance as a whole? Something like "Rich text editor toolbar, editor 1"... but even this may be a bit wrong, because the the floating panel is, theoretically, not only a toolbar thing as it can hold any kind of ui element.... but something on those lines.

[Teresa Monahan]

Replying to fredck:

The floating panel uses role=application and therefore it needs a label so that users can easily identify where the landmark is on the page. For example, if JAWS users use the Ctrl+Insert+; shortcut, a list of available landmarks is displayed. If the floating panel does not have a label, it will just be listed as application which is of little use.

Having a dedicated label for the floating space would be fine, as long as it is in someway associated with the editor that it corresponds to. "Rich text editor toolbar, editor 1" would be sufficient or you could make it more general to reflect that it may also contain other ui elements.

[Frederico Caldeira Knabben]

Pushed t/10753@cksource.

[Olek Nowodziński]

I'm OK with that branch, even though there are unrelated lang entries (confirmCancel) touched for the following languages: bn, bs, hi, is, mk, mn, ms, sr-latn, sr, which can be easily reverted.

[Frederico Caldeira Knabben]

Replying to a.nowodzinski:

I'm OK with that branch, even though there are unrelated lang entries (confirmCancel) touched for the following languages: bn, bs, hi, is, mk, mn, ms, sr-latn, sr, which can be easily reverted.

This is simply the effect of running langtool, so it should not be a big deal to have them fixed as well.

Fixed with ​git:5a0964b.