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
uploadcare · Aug 15, 2024 · 3090304 · 3090304
1 parent def5f47
commit 3090304
Show file tree

Hide file tree

Showing 43 changed files with 430 additions and 78 deletions.
diff --git a/blocks/CloudImageEditor/src/EditorButtonControl.js b/blocks/CloudImageEditor/src/EditorButtonControl.js
@@ -8,6 +8,7 @@ export class EditorButtonControl extends Block {
     title: '',
     icon: '',
     'on.click': null,
+    'title-prop': '',
   };
 
   initCallback() {
@@ -37,7 +38,7 @@ export class EditorButtonControl extends Block {
 }
 
 EditorButtonControl.template = /* HTML */ `
-  <button type="button" role="option">
+  <button type="button" role="option" l10n="@title:title-prop">
     <uc-icon set="@name: icon;"></uc-icon>
     <div class="uc-title" ref="title-el">{{title}}</div>
   </button>

diff --git a/blocks/CloudImageEditor/src/EditorCropButtonControl.js b/blocks/CloudImageEditor/src/EditorCropButtonControl.js
@@ -28,9 +28,14 @@ export class EditorCropButtonControl extends EditorButtonControl {
       /** @private */
       this._operation = operation;
       this.$['icon'] = operation;
+      this.bindL10n('title-prop', () =>
+        this.l10n('a11y-cloud-editor-apply-crop', {
+          name: this.l10n(operation).toLowerCase(),
+        }),
+      );
     });
 
-    this.$['on.click'] = (e) => {
+    this.$['on.click'] = () => {
       let prev = this.$['*cropperEl'].getValue(this._operation);
       let next = nextValue(this._operation, prev);
       this.$['*cropperEl'].setValue(this._operation, next);

diff --git a/blocks/CloudImageEditor/src/EditorFilterControl.js b/blocks/CloudImageEditor/src/EditorFilterControl.js
@@ -99,6 +99,12 @@ export class EditorFilterControl extends EditorButtonControl {
         this._filter = filter;
         this.$.isOriginal = filter === FAKE_ORIGINAL_FILTER;
         this.$.icon = this.$.isOriginal ? 'original' : 'slider';
+
+        this.bindL10n('title-prop', () =>
+          this.l10n('a11y-cloud-editor-apply-filter', {
+            name: filter.toLowerCase(),
+          }),
+        );
       },
     );
 
@@ -158,7 +164,7 @@ export class EditorFilterControl extends EditorButtonControl {
 }
 
 EditorFilterControl.template = /* HTML */ `
-  <button type="button" role="option">
+  <button type="button" role="option" l10n="@title:title-prop">
     <div class="uc-preview" ref="preview-el"></div>
     <uc-icon ref="icon-el" set="@name: icon; @size: iconSize;"></uc-icon>
   </button>

diff --git a/blocks/CloudImageEditor/src/EditorOperationControl.js b/blocks/CloudImageEditor/src/EditorOperationControl.js
@@ -21,6 +21,11 @@ export class EditorOperationControl extends EditorButtonControl {
       if (operation) {
         this._operation = operation;
         this.$['icon'] = operation;
+        this.bindL10n('title-prop', () =>
+          this.l10n('a11y-cloud-editor-apply-tuning', {
+            name: this.l10n(operation).toLowerCase(),
+          }),
+        );
         this.bindL10n('title', () => this.l10n(operation));
       }
     });

