Skip to content

Commit

Permalink
Add aria labels to toolbar (#3861)
Browse files Browse the repository at this point in the history
Co-authored-by: Claire Fields <[email protected]>
  • Loading branch information
luin and clairefields15 authored Aug 25, 2023
1 parent 3ed59c3 commit 68f4629
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 21 deletions.
6 changes: 4 additions & 2 deletions modules/toolbar.ts
Original file line number Diff line number Diff line change
Expand Up @@ -192,14 +192,16 @@ class Toolbar extends Module<ToolbarProps> {
}
Toolbar.DEFAULTS = {};

function addButton(container: HTMLElement, format: string, value?: unknown) {
function addButton(container: HTMLElement, format: string, value?: string) {
const input = document.createElement('button');
input.setAttribute('type', 'button');
input.classList.add(`ql-${format}`);
input.setAttribute('aria-pressed', 'false');
if (value != null) {
// @ts-expect-error
input.value = value;
input.setAttribute('aria-label', `${format}: ${value}`);
} else {
input.setAttribute('aria-label', format);
}
container.appendChild(input);
}
Expand Down
32 changes: 16 additions & 16 deletions test/unit/modules/toolbar.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ describe('Toolbar', () => {
addControls(container, ['bold', 'italic']);
expect(container).toEqualHTML(`
<span class="ql-formats">
<button type="button" class="ql-bold" aria-pressed="false"></button>
<button type="button" class="ql-italic" aria-pressed="false"></button>
<button type="button" aria-label="bold" class="ql-bold" aria-pressed="false"></button>
<button type="button" aria-label="italic" class="ql-italic" aria-pressed="false"></button>
</span>
`);
});
Expand All @@ -42,12 +42,12 @@ describe('Toolbar', () => {
]);
expect(container).toEqualHTML(`
<span class="ql-formats">
<button type="button" class="ql-bold" aria-pressed="false"></button>
<button type="button" class="ql-italic" aria-pressed="false"></button>
<button type="button" aria-label="bold" class="ql-bold" aria-pressed="false"></button>
<button type="button" aria-label="italic" class="ql-italic" aria-pressed="false"></button>
</span>
<span class="ql-formats">
<button type="button" class="ql-underline" aria-pressed="false"></button>
<button type="button" class="ql-strike" aria-pressed="false"></button>
<button type="button" aria-label="underline" class="ql-underline" aria-pressed="false"></button>
<button type="button" aria-label="strike" class="ql-strike" aria-pressed="false"></button>
</span>
`);
});
Expand All @@ -57,8 +57,8 @@ describe('Toolbar', () => {
addControls(container, ['bold', { header: '2' }]);
expect(container).toEqualHTML(`
<span class="ql-formats">
<button type="button" class="ql-bold" aria-pressed="false"></button>
<button type="button" class="ql-header" aria-pressed="false" value="2"></button>
<button type="button" aria-label="bold" class="ql-bold" aria-pressed="false"></button>
<button type="button" aria-label="header: 2" class="ql-header" aria-pressed="false" value="2"></button>
</span>
`);
});
Expand Down Expand Up @@ -108,14 +108,14 @@ describe('Toolbar', () => {
</select>
</span>
<span class="ql-formats">
<button type="button" class="ql-bold" aria-pressed="false"></button>
<button type="button" class="ql-italic" aria-pressed="false"></button>
<button type="button" class="ql-underline" aria-pressed="false"></button>
<button type="button" class="ql-strike" aria-pressed="false"></button>
<button type="button" aria-label="bold" class="ql-bold" aria-pressed="false"></button>
<button type="button" aria-label="italic" class="ql-italic" aria-pressed="false"></button>
<button type="button" aria-label="underline" class="ql-underline" aria-pressed="false"></button>
<button type="button" aria-label="strike" class="ql-strike" aria-pressed="false"></button>
</span>
<span class="ql-formats">
<button type="button" class="ql-list" value="ordered" aria-pressed="false"></button>
<button type="button" class="ql-list" value="bullet" aria-pressed="false"></button>
<button type="button" aria-label="list: ordered" class="ql-list" value="ordered" aria-pressed="false"></button>
<button type="button" aria-label="list: bullet" class="ql-list" value="bullet" aria-pressed="false"></button>
<select class="ql-align">
<option selected="selected"></option>
<option value="center"></option>
Expand All @@ -124,8 +124,8 @@ describe('Toolbar', () => {
</select>
</span>
<span class="ql-formats">
<button type="button" class="ql-link" aria-pressed="false"></button>
<button type="button" class="ql-image" aria-pressed="false"></button>
<button type="button" aria-label="link" class="ql-link" aria-pressed="false"></button>
<button type="button" aria-label="image" class="ql-image" aria-pressed="false"></button>
</span>
`);
});
Expand Down
6 changes: 3 additions & 3 deletions ui/picker.ts
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,9 @@ class Picker {
item.tabIndex = '0';
item.setAttribute('role', 'button');
item.classList.add('ql-picker-item');
if (option.hasAttribute('value')) {
// @ts-expect-error Fix me later
item.setAttribute('data-value', option.getAttribute('value'));
const value = option.getAttribute('value');
if (value) {
item.setAttribute('data-value', value);
}
if (option.textContent) {
item.setAttribute('data-label', option.textContent);
Expand Down

0 comments on commit 68f4629

Please sign in to comment.