Skip to content

Commit 3090304

Browse files
egordidenkoegordidenko
authored
feat(a11y): Added title to button (#723)
* feat(a11y): Added title to button * feat(a11y): Added parameterization locales and migartion data * feat(a11y): The filterName has been renamed to name
1 parent def5f47 commit 3090304

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+430
-78
lines changed

‎blocks/CloudImageEditor/src/EditorButtonControl.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export class EditorButtonControl extends Block {
88
title: '',
99
icon: '',
1010
'on.click': null,
11+
'title-prop': '',
1112
};
1213

1314
initCallback() {
@@ -37,7 +38,7 @@ export class EditorButtonControl extends Block {
3738
}
3839

3940
EditorButtonControl.template = /* HTML */ `
40-
<button type="button" role="option">
41+
<button type="button" role="option" l10n="@title:title-prop">
4142
<uc-icon set="@name: icon;"></uc-icon>
4243
<div class="uc-title" ref="title-el">{{title}}</div>
4344
</button>

‎blocks/CloudImageEditor/src/EditorCropButtonControl.js

+6-1
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,14 @@ export class EditorCropButtonControl extends EditorButtonControl {
2828
/** @private */
2929
this._operation = operation;
3030
this.$['icon'] = operation;
31+
this.bindL10n('title-prop', () =>
32+
this.l10n('a11y-cloud-editor-apply-crop', {
33+
name: this.l10n(operation).toLowerCase(),
34+
}),
35+
);
3136
});
3237

33-
this.$['on.click'] = (e) => {
38+
this.$['on.click'] = () => {
3439
let prev = this.$['*cropperEl'].getValue(this._operation);
3540
let next = nextValue(this._operation, prev);
3641
this.$['*cropperEl'].setValue(this._operation, next);

‎blocks/CloudImageEditor/src/EditorFilterControl.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,12 @@ export class EditorFilterControl extends EditorButtonControl {
9999
this._filter = filter;
100100
this.$.isOriginal = filter === FAKE_ORIGINAL_FILTER;
101101
this.$.icon = this.$.isOriginal ? 'original' : 'slider';
102+
103+
this.bindL10n('title-prop', () =>
104+
this.l10n('a11y-cloud-editor-apply-filter', {
105+
name: filter.toLowerCase(),
106+
}),
107+
);
102108
},
103109
);
104110

@@ -158,7 +164,7 @@ export class EditorFilterControl extends EditorButtonControl {
158164
}
159165

160166
EditorFilterControl.template = /* HTML */ `
161-
<button type="button" role="option">
167+
<button type="button" role="option" l10n="@title:title-prop">
162168
<div class="uc-preview" ref="preview-el"></div>
163169
<uc-icon ref="icon-el" set="@name: icon; @size: iconSize;"></uc-icon>
164170
</button>

‎blocks/CloudImageEditor/src/EditorOperationControl.js

+5
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,11 @@ export class EditorOperationControl extends EditorButtonControl {
2121
if (operation) {
2222
this._operation = operation;
2323
this.$['icon'] = operation;
24+
this.bindL10n('title-prop', () =>
25+
this.l10n('a11y-cloud-editor-apply-tuning', {
26+
name: this.l10n(operation).toLowerCase(),
27+
}),
28+
);
2429
this.bindL10n('title', () => this.l10n(operation));
2530
}
2631
});

‎blocks/CloudImageEditor/src/EditorToolbar.js

+11-5
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ function renderTabToggle(id) {
2828
ref="tab-toggle-${id}"
2929
data-id="${id}"
3030
icon="${id}"
31-
set="onclick: on.clickTab; aria-role:tab_role; aria-controls:tab_${id}"
31+
set="onclick: on.clickTab; aria-role:tab_role; aria-controls:tab_${id}; title-prop: a11y-editor-tab-${id}"
3232
>
3333
</uc-btn-ui>
3434
</uc-presence-toggle>
@@ -130,6 +130,11 @@ export class EditorToolbar extends Block {
130130
[`tab_${TabId.TUNING}`]: `tab_${TabId.TUNING}`,
131131
[`tab_${TabId.CROP}`]: `tab_${TabId.CROP}`,
132132
[`tab_${TabId.FILTERS}`]: `tab_${TabId.FILTERS}`,
133+
cancel: 'cancel',
134+
apply: 'apply',
135+
'a11y-editor-tab-filters': 'a11y-editor-tab-filters',
136+
'a11y-editor-tab-tuning': 'a11y-editor-tab-tuning',
137+
'a11y-editor-tab-crop': 'a11y-editor-tab-crop',
133138
};
134139

135140
/** @private */
@@ -421,8 +426,9 @@ EditorToolbar.template = /* HTML */ `
421426
<div ref="tabs-indicator" class="uc-tab-toggles_indicator"></div>
422427
${ALL_TABS.map(renderTabToggle).join('')}
423428
</uc-presence-toggle>
424-
<uc-btn-ui style="order: -1" theme="secondary-icon" icon="closeMax" set="onclick: on.cancel"> </uc-btn-ui>
425-
<uc-btn-ui theme="primary-icon" icon="done" set="onclick: on.apply"> </uc-btn-ui>
429+
<uc-btn-ui style="order: -1" theme="secondary-icon" icon="closeMax" set="onclick: on.cancel; title-prop:cancel">
430+
</uc-btn-ui>
431+
<uc-btn-ui theme="primary-icon" icon="done" set="onclick: on.apply; title-prop:apply"> </uc-btn-ui>
426432
</div>
427433
</uc-presence-toggle>
428434
<uc-presence-toggle
@@ -433,8 +439,8 @@ EditorToolbar.template = /* HTML */ `
433439
<uc-editor-slider ref="slider-el"></uc-editor-slider>
434440
</div>
435441
<div class="uc-controls-row">
436-
<uc-btn-ui theme="secondary" set="onclick: on.cancelSlider;" l10n="@text:cancel"> </uc-btn-ui>
437-
<uc-btn-ui theme="primary" set="onclick: on.applySlider;" l10n="@text:apply"> </uc-btn-ui>
442+
<uc-btn-ui theme="secondary" set="onclick: on.cancelSlider" l10n="@text:cancel"> </uc-btn-ui>
443+
<uc-btn-ui theme="primary" set="onclick: on.applySlider" l10n="@text:apply"> </uc-btn-ui>
438444
</div>
439445
</uc-presence-toggle>
440446
</div>

‎blocks/CloudImageEditor/src/css/common.css

+11
Original file line numberDiff line numberDiff line change
@@ -433,6 +433,13 @@ uc-editor-filter-control > button .uc-title {
433433
text-transform: uppercase;
434434
}
435435

436+
uc-editor-button-control > button uc-icon,
437+
uc-editor-operation-control > button uc-icon,
438+
uc-editor-crop-button-control > button uc-icon,
439+
uc-editor-filter-control > button uc-icon {
440+
pointer-events: none;
441+
}
442+
436443
uc-editor-filter-control > button .uc-preview {
437444
position: absolute;
438445
right: 0;
@@ -869,6 +876,10 @@ uc-btn-ui > button {
869876
user-select: none;
870877
}
871878

879+
uc-btn-ui > button > uc-icon {
880+
pointer-events: none;
881+
}
882+
872883
uc-btn-ui .uc-text {
873884
white-space: nowrap;
874885
}

‎blocks/CloudImageEditor/src/elements/button/BtnUi.js

+6-1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export class BtnUi extends Block {
1717
theme: null,
1818
'aria-role': '',
1919
'aria-controls': '',
20+
'title-prop': '',
2021
};
2122

2223
this.defineAccessor('active', (active) => {
@@ -67,6 +68,10 @@ export class BtnUi extends Block {
6768
this.defineAccessor('aria-controls', (value) => {
6869
this.$['aria-controls'] = value || '';
6970
});
71+
72+
this.defineAccessor('title-prop', (value) => {
73+
this.$['title-prop'] = value || '';
74+
});
7075
}
7176

7277
set reverse(val) {
@@ -83,7 +88,7 @@ export class BtnUi extends Block {
8388
BtnUi.bindAttributes({ text: 'text', icon: 'icon', reverse: 'reverse', theme: 'theme' });
8489

8590
BtnUi.template = /* HTML */ `
86-
<button type="button" set="@role:aria-role; @aria-controls: aria-controls">
91+
<button type="button" set="@role:aria-role; @aria-controls: aria-controls;" l10n="@title:title-prop">
8792
<uc-icon set="className: iconCss; @name: icon; @hidden: !icon"></uc-icon>
8893
<div class="uc-text">{{text}}</div>
8994
</button>

‎blocks/Modal/Modal.js

+2
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,10 @@ export class Modal extends Block {
9393
this.sub('isOpen', (isOpen) => {
9494
if (isOpen) {
9595
this.show();
96+
this.setAttribute('aria-modal', 'true');
9697
} else {
9798
this.hide();
99+
this.setAttribute('aria-modal', 'false');
98100
}
99101
});
100102
}

‎blocks/UploadList/UploadList.js

+6-1
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,12 @@ export class UploadList extends UploaderBlock {
202202
UploadList.template = /* HTML */ `
203203
<uc-activity-header>
204204
<span class="uc-header-text">{{headerText}}</span>
205-
<button type="button" class="uc-mini-btn uc-close-btn" set="onclick: *closeModal">
205+
<button
206+
type="button"
207+
class="uc-mini-btn uc-close-btn"
208+
set="onclick: *closeModal"
209+
l10n="@title:a11y-activity-header-button-close"
210+
>
206211
<uc-icon name="close"></uc-icon>
207212
</button>
208213
</uc-activity-header>

‎locales/file-uploader/ar.js

+11-2
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,15 @@ export default {
108108
'images-only-accepted': 'يتم قبول ملفات الصور فقط.',
109109
'file-type-not-allowed': 'رفع هذه أنواع الملفات غير مسموح به.',
110110
'some-files-were-not-uploaded': 'لم يتم رفع بعض الملفات.',
111-
'file-item-edit-button': 'زر التحرير',
112-
'file-item-remove-button': 'زر الإزالة',
111+
'file-item-edit-button': 'تحرير',
112+
'file-item-remove-button': 'إزالة',
113+
'a11y-activity-header-button-close': 'إغلاق',
114+
'a11y-editor-tab-filters': 'فلاتر',
115+
'a11y-editor-tab-tuning': 'ضبط',
116+
'a11y-editor-tab-crop': 'قص',
117+
flip: 'قلب',
118+
mirror: 'مرآة',
119+
'a11y-cloud-editor-apply-filter': 'تطبيق فلتر {{name}}',
120+
'a11y-cloud-editor-apply-crop': 'تطبيق عملية {{name}}',
121+
'a11y-cloud-editor-apply-tuning': 'تطبيق ضبط {{name}}',
113122
};

‎locales/file-uploader/az.js

+11-2
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,15 @@ export default {
100100
'images-only-accepted': 'Yalnız şəkil faylları qəbul edilir.',
101101
'file-type-not-allowed': 'Bu fayl növlərinin yüklənməsinə icazə verilmir.',
102102
'some-files-were-not-uploaded': 'Bəzi fayllar yüklənmədi.',
103-
'file-item-edit-button': 'Düzəliş düyməsi',
104-
'file-item-remove-button': 'Sil düyməsi',
103+
'file-item-edit-button': 'Dəyişdir',
104+
'file-item-remove-button': 'Sil',
105+
'a11y-activity-header-button-close': 'Bağla',
106+
'a11y-editor-tab-filters': 'Filtrlər',
107+
'a11y-editor-tab-tuning': 'Tənzimləmə',
108+
'a11y-editor-tab-crop': 'Kəsmə',
109+
flip: 'Tərsinə çevir',
110+
mirror: 'Ayna',
111+
'a11y-cloud-editor-apply-filter': '{{name}} filtrini tətbiq et',
112+
'a11y-cloud-editor-apply-crop': '{{name}} əməliyyatını tətbiq et',
113+
'a11y-cloud-editor-apply-tuning': '{{name}} tənzimləməsini tətbiq et',
105114
};

‎locales/file-uploader/ca.js

+11-2
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,15 @@ export default {
103103
'images-only-accepted': "Només s'accepten fitxers d'imatge.",
104104
'file-type-not-allowed': "No està permès pujar fitxers d'aquest tipus.",
105105
'some-files-were-not-uploaded': "Alguns fitxers no s'han pujat.",
106-
'file-item-edit-button': "Botó d'edició",
107-
'file-item-remove-button': 'Botó de supressió',
106+
'file-item-edit-button': 'Editar',
107+
'file-item-remove-button': 'Eliminar',
108+
'a11y-activity-header-button-close': 'Tancar',
109+
'a11y-editor-tab-filters': 'Filtres',
110+
'a11y-editor-tab-tuning': 'Ajust',
111+
'a11y-editor-tab-crop': 'Retallar',
112+
flip: 'Capgirar',
113+
mirror: 'Mirall',
114+
'a11y-cloud-editor-apply-filter': 'Aplicar el filtre {{name}}',
115+
'a11y-cloud-editor-apply-crop': "Aplicar l'operació {{name}}",
116+
'a11y-cloud-editor-apply-tuning': "Aplicar l'ajust {{name}}",
108117
};

‎locales/file-uploader/cs.js

+11-2
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,15 @@ export default {
105105
'images-only-accepted': 'Přijímány jsou pouze obrázkové soubory.',
106106
'file-type-not-allowed': 'Nahrávání těchto typů souborů není povoleno.',
107107
'some-files-were-not-uploaded': 'Některé soubory nebyly nahrány.',
108-
'file-item-edit-button': 'Tlačítko upravit',
109-
'file-item-remove-button': 'Tlačítko odstranit',
108+
'file-item-edit-button': 'Upravit',
109+
'file-item-remove-button': 'Odstranit',
110+
'a11y-activity-header-button-close': 'Zavřít',
111+
'a11y-editor-tab-filters': 'Filtry',
112+
'a11y-editor-tab-tuning': 'Ladění',
113+
'a11y-editor-tab-crop': 'Oříznutí',
114+
flip: 'Převrátit',
115+
mirror: 'Zrcadlit',
116+
'a11y-cloud-editor-apply-filter': 'Použít filtr {{name}}',
117+
'a11y-cloud-editor-apply-crop': 'Použít operaci {{name}}',
118+
'a11y-cloud-editor-apply-tuning': 'Použít ladění {{name}}',
110119
};

‎locales/file-uploader/da.js

+11-2
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,15 @@ export default {
101101
'images-only-accepted': 'Kun billedfiler accepteres.',
102102
'file-type-not-allowed': 'Upload af denne filtype er ikke tilladt.',
103103
'some-files-were-not-uploaded': 'Nogle filer blev ikke uploadet.',
104-
'file-item-edit-button': 'Redigeringsknap',
105-
'file-item-remove-button': 'Fjernknap',
104+
'file-item-edit-button': 'Rediger',
105+
'file-item-remove-button': 'Fjern',
106+
'a11y-activity-header-button-close': 'Luk',
107+
'a11y-editor-tab-filters': 'Filtre',
108+
'a11y-editor-tab-tuning': 'Justering',
109+
'a11y-editor-tab-crop': 'Beskær',
110+
flip: 'Vend',
111+
mirror: 'Spejl',
112+
'a11y-cloud-editor-apply-filter': 'Anvend {{name}} filter',
113+
'a11y-cloud-editor-apply-crop': 'Anvend {{name}} handling',
114+
'a11y-cloud-editor-apply-tuning': 'Anvend {{name}} justering',
106115
};

‎locales/file-uploader/de.js

+11-2
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,15 @@ export default {
102102
'images-only-accepted': 'Nur Bilddateien werden akzeptiert.',
103103
'file-type-not-allowed': 'Das Hochladen dieser Dateitypen ist nicht erlaubt.',
104104
'some-files-were-not-uploaded': 'Einige Dateien wurden nicht hochgeladen.',
105-
'file-item-edit-button': 'Bearbeiten-Taste',
106-
'file-item-remove-button': 'Entfernen-Taste',
105+
'file-item-edit-button': 'Bearbeiten',
106+
'file-item-remove-button': 'Entfernen',
107+
'a11y-activity-header-button-close': 'Schließen',
108+
'a11y-editor-tab-filters': 'Filter',
109+
'a11y-editor-tab-tuning': 'Feinabstimmung',
110+
'a11y-editor-tab-crop': 'Zuschneiden',
111+
flip: 'Drehen',
112+
mirror: 'Spiegeln',
113+
'a11y-cloud-editor-apply-filter': '{{name}}-Filter anwenden',
114+
'a11y-cloud-editor-apply-crop': '{{name}}-Operation anwenden',
115+
'a11y-cloud-editor-apply-tuning': '{{name}}-Abstimmung anwenden',
107116
};

‎locales/file-uploader/el.js

+11-2
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,15 @@ export default {
102102
'images-only-accepted': 'Επιτρέπονται μόνο αρχεία εικόνων.',
103103
'file-type-not-allowed': 'Η μεταφόρτωση αυτών των τύπων αρχείων δεν επιτρέπεται.',
104104
'some-files-were-not-uploaded': 'Κάποια αρχεία δεν μεταφορτώθηκαν.',
105-
'file-item-edit-button': 'Κουμπί επεξεργασίας',
106-
'file-item-remove-button': 'Κουμπί αφαίρεσης',
105+
'file-item-edit-button': 'Επεξεργασία',
106+
'file-item-remove-button': 'Αφαίρεση',
107+
'a11y-activity-header-button-close': 'Κλείσιμο',
108+
'a11y-editor-tab-filters': 'Φίλτρα',
109+
'a11y-editor-tab-tuning': 'Ρύθμιση',
110+
'a11y-editor-tab-crop': 'Περικοπή',
111+
flip: 'Αναστροφή',
112+
mirror: 'Καθρέφτης',
113+
'a11y-cloud-editor-apply-filter': 'Εφαρμογή φίλτρου {{name}}',
114+
'a11y-cloud-editor-apply-crop': 'Εφαρμογή της λειτουργίας {{name}}',
115+
'a11y-cloud-editor-apply-tuning': 'Εφαρμογή της ρύθμισης {{name}}',
107116
};

‎locales/file-uploader/en.js

+11-2
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,15 @@ export default {
100100
'images-only-accepted': 'Only image files are accepted.',
101101
'file-type-not-allowed': 'Uploading of these file types is not allowed.',
102102
'some-files-were-not-uploaded': 'Some files were not uploaded.',
103-
'file-item-edit-button': 'Edit button',
104-
'file-item-remove-button': 'Remove button',
103+
'file-item-edit-button': 'Edit',
104+
'file-item-remove-button': 'Remove',
105+
'a11y-editor-tab-filters': 'Filters',
106+
'a11y-editor-tab-tuning': 'Tuning',
107+
'a11y-editor-tab-crop': 'Crop',
108+
'a11y-activity-header-button-close': 'Close',
109+
flip: 'Flip',
110+
mirror: 'Mirror',
111+
'a11y-cloud-editor-apply-filter': 'Apply {{name}} filter',
112+
'a11y-cloud-editor-apply-crop': 'Apply {{name}} operation',
113+
'a11y-cloud-editor-apply-tuning': 'Apply {{name}} tuning',
105114
};

‎locales/file-uploader/es.js

+11-2
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,15 @@ export default {
103103
'images-only-accepted': 'Solo se aceptan archivos de imagen.',
104104
'file-type-not-allowed': 'No se permite la subida de estos tipos de archivos.',
105105
'some-files-were-not-uploaded': 'Algunos archivos no fueron subidos.',
106-
'file-item-edit-button': 'Botón de edición',
107-
'file-item-remove-button': 'Botón de eliminación',
106+
'file-item-edit-button': 'Editar',
107+
'file-item-remove-button': 'Eliminar',
108+
'a11y-activity-header-button-close': 'Cerrar',
109+
'a11y-editor-tab-filters': 'Filtros',
110+
'a11y-editor-tab-tuning': 'Ajustes',
111+
'a11y-editor-tab-crop': 'Recortar',
112+
flip: 'Voltear',
113+
mirror: 'Espejo',
114+
'a11y-cloud-editor-apply-filter': 'Aplicar filtro {{name}}',
115+
'a11y-cloud-editor-apply-crop': 'Aplicar operación {{name}}',
116+
'a11y-cloud-editor-apply-tuning': 'Aplicar ajuste {{name}}',
108117
};

‎locales/file-uploader/et.js

+11-2
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,15 @@ export default {
100100
'images-only-accepted': 'Aktsepteeritud on ainult pildifailid.',
101101
'file-type-not-allowed': 'Nende failitüüpide üleslaadimine pole lubatud.',
102102
'some-files-were-not-uploaded': 'Mõned failid ei laetud üles.',
103-
'file-item-edit-button': 'Muuda nupp',
104-
'file-item-remove-button': 'Eemalda nupp',
103+
'file-item-edit-button': 'Redigeeri',
104+
'file-item-remove-button': 'Eemalda',
105+
'a11y-activity-header-button-close': 'Sulge',
106+
'a11y-editor-tab-filters': 'Filtrid',
107+
'a11y-editor-tab-tuning': 'Häälestus',
108+
'a11y-editor-tab-crop': 'Kärbi',
109+
flip: 'Pööra',
110+
mirror: 'Peegelda',
111+
'a11y-cloud-editor-apply-filter': 'Rakenda filter {{name}}',
112+
'a11y-cloud-editor-apply-crop': 'Rakenda toiming {{name}}',
113+
'a11y-cloud-editor-apply-tuning': 'Rakenda häälestus {{name}}',
105114
};

‎locales/file-uploader/fr.js

+11-2
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,15 @@ export default {
103103
'images-only-accepted': 'Seuls les fichiers image sont acceptés.',
104104
'file-type-not-allowed': "Le téléchargement de ces types de fichiers n'est pas autorisé.",
105105
'some-files-were-not-uploaded': "Certains fichiers n'ont pas été téléchargés.",
106-
'file-item-edit-button': "Bouton d'édition",
107-
'file-item-remove-button': 'Bouton de suppression',
106+
'file-item-edit-button': 'Modifier',
107+
'file-item-remove-button': 'Supprimer',
108+
'a11y-activity-header-button-close': 'Fermer',
109+
'a11y-editor-tab-filters': 'Filtres',
110+
'a11y-editor-tab-tuning': 'Réglage',
111+
'a11y-editor-tab-crop': 'Recadrer',
112+
flip: 'Retourner',
113+
mirror: 'Miroir',
114+
'a11y-cloud-editor-apply-filter': 'Appliquer le filtre {{name}}',
115+
'a11y-cloud-editor-apply-crop': "Appliquer l'opération {{name}}",
116+
'a11y-cloud-editor-apply-tuning': 'Appliquer le réglage {{name}}',
108117
};

0 commit comments

Comments
 (0)