Skip to content

Commit

Permalink
Merge pull request #16573 from ckeditor/ck/16572
Browse files Browse the repository at this point in the history 
Feature (ui): Redesigned "active state" style for menu bar dropdown items. Closes #16572.

Fix (ui): Improve accessibility of toggleable menu bar items by marking them as `menucheckbox` aria roles.

Fix (ui): Fixed element tag name from `<label>` to `<span>` in the color picker component to improve the accessibility.

MINOR BREAKING CHANGE (ui): We changed styles for "active" items inside menu bar and dropdowns lists. Previously, an active (chosen, enabled, opened, etc.) item was highlighted with a blue background. Now, the active element has a checkmark icon on the left.
  • Loading branch information
@scofalik
scofalik authored Jun 28, 2024
2 parents b11f4f9 + c8c82cd commit ac3d173
Show file tree
Hide file tree
Showing 73 changed files with 1,525 additions and 435 deletions.
10 changes: 3 additions & 7 deletions packages/ckeditor5-alignment/src/alignmentui.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,16 +219,12 @@ export default class AlignmentUI extends Plugin {
const listItemView = new MenuBarMenuListItemView( locale, menuView );
const buttonView = new MenuBarMenuListItemButtonView( locale );

buttonView.extendTemplate( {
attributes: {
'aria-checked': buttonView.bindTemplate.to( 'isOn' )
}
} );

buttonView.delegate( 'execute' ).to( menuView );
buttonView.set( {
label: this.localizedOptionTitles[ option.name ],
icon: iconsMap.get( option.name )
icon: iconsMap.get( option.name ),
role: 'menuitemcheckbox',
isToggleable: true
} );

buttonView.on( 'execute', () => {
Expand Down
18 changes: 2 additions & 16 deletions packages/ckeditor5-basic-styles/src/bold/boldui.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ export default class BoldUI extends Plugin {
public init(): void {
const editor = this.editor;
const t = editor.locale.t;
const command = editor.commands.get( BOLD )!;
const createButton = getButtonCreator( {
editor,
commandName: BOLD,
Expand All @@ -41,20 +40,7 @@ export default class BoldUI extends Plugin {
} );

// Add bold button to feature components.
editor.ui.componentFactory.add( BOLD, () => {
const buttonView = createButton( ButtonView );

buttonView.set( {
tooltip: true
} );

buttonView.bind( 'isOn' ).to( command, 'value' );

return buttonView;
} );

editor.ui.componentFactory.add( 'menuBar:' + BOLD, () => {
return createButton( MenuBarMenuListItemButtonView );
} );
editor.ui.componentFactory.add( BOLD, () => createButton( ButtonView ) );
editor.ui.componentFactory.add( 'menuBar:' + BOLD, () => createButton( MenuBarMenuListItemButtonView ) );
}
}
19 changes: 2 additions & 17 deletions packages/ckeditor5-basic-styles/src/code/codeui.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,22 +43,7 @@ export default class CodeUI extends Plugin {
} );

// Add code button to feature components.
editor.ui.componentFactory.add( CODE, () => {
const buttonView = createButton( ButtonView );
const command = editor.commands.get( CODE )!;

buttonView.set( {
tooltip: true
} );

// Bind button model to command.
buttonView.bind( 'isOn' ).to( command, 'value' );

return buttonView;
} );

editor.ui.componentFactory.add( 'menuBar:' + CODE, () => {
return createButton( MenuBarMenuListItemButtonView );
} );
editor.ui.componentFactory.add( CODE, () => createButton( ButtonView ) );
editor.ui.componentFactory.add( 'menuBar:' + CODE, () => createButton( MenuBarMenuListItemButtonView ) );
}
}
18 changes: 2 additions & 16 deletions packages/ckeditor5-basic-styles/src/italic/italicui.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ export default class ItalicUI extends Plugin {
*/
public init(): void {
const editor = this.editor;
const command = editor.commands.get( ITALIC )!;
const t = editor.locale.t;
const createButton = getButtonCreator( {
editor,
Expand All @@ -43,20 +42,7 @@ export default class ItalicUI extends Plugin {
} );

// Add bold button to feature components.
editor.ui.componentFactory.add( ITALIC, () => {
const buttonView = createButton( ButtonView );

buttonView.set( {
tooltip: true
} );

buttonView.bind( 'isOn' ).to( command, 'value' );

return buttonView;
} );

editor.ui.componentFactory.add( 'menuBar:' + ITALIC, () => {
return createButton( MenuBarMenuListItemButtonView );
} );
editor.ui.componentFactory.add( ITALIC, () => createButton( ButtonView ) );
editor.ui.componentFactory.add( 'menuBar:' + ITALIC, () => createButton( MenuBarMenuListItemButtonView ) );
}
}
19 changes: 2 additions & 17 deletions packages/ckeditor5-basic-styles/src/strikethrough/strikethroughui.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,22 +42,7 @@ export default class StrikethroughUI extends Plugin {
} );

// Add strikethrough button to feature components.
editor.ui.componentFactory.add( STRIKETHROUGH, () => {
const buttonView = createButton( ButtonView );
const command = editor.commands.get( STRIKETHROUGH )!;

buttonView.set( {
tooltip: true
} );

// Bind button model to command.
buttonView.bind( 'isOn' ).to( command, 'value' );

return buttonView;
} );

editor.ui.componentFactory.add( 'menuBar:' + STRIKETHROUGH, () => {
return createButton( MenuBarMenuListItemButtonView );
} );
editor.ui.componentFactory.add( STRIKETHROUGH, () => createButton( ButtonView ) );
editor.ui.componentFactory.add( 'menuBar:' + STRIKETHROUGH, () => createButton( MenuBarMenuListItemButtonView ) );
}
}
20 changes: 3 additions & 17 deletions packages/ckeditor5-basic-styles/src/subscript/subscriptui.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export default class SubscriptUI extends Plugin {
public init(): void {
const editor = this.editor;
const t = editor.locale.t;

const createButton = getButtonCreator( {
editor,
commandName: SUBSCRIPT,
Expand All @@ -41,22 +42,7 @@ export default class SubscriptUI extends Plugin {
} );

// Add subscript button to feature components.
editor.ui.componentFactory.add( SUBSCRIPT, () => {
const buttonView = createButton( ButtonView );
const command = editor.commands.get( SUBSCRIPT )!;

buttonView.set( {
tooltip: true
} );

// Bind button model to command.
buttonView.bind( 'isOn' ).to( command, 'value' );

return buttonView;
} );

editor.ui.componentFactory.add( 'menuBar:' + SUBSCRIPT, () => {
return createButton( MenuBarMenuListItemButtonView );
} );
editor.ui.componentFactory.add( SUBSCRIPT, () => createButton( ButtonView ) );
editor.ui.componentFactory.add( 'menuBar:' + SUBSCRIPT, () => createButton( MenuBarMenuListItemButtonView ) );
}
}
19 changes: 2 additions & 17 deletions packages/ckeditor5-basic-styles/src/superscript/superscriptui.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,22 +41,7 @@ export default class SuperscriptUI extends Plugin {
} );

