Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add the visual label to the beginning of the programmatic heading dropdown aria label #16024

Merged
merged 8 commits into from
Mar 20, 2024
Merged

Add the visual label to the beginning of the programmatic heading dropdown aria label #16024

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
4157ad1
Add the visual label to the beginning of the programmatic aria label …
Mati365 Mar 14, 2024
f83fa75
Adjust test
Mati365 Mar 14, 2024
14ab254
Reduce condition
Mati365 Mar 20, 2024
39205ba
Add more tests
Mati365 Mar 20, 2024
5f994b1
Set proper `aria-label` attribute in language dropdown
Mati365 Mar 20, 2024
a7bed63
Fix import
Mati365 Mar 20, 2024
9aa8149
Merge branch 'master' into ck/6029
oleq Mar 20, 2024
ecb43e4
Fix incorrect language button `ariaLabel`
Mati365 Mar 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 16 additions & 1 deletion packages/ckeditor5-heading/src/headingui.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
type ButtonExecuteEvent,
type ListDropdownItemDefinition
} from 'ckeditor5/src/ui.js';
import { Collection } from 'ckeditor5/src/utils.js';
import { Collection, type ObservableChangeEvent } from 'ckeditor5/src/utils.js';
import type { ParagraphCommand } from 'ckeditor5/src/paragraph.js';

import { getLocalizedOptions } from './utils.js';
Expand Down Expand Up @@ -124,6 +124,21 @@ export default class HeadingUI extends Plugin {
return titles[ whichModel ];
} );

dropdownView.buttonView.bind( 'ariaLabel' ).to( headingCommand, 'value', paragraphCommand, 'value', ( value, para ) => {
const whichModel = value || para && 'paragraph';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since we're visiting this code for the first time since 2018, can you please rewrite it to human-readable code using if/else or at least the ternary operator? 🙂 (I know you copied it from dropdownView.buttonView.bind( 'label' )..., you can change it there too)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I reduced this one line to const whichModel = paragraph ? 'paragraph' : heading;. Seems to be working correctly.


if ( typeof whichModel === 'boolean' ) {
return accessibleLabel;
}

// If none of the commands is active, display default title.
if ( !titles[ whichModel ] ) {
return accessibleLabel;
}

return `${ titles[ whichModel ] }, ${ accessibleLabel }`;
} );

// Execute command when an item from the dropdown is selected.
this.listenTo<ButtonExecuteEvent>( dropdownView, 'execute', evt => {
const { commandName, commandValue } = evt.source as any;
Expand Down
2 changes: 1 addition & 1 deletion packages/ckeditor5-heading/tests/headingui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ describe( 'HeadingUI', () => {
expect( dropdown.buttonView.isOn ).to.be.false;
expect( dropdown.buttonView.label ).to.equal( 'Paragraph' );
expect( dropdown.buttonView.tooltip ).to.equal( 'Heading' );
expect( dropdown.buttonView.ariaLabel ).to.equal( 'Heading' );
expect( dropdown.buttonView.ariaLabel ).to.equal( 'Paragraph, Heading' );
expect( dropdown.buttonView.ariaLabelledBy ).to.be.undefined;
} );

Expand Down