Add label for editor's toolbar #500
Conversation
src/toolbar/toolbarview.js
Outdated
| @@ -131,6 +154,8 @@ export default class ToolbarView extends View { | |||
| this.focusTracker.remove( item.element ); | |||
| } ); | |||
|
|
|||
| this.element.appendChild( this.labelView.element ); | |||
There was a problem hiding this comment.
I don't think this is safe. In the same element we keep the collection of the items. In fact, the first thing that drew my attention was – why are you rendering the label separately and not in the base template.
Finally, do we need a separate element for that label? Can't we inline that label in the aria attribute?
|
I've updated this PR and made a static label for a toolbar. I also provide an option to override the aria-label, what is used by other view components which use |
src/dropdown/utils.js
Outdated
| @@ -123,13 +123,18 @@ export function createDropdown( locale, ButtonClass = DropdownButtonView ) { | |||
| * dropdown.render() | |||
| * document.body.appendChild( dropdown.element ); | |||
| * | |||
| * **Please note:** {@link module:ui/toolbar/toolbarview~ToolbarView ToolbarView} instance created for this dropdown has an obligatory | |||
There was a problem hiding this comment.
Not sure we need this comment. A good example and solid API docs will do.
src/toolbar/toolbarview.js
Outdated
| */ | ||
| constructor( locale ) { | ||
| constructor( locale, { ariaLabel } = {} ) { |
There was a problem hiding this comment.
Please, make this a property like ButtonView#label or ButtonView#tooltip with the default t( 'Editor toolbar' ).
src/toolbar/toolbarview.js
Outdated
| ] | ||
| ], | ||
| role: 'toolbar', | ||
| 'aria-label': ariaLabel |
src/toolbar/toolbarview.js
Outdated
| @@ -27,12 +27,23 @@ import { attachLinkToDocumentation } from '@ckeditor/ckeditor5-utils/src/ckedito | |||
| */ | |||
| export default class ToolbarView extends View { | |||
| /** | |||
| * @inheritDoc | |||
| * Creates an instance of the {@link module:ui/view~View} class. | |||
src/toolbar/toolbarview.js
Outdated
| * Also see {@link #render}. | ||
| * | ||
| * @param {module:utils/locale~Locale} locale The localization services instance. | ||
| * @param {Object} [config] |
There was a problem hiding this comment.
No config is needed. Properties are fine.
src/dropdown/utils.js
Outdated
| const toolbarView = dropdownView.toolbarView = new ToolbarView(); | ||
| const locale = dropdownView.locale; | ||
| const t = locale.t; | ||
| const toolbarView = dropdownView.toolbarView = new ToolbarView( locale, { ariaLabel: t( 'Dropdown\'s toolbar' ) } ); |
Co-Authored-By: Aleksander Nowodzinski <[email protected]>
Suggested merge commit message (convention)
Fix: Add label for editor's toolbar. Closes ckeditor/ckeditor5#1404.
BREAKING CHANGE:
ToolbarViewclass will now have requiredlocaleargument, to translate the aria-label attribute of a toolbar element.Additional information
Related PR: ckeditor/ckeditor5-widget#91