// Add superscript button to feature components.
editor.ui.componentFactory.add( SUPERSCRIPT, () => {
const buttonView = createButton( ButtonView );
const command = editor.commands.get( SUPERSCRIPT )!;

buttonView.set( {
tooltip: true
} );

// Bind button model to command.
buttonView.bind( 'isOn' ).to( command, 'value' );

return buttonView;
} );

editor.ui.componentFactory.add( 'menuBar:' + SUPERSCRIPT, () => {
return createButton( MenuBarMenuListItemButtonView );
} );
editor.ui.componentFactory.add( SUPERSCRIPT, () => createButton( ButtonView ) );
editor.ui.componentFactory.add( 'menuBar:' + SUPERSCRIPT, () => createButton( MenuBarMenuListItemButtonView ) );
}
}
18 changes: 2 additions & 16 deletions packages/ckeditor5-basic-styles/src/underline/underlineui.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ export default class UnderlineUI extends Plugin {
*/
public init(): void {
const editor = this.editor;
const command = editor.commands.get( UNDERLINE )!;
const t = editor.locale.t;
const createButton = getButtonCreator( {
editor,
Expand All @@ -43,20 +42,7 @@ export default class UnderlineUI extends Plugin {
} );

// Add bold button to feature components.
editor.ui.componentFactory.add( UNDERLINE, () => {
const buttonView = createButton( ButtonView );

buttonView.set( {
tooltip: true
} );

buttonView.bind( 'isOn' ).to( command, 'value' );

return buttonView;
} );

editor.ui.componentFactory.add( 'menuBar:' + UNDERLINE, () => {
return createButton( MenuBarMenuListItemButtonView );
} );
editor.ui.componentFactory.add( UNDERLINE, () => createButton( ButtonView ) );
editor.ui.componentFactory.add( 'menuBar:' + UNDERLINE, () => createButton( MenuBarMenuListItemButtonView ) );
}
}
13 changes: 12 additions & 1 deletion packages/ckeditor5-basic-styles/src/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

import type { Editor, Plugin } from 'ckeditor5/src/core.js';
import type AttributeCommand from './attributecommand.js';
import type { ButtonView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
import { MenuBarMenuListItemButtonView, type ButtonView } from 'ckeditor5/src/ui.js';

/**
* Returns a function that creates a (toolbar or menu bar) button for a basic style feature.
Expand All @@ -36,6 +36,17 @@ export function getButtonCreator( {
} );

view.bind( 'isEnabled' ).to( command, 'isEnabled' );
view.bind( 'isOn' ).to( command, 'value' );

if ( view instanceof MenuBarMenuListItemButtonView ) {
view.set( {
role: 'menuitemcheckbox'
} );
} else {
view.set( {
tooltip: true
} );
}

// Execute the command.
plugin.listenTo( view, 'execute', () => {
Expand Down
35 changes: 26 additions & 9 deletions packages/ckeditor5-basic-styles/tests/bold/boldui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,15 +43,6 @@ describe( 'BoldUI', () => {
} );

testButton();

it( 'should bind `isOn` to bold command', () => {
const command = editor.commands.get( 'bold' );

expect( boldView.isOn ).to.be.false;

command.value = true;
expect( boldView.isOn ).to.be.true;
} );
} );

describe( 'menu bar button', () => {
Expand All @@ -60,6 +51,20 @@ describe( 'BoldUI', () => {
} );

testButton();

it( 'should create button with `menuitemcheckbox` role', () => {
expect( boldView.role ).to.equal( 'menuitemcheckbox' );
} );

it( 'should bind `isOn` to `aria-checked` attribute', () => {
boldView.render();

boldView.isOn = true;
expect( boldView.element.getAttribute( 'aria-checked' ) ).to.be.equal( 'true' );

boldView.isOn = false;
expect( boldView.element.getAttribute( 'aria-checked' ) ).to.be.equal( 'false' );
} );
} );

function testButton() {
Expand Down Expand Up @@ -93,5 +98,17 @@ describe( 'BoldUI', () => {
it( 'should set keystroke in the model', () => {
expect( boldView.keystroke ).to.equal( 'CTRL+B' );
} );

it( 'should bind `isOn` to `command`.`value`', () => {
const command = editor.commands.get( 'bold' );

command.value = true;

expect( boldView.isOn ).to.be.true;

command.value = false;

expect( boldView.isOn ).to.be.false;
} );
}
} );
35 changes: 26 additions & 9 deletions packages/ckeditor5-basic-styles/tests/code/codeui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,15 +43,6 @@ describe( 'CodeUI', () => {
} );

testButton();

it( 'should bind `isOn` to code command', () => {
const command = editor.commands.get( 'code' );

expect( codeView.isOn ).to.be.false;

command.value = true;
expect( codeView.isOn ).to.be.true;
} );
} );

describe( 'menu bar button', () => {
Expand All @@ -60,6 +51,20 @@ describe( 'CodeUI', () => {
} );

testButton();

it( 'should create button with `menuitemcheckbox` role', () => {
expect( codeView.role ).to.equal( 'menuitemcheckbox' );
} );

it( 'should bind `isOn` to `aria-checked` attribute', () => {
codeView.render();

codeView.isOn = true;
expect( codeView.element.getAttribute( 'aria-checked' ) ).to.be.equal( 'true' );

codeView.isOn = false;
expect( codeView.element.getAttribute( 'aria-checked' ) ).to.be.equal( 'false' );
} );
} );

function testButton() {
Expand Down Expand Up @@ -87,5 +92,17 @@ describe( 'CodeUI', () => {
command.isEnabled = false;
expect( codeView.isEnabled ).to.be.false;
} );

it( 'should bind `isOn` to `command`.`value`', () => {
const command = editor.commands.get( 'code' );

command.value = true;

expect( codeView.isOn ).to.be.true;

command.value = false;

expect( codeView.isOn ).to.be.false;
} );
}
} );
Loading

0 comments on commit ac3d173

Please sign in to comment.