diff --git a/blocks/CloudImageEditor/src/EditorButtonControl.js b/blocks/CloudImageEditor/src/EditorButtonControl.js index 0a29bbcd..89b8620a 100644 --- 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 */ ` - diff --git a/blocks/CloudImageEditor/src/EditorCropButtonControl.js b/blocks/CloudImageEditor/src/EditorCropButtonControl.js index 22767ae9..13b57e81 100644 --- 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 index 61369bf3..07cffd6b 100644 --- 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 */ ` - diff --git a/blocks/CloudImageEditor/src/EditorOperationControl.js b/blocks/CloudImageEditor/src/EditorOperationControl.js index 91df9b28..09d5bb25 100644 --- 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 index e8a21fed..6cba4365 100644 --- 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}" > @@ -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 */ `
${ALL_TABS.map(renderTabToggle).join('')} - - + + +
- - + +
diff --git a/blocks/CloudImageEditor/src/css/common.css b/blocks/CloudImageEditor/src/css/common.css index de989c04..bcd2985b 100644 --- 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 index 2951c967..eea02bfc 100644 --- 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 */ ` - diff --git a/blocks/Modal/Modal.js b/blocks/Modal/Modal.js index 39540d4b..193519d1 100644 --- 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 index 7d4e0703..5d441793 100644 --- a/blocks/UploadList/UploadList.js +++ b/blocks/UploadList/UploadList.js @@ -202,7 +202,12 @@ export class UploadList extends UploaderBlock { UploadList.template = /* HTML */ ` {{headerText}} - diff --git a/locales/file-uploader/en.js b/locales/file-uploader/en.js index a3ea59e0..e8e4c166 100644 --- 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', };