feat(a11y): Added title to button

uploadcare · Aug 10, 2024 · 8a47cd9 · 8a47cd9
1 parent 38d2871
commit 8a47cd9
Show file tree

Hide file tree

Showing 10 changed files with 109 additions and 9 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
@@ -16,6 +16,8 @@ function nextValue(operation, prev) {
   return null;
 }
 
+const L10N_PREFIX = 'a11y-editor-crop-button-control-';
+
 export class EditorCropButtonControl extends EditorButtonControl {
   initCallback() {
     super.initCallback();
@@ -28,6 +30,7 @@ export class EditorCropButtonControl extends EditorButtonControl {
       /** @private */
       this._operation = operation;
       this.$['icon'] = operation;
+      this.$['title-prop'] = `${L10N_PREFIX}${operation}`;
     });
 
     this.$['on.click'] = (e) => {

diff --git a/blocks/CloudImageEditor/src/EditorFilterControl.js b/blocks/CloudImageEditor/src/EditorFilterControl.js
@@ -5,6 +5,8 @@ import { FAKE_ORIGINAL_FILTER } from './EditorSlider.js';
 import { COMMON_OPERATIONS, transformationsToOperations } from './lib/transformationUtils.js';
 import { preloadImage } from './lib/preloadImage.js';
 
+const L10N_PREFIX = 'a11y-editor-filter-control-';
+
 export class EditorFilterControl extends EditorButtonControl {
   constructor() {
     super();
@@ -99,6 +101,7 @@ export class EditorFilterControl extends EditorButtonControl {
         this._filter = filter;
         this.$.isOriginal = filter === FAKE_ORIGINAL_FILTER;
         this.$.icon = this.$.isOriginal ? 'original' : 'slider';
+        this.$['title-prop'] = `${L10N_PREFIX}${filter}`;
       },
     );
 
@@ -158,7 +161,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
@@ -1,6 +1,8 @@
 import { EditorButtonControl } from './EditorButtonControl.js';
 import { COLOR_OPERATIONS_CONFIG } from './toolbar-constants.js';
 
+const L10N_PREFIX = 'a11y-editor-operation-control-';
+
 export class EditorOperationControl extends EditorButtonControl {
   /**
    * @private
@@ -21,6 +23,7 @@ export class EditorOperationControl extends EditorButtonControl {
       if (operation) {
         this._operation = operation;
         this.$['icon'] = operation;
+        this.$['title-prop'] = `${L10N_PREFIX}${operation}`;
         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/en.js b/locales/file-uploader/en.js
@@ -102,4 +102,65 @@ export default {
   'some-files-were-not-uploaded': 'Some files were not uploaded.',
   'file-item-edit-button': 'Edit button',
   'file-item-remove-button': 'Remove button',
+
+  'a11y-editor-crop-button-control-rotate': 'Rotate',
+  'a11y-editor-crop-button-control-mirror': 'Mirror',
+  'a11y-editor-crop-button-control-flip': 'Flip',
+
+  'a11y-editor-operation-control-brightness': 'brightness',
+  'a11y-editor-operation-control-exposure': 'exposure',
+  'a11y-editor-operation-control-gamma': 'gamma',
+  'a11y-editor-operation-control-contrast': 'contrast',
+  'a11y-editor-operation-control-saturation': 'saturation',
+  'a11y-editor-operation-control-vibrance': 'vibrance',
+  'a11y-editor-operation-control-warmth': 'warmth',
+  'a11y-editor-operation-control-enhance': 'enhance',
+
+  'a11y-editor-filter-control-original': 'original',
+  'a11y-editor-filter-control-adaris': 'adaris',
+  'a11y-editor-filter-control-briaril': 'briaril',
+  'a11y-editor-filter-control-calarel': 'calarel',
+  'a11y-editor-filter-control-carris': 'carris',
+  'a11y-editor-filter-control-cynarel': 'cynarel',
+  'a11y-editor-filter-control-cyren': 'cyren',
+  'a11y-editor-filter-control-elmet': 'elmet',
+  'a11y-editor-filter-control-elonni': 'elonni',
+  'a11y-editor-filter-control-enzana': 'enzana',
+  'a11y-editor-filter-control-erydark': 'erydark',
+  'a11y-editor-filter-control-fenralan': 'fenralan',
+  'a11y-editor-filter-control-ferand': 'ferand',
+  'a11y-editor-filter-control-galen': 'galen',
+  'a11y-editor-filter-control-gavin': 'gavin',
+  'a11y-editor-filter-control-gethriel': 'gethriel',
+  'a11y-editor-filter-control-iorill': 'iorill',
+  'a11y-editor-filter-control-iothari': 'iothari',
+  'a11y-editor-filter-control-iselva': 'iselva',
+  'a11y-editor-filter-control-jadis': 'jadis',
+  'a11y-editor-filter-control-lavra': 'lavra',
+  'a11y-editor-filter-control-misiara': 'misiara',
+  'a11y-editor-filter-control-namala': 'namala',
+  'a11y-editor-filter-control-nerion': 'nerion',
+  'a11y-editor-filter-control-nethari': 'nethari',
+  'a11y-editor-filter-control-pamaya': 'pamaya',
+  'a11y-editor-filter-control-sarnar': 'sarnar',
+  'a11y-editor-filter-control-sedis': 'sedis',
+  'a11y-editor-filter-control-sewen': 'sewen',
+  'a11y-editor-filter-control-sorahel': 'sorahel',
+  'a11y-editor-filter-control-sorlen': 'sorlen',
+  'a11y-editor-filter-control-tarian': 'tarian',
+  'a11y-editor-filter-control-thellassan': 'thellassan',
+  'a11y-editor-filter-control-varriel': 'varriel',
+  'a11y-editor-filter-control-varven': 'varven',
+  'a11y-editor-filter-control-vevera': 'vevera',
+  'a11y-editor-filter-control-virkas': 'virkas',
+  'a11y-editor-filter-control-yedis': 'yedis',
+  'a11y-editor-filter-control-yllara': 'yllara',
+  'a11y-editor-filter-control-zatvel': 'zatvel',
+  'a11y-editor-filter-control-zevcen': 'zevcen',
+
+  'a11y-editor-tab-filters': 'Filters',
+  'a11y-editor-tab-tuning': 'Tuning',
+  'a11y-editor-tab-crop': 'Crop',
+
+  'a11y-activity-header-button-close': 'Close',
 };