diff --git a/blocks/CloudImageEditor/src/EditorToolbar.js b/blocks/CloudImageEditor/src/EditorToolbar.js
@@ -28,7 +28,7 @@ function renderTabToggle(id) {
         ref="tab-toggle-${id}"
         data-id="${id}"
         icon="${id}"
-        set="onclick: on.clickTab; aria-role:tab_role; aria-controls:tab_${id}"
+        set="onclick: on.clickTab; aria-role:tab_role; aria-controls:tab_${id}; title-prop: a11y-editor-tab-${id}"
       >
       </uc-btn-ui>
     </uc-presence-toggle>
@@ -130,6 +130,11 @@ export class EditorToolbar extends Block {
       [`tab_${TabId.TUNING}`]: `tab_${TabId.TUNING}`,
       [`tab_${TabId.CROP}`]: `tab_${TabId.CROP}`,
       [`tab_${TabId.FILTERS}`]: `tab_${TabId.FILTERS}`,
+      cancel: 'cancel',
+      apply: 'apply',
+      'a11y-editor-tab-filters': 'a11y-editor-tab-filters',
+      'a11y-editor-tab-tuning': 'a11y-editor-tab-tuning',
+      'a11y-editor-tab-crop': 'a11y-editor-tab-crop',
     };
 
     /** @private */
@@ -421,8 +426,9 @@ EditorToolbar.template = /* HTML */ `
           <div ref="tabs-indicator" class="uc-tab-toggles_indicator"></div>
           ${ALL_TABS.map(renderTabToggle).join('')}
         </uc-presence-toggle>
-        <uc-btn-ui style="order: -1" theme="secondary-icon" icon="closeMax" set="onclick: on.cancel"> </uc-btn-ui>
-        <uc-btn-ui theme="primary-icon" icon="done" set="onclick: on.apply"> </uc-btn-ui>
+        <uc-btn-ui style="order: -1" theme="secondary-icon" icon="closeMax" set="onclick: on.cancel; title-prop:cancel">
+        </uc-btn-ui>
+        <uc-btn-ui theme="primary-icon" icon="done" set="onclick: on.apply; title-prop:apply"> </uc-btn-ui>
       </div>
     </uc-presence-toggle>
     <uc-presence-toggle
@@ -433,8 +439,8 @@ EditorToolbar.template = /* HTML */ `
         <uc-editor-slider ref="slider-el"></uc-editor-slider>
       </div>
       <div class="uc-controls-row">
-        <uc-btn-ui theme="secondary" set="onclick: on.cancelSlider;" l10n="@text:cancel"> </uc-btn-ui>
-        <uc-btn-ui theme="primary" set="onclick: on.applySlider;" l10n="@text:apply"> </uc-btn-ui>
+        <uc-btn-ui theme="secondary" set="onclick: on.cancelSlider" l10n="@text:cancel"> </uc-btn-ui>
+        <uc-btn-ui theme="primary" set="onclick: on.applySlider" l10n="@text:apply"> </uc-btn-ui>
       </div>
     </uc-presence-toggle>
   </div>

diff --git a/blocks/CloudImageEditor/src/css/common.css b/blocks/CloudImageEditor/src/css/common.css
@@ -433,6 +433,13 @@ uc-editor-filter-control > button .uc-title {
   text-transform: uppercase;
 }
 
+uc-editor-button-control > button uc-icon,
+uc-editor-operation-control > button uc-icon,
+uc-editor-crop-button-control > button uc-icon,
+uc-editor-filter-control > button uc-icon {
+  pointer-events: none;
+}
+
 uc-editor-filter-control > button .uc-preview {
   position: absolute;
   right: 0;
@@ -869,6 +876,10 @@ uc-btn-ui > button {
   user-select: none;
 }
 
+uc-btn-ui > button > uc-icon {
+  pointer-events: none;
+}
+
 uc-btn-ui .uc-text {
   white-space: nowrap;
 }

diff --git a/blocks/CloudImageEditor/src/elements/button/BtnUi.js b/blocks/CloudImageEditor/src/elements/button/BtnUi.js
@@ -17,6 +17,7 @@ export class BtnUi extends Block {
       theme: null,
       'aria-role': '',
       'aria-controls': '',
+      'title-prop': '',
     };
 
     this.defineAccessor('active', (active) => {
@@ -67,6 +68,10 @@ export class BtnUi extends Block {
     this.defineAccessor('aria-controls', (value) => {
       this.$['aria-controls'] = value || '';
     });
+
+    this.defineAccessor('title-prop', (value) => {
+      this.$['title-prop'] = value || '';
+    });
   }
 
   set reverse(val) {
@@ -83,7 +88,7 @@ export class BtnUi extends Block {
 BtnUi.bindAttributes({ text: 'text', icon: 'icon', reverse: 'reverse', theme: 'theme' });
 
 BtnUi.template = /* HTML */ `
-  <button type="button" set="@role:aria-role; @aria-controls: aria-controls">
+  <button type="button" set="@role:aria-role; @aria-controls: aria-controls;" l10n="@title:title-prop">
     <uc-icon set="className: iconCss; @name: icon; @hidden: !icon"></uc-icon>
     <div class="uc-text">{{text}}</div>
   </button>

diff --git a/blocks/Modal/Modal.js b/blocks/Modal/Modal.js
@@ -93,8 +93,10 @@ export class Modal extends Block {
     this.sub('isOpen', (isOpen) => {
       if (isOpen) {
         this.show();
+        this.setAttribute('aria-modal', 'true');
       } else {
         this.hide();
+        this.setAttribute('aria-modal', 'false');
       }
     });
   }

diff --git a/blocks/UploadList/UploadList.js b/blocks/UploadList/UploadList.js
@@ -202,7 +202,12 @@ export class UploadList extends UploaderBlock {
 UploadList.template = /* HTML */ `
   <uc-activity-header>
     <span class="uc-header-text">{{headerText}}</span>
-    <button type="button" class="uc-mini-btn uc-close-btn" set="onclick: *closeModal">
+    <button
+      type="button"
+      class="uc-mini-btn uc-close-btn"
+      set="onclick: *closeModal"
+      l10n="@title:a11y-activity-header-button-close"
+    >
       <uc-icon name="close"></uc-icon>
     </button>
   </uc-activity-header>

diff --git a/locales/file-uploader/ar.js b/locales/file-uploader/ar.js
@@ -108,6 +108,15 @@ export default {
   'images-only-accepted': 'يتم قبول ملفات الصور فقط.',
   'file-type-not-allowed': 'رفع هذه أنواع الملفات غير مسموح به.',
   'some-files-were-not-uploaded': 'لم يتم رفع بعض الملفات.',
-  'file-item-edit-button': 'زر التحرير',
-  'file-item-remove-button': 'زر الإزالة',
+  'file-item-edit-button': 'تحرير',
+  'file-item-remove-button': 'إزالة',
+  'a11y-activity-header-button-close': 'إغلاق',
+  'a11y-editor-tab-filters': 'فلاتر',
+  'a11y-editor-tab-tuning': 'ضبط',
+  'a11y-editor-tab-crop': 'قص',
+  flip: 'قلب',
+  mirror: 'مرآة',
+  'a11y-cloud-editor-apply-filter': 'تطبيق فلتر {{name}}',
+  'a11y-cloud-editor-apply-crop': 'تطبيق عملية {{name}}',
+  'a11y-cloud-editor-apply-tuning': 'تطبيق ضبط {{name}}',
 };
diff --git a/locales/file-uploader/az.js b/locales/file-uploader/az.js
@@ -100,6 +100,15 @@ export default {
   'images-only-accepted': 'Yalnız şəkil faylları qəbul edilir.',
   'file-type-not-allowed': 'Bu fayl növlərinin yüklənməsinə icazə verilmir.',
   'some-files-were-not-uploaded': 'Bəzi fayllar yüklənmədi.',
-  'file-item-edit-button': 'Düzəliş düyməsi',
-  'file-item-remove-button': 'Sil düyməsi',
+  'file-item-edit-button': 'Dəyişdir',
+  'file-item-remove-button': 'Sil',
+  'a11y-activity-header-button-close': 'Bağla',
+  'a11y-editor-tab-filters': 'Filtrlər',
+  'a11y-editor-tab-tuning': 'Tənzimləmə',
+  'a11y-editor-tab-crop': 'Kəsmə',
+  flip: 'Tərsinə çevir',
+  mirror: 'Ayna',
+  'a11y-cloud-editor-apply-filter': '{{name}} filtrini tətbiq et',
+  'a11y-cloud-editor-apply-crop': '{{name}} əməliyyatını tətbiq et',
+  'a11y-cloud-editor-apply-tuning': '{{name}} tənzimləməsini tətbiq et',
 };
diff --git a/locales/file-uploader/ca.js b/locales/file-uploader/ca.js
@@ -103,6 +103,15 @@ export default {
   'images-only-accepted': "Només s'accepten fitxers d'imatge.",
   'file-type-not-allowed': "No està permès pujar fitxers d'aquest tipus.",
   'some-files-were-not-uploaded': "Alguns fitxers no s'han pujat.",
-  'file-item-edit-button': "Botó d'edició",
-  'file-item-remove-button': 'Botó de supressió',
+  'file-item-edit-button': 'Editar',
+  'file-item-remove-button': 'Eliminar',
+  'a11y-activity-header-button-close': 'Tancar',
+  'a11y-editor-tab-filters': 'Filtres',
+  'a11y-editor-tab-tuning': 'Ajust',
+  'a11y-editor-tab-crop': 'Retallar',
+  flip: 'Capgirar',
+  mirror: 'Mirall',
+  'a11y-cloud-editor-apply-filter': 'Aplicar el filtre {{name}}',
+  'a11y-cloud-editor-apply-crop': "Aplicar l'operació {{name}}",
+  'a11y-cloud-editor-apply-tuning': "Aplicar l'ajust {{name}}",
 };
diff --git a/locales/file-uploader/cs.js b/locales/file-uploader/cs.js
@@ -105,6 +105,15 @@ export default {
   'images-only-accepted': 'Přijímány jsou pouze obrázkové soubory.',
   'file-type-not-allowed': 'Nahrávání těchto typů souborů není povoleno.',
   'some-files-were-not-uploaded': 'Některé soubory nebyly nahrány.',
-  'file-item-edit-button': 'Tlačítko upravit',
-  'file-item-remove-button': 'Tlačítko odstranit',
+  'file-item-edit-button': 'Upravit',
+  'file-item-remove-button': 'Odstranit',
+  'a11y-activity-header-button-close': 'Zavřít',
+  'a11y-editor-tab-filters': 'Filtry',
+  'a11y-editor-tab-tuning': 'Ladění',
+  'a11y-editor-tab-crop': 'Oříznutí',
+  flip: 'Převrátit',
+  mirror: 'Zrcadlit',
+  'a11y-cloud-editor-apply-filter': 'Použít filtr {{name}}',
+  'a11y-cloud-editor-apply-crop': 'Použít operaci {{name}}',
+  'a11y-cloud-editor-apply-tuning': 'Použít ladění {{name}}',
 };
diff --git a/locales/file-uploader/da.js b/locales/file-uploader/da.js
@@ -101,6 +101,15 @@ export default {
   'images-only-accepted': 'Kun billedfiler accepteres.',
   'file-type-not-allowed': 'Upload af denne filtype er ikke tilladt.',
   'some-files-were-not-uploaded': 'Nogle filer blev ikke uploadet.',
-  'file-item-edit-button': 'Redigeringsknap',
-  'file-item-remove-button': 'Fjernknap',
+  'file-item-edit-button': 'Rediger',
+  'file-item-remove-button': 'Fjern',
+  'a11y-activity-header-button-close': 'Luk',
+  'a11y-editor-tab-filters': 'Filtre',
+  'a11y-editor-tab-tuning': 'Justering',
+  'a11y-editor-tab-crop': 'Beskær',
+  flip: 'Vend',
+  mirror: 'Spejl',
+  'a11y-cloud-editor-apply-filter': 'Anvend {{name}} filter',
+  'a11y-cloud-editor-apply-crop': 'Anvend {{name}} handling',
+  'a11y-cloud-editor-apply-tuning': 'Anvend {{name}} justering',
 };
diff --git a/locales/file-uploader/de.js b/locales/file-uploader/de.js
@@ -102,6 +102,15 @@ export default {
   'images-only-accepted': 'Nur Bilddateien werden akzeptiert.',
   'file-type-not-allowed': 'Das Hochladen dieser Dateitypen ist nicht erlaubt.',
   'some-files-were-not-uploaded': 'Einige Dateien wurden nicht hochgeladen.',
-  'file-item-edit-button': 'Bearbeiten-Taste',
-  'file-item-remove-button': 'Entfernen-Taste',
+  'file-item-edit-button': 'Bearbeiten',
+  'file-item-remove-button': 'Entfernen',
+  'a11y-activity-header-button-close': 'Schließen',
+  'a11y-editor-tab-filters': 'Filter',
+  'a11y-editor-tab-tuning': 'Feinabstimmung',
+  'a11y-editor-tab-crop': 'Zuschneiden',
+  flip: 'Drehen',
+  mirror: 'Spiegeln',
+  'a11y-cloud-editor-apply-filter': '{{name}}-Filter anwenden',
+  'a11y-cloud-editor-apply-crop': '{{name}}-Operation anwenden',
+  'a11y-cloud-editor-apply-tuning': '{{name}}-Abstimmung anwenden',
 };
diff --git a/locales/file-uploader/el.js b/locales/file-uploader/el.js
@@ -102,6 +102,15 @@ export default {
   'images-only-accepted': 'Επιτρέπονται μόνο αρχεία εικόνων.',
   'file-type-not-allowed': 'Η μεταφόρτωση αυτών των τύπων αρχείων δεν επιτρέπεται.',
   'some-files-were-not-uploaded': 'Κάποια αρχεία δεν μεταφορτώθηκαν.',
-  'file-item-edit-button': 'Κουμπί επεξεργασίας',
-  'file-item-remove-button': 'Κουμπί αφαίρεσης',
+  'file-item-edit-button': 'Επεξεργασία',
+  'file-item-remove-button': 'Αφαίρεση',
+  'a11y-activity-header-button-close': 'Κλείσιμο',
+  'a11y-editor-tab-filters': 'Φίλτρα',
+  'a11y-editor-tab-tuning': 'Ρύθμιση',
+  'a11y-editor-tab-crop': 'Περικοπή',
+  flip: 'Αναστροφή',
+  mirror: 'Καθρέφτης',
+  'a11y-cloud-editor-apply-filter': 'Εφαρμογή φίλτρου {{name}}',
+  'a11y-cloud-editor-apply-crop': 'Εφαρμογή της λειτουργίας {{name}}',
+  'a11y-cloud-editor-apply-tuning': 'Εφαρμογή της ρύθμισης {{name}}',
 };
diff --git a/locales/file-uploader/en.js b/locales/file-uploader/en.js
@@ -100,6 +100,15 @@ export default {
   'images-only-accepted': 'Only image files are accepted.',
   'file-type-not-allowed': 'Uploading of these file types is not allowed.',
   'some-files-were-not-uploaded': 'Some files were not uploaded.',
-  'file-item-edit-button': 'Edit button',
-  'file-item-remove-button': 'Remove button',
+  'file-item-edit-button': 'Edit',
+  'file-item-remove-button': 'Remove',
+  'a11y-editor-tab-filters': 'Filters',
+  'a11y-editor-tab-tuning': 'Tuning',
+  'a11y-editor-tab-crop': 'Crop',
+  'a11y-activity-header-button-close': 'Close',
+  flip: 'Flip',
+  mirror: 'Mirror',
+  'a11y-cloud-editor-apply-filter': 'Apply {{name}} filter',
+  'a11y-cloud-editor-apply-crop': 'Apply {{name}} operation',
+  'a11y-cloud-editor-apply-tuning': 'Apply {{name}} tuning',
 };
diff --git a/locales/file-uploader/es.js b/locales/file-uploader/es.js
@@ -103,6 +103,15 @@ export default {
   'images-only-accepted': 'Solo se aceptan archivos de imagen.',
   'file-type-not-allowed': 'No se permite la subida de estos tipos de archivos.',
   'some-files-were-not-uploaded': 'Algunos archivos no fueron subidos.',
-  'file-item-edit-button': 'Botón de edición',
-  'file-item-remove-button': 'Botón de eliminación',
+  'file-item-edit-button': 'Editar',
+  'file-item-remove-button': 'Eliminar',
+  'a11y-activity-header-button-close': 'Cerrar',
+  'a11y-editor-tab-filters': 'Filtros',
+  'a11y-editor-tab-tuning': 'Ajustes',
+  'a11y-editor-tab-crop': 'Recortar',
+  flip: 'Voltear',
+  mirror: 'Espejo',
+  'a11y-cloud-editor-apply-filter': 'Aplicar filtro {{name}}',
+  'a11y-cloud-editor-apply-crop': 'Aplicar operación {{name}}',
+  'a11y-cloud-editor-apply-tuning': 'Aplicar ajuste {{name}}',
 };
diff --git a/locales/file-uploader/et.js b/locales/file-uploader/et.js
@@ -100,6 +100,15 @@ export default {
   'images-only-accepted': 'Aktsepteeritud on ainult pildifailid.',
   'file-type-not-allowed': 'Nende failitüüpide üleslaadimine pole lubatud.',
   'some-files-were-not-uploaded': 'Mõned failid ei laetud üles.',
-  'file-item-edit-button': 'Muuda nupp',
-  'file-item-remove-button': 'Eemalda nupp',
+  'file-item-edit-button': 'Redigeeri',
+  'file-item-remove-button': 'Eemalda',
+  'a11y-activity-header-button-close': 'Sulge',
+  'a11y-editor-tab-filters': 'Filtrid',
+  'a11y-editor-tab-tuning': 'Häälestus',
+  'a11y-editor-tab-crop': 'Kärbi',
+  flip: 'Pööra',
+  mirror: 'Peegelda',
+  'a11y-cloud-editor-apply-filter': 'Rakenda filter {{name}}',
+  'a11y-cloud-editor-apply-crop': 'Rakenda toiming {{name}}',
+  'a11y-cloud-editor-apply-tuning': 'Rakenda häälestus {{name}}',
 };
diff --git a/locales/file-uploader/fr.js b/locales/file-uploader/fr.js
@@ -103,6 +103,15 @@ export default {
   'images-only-accepted': 'Seuls les fichiers image sont acceptés.',
   'file-type-not-allowed': "Le téléchargement de ces types de fichiers n'est pas autorisé.",
   'some-files-were-not-uploaded': "Certains fichiers n'ont pas été téléchargés.",
-  'file-item-edit-button': "Bouton d'édition",
-  'file-item-remove-button': 'Bouton de suppression',
+  'file-item-edit-button': 'Modifier',
+  'file-item-remove-button': 'Supprimer',
+  'a11y-activity-header-button-close': 'Fermer',
+  'a11y-editor-tab-filters': 'Filtres',
+  'a11y-editor-tab-tuning': 'Réglage',
+  'a11y-editor-tab-crop': 'Recadrer',
+  flip: 'Retourner',
+  mirror: 'Miroir',
+  'a11y-cloud-editor-apply-filter': 'Appliquer le filtre {{name}}',
+  'a11y-cloud-editor-apply-crop': "Appliquer l'opération {{name}}",
+  'a11y-cloud-editor-apply-tuning': 'Appliquer le réglage {{name}}',
 };