From 87b52d0cd82b2e68472d9134ac13b2946fe91d47 Mon Sep 17 00:00:00 2001 From: Maciej Barelkowski Date: Mon, 18 Mar 2024 14:04:57 +0100 Subject: [PATCH 1/3] fix: apply label to popup menu search input Related to https://github.com/camunda/web-modeler/issues/7930 --- lib/features/popup-menu/PopupMenuComponent.js | 1 + .../popup-menu/PopupMenuComponentSpec.js | 25 +++++++++++++++++++ 2 files changed, 26 insertions(+) diff --git a/lib/features/popup-menu/PopupMenuComponent.js b/lib/features/popup-menu/PopupMenuComponent.js index 0561d22ed..208b7ba2e 100644 --- a/lib/features/popup-menu/PopupMenuComponent.js +++ b/lib/features/popup-menu/PopupMenuComponent.js @@ -236,6 +236,7 @@ export default function PopupMenuComponent(props) { ` } diff --git a/test/spec/features/popup-menu/PopupMenuComponentSpec.js b/test/spec/features/popup-menu/PopupMenuComponentSpec.js index 4a9cd0dde..a0295d428 100644 --- a/test/spec/features/popup-menu/PopupMenuComponentSpec.js +++ b/test/spec/features/popup-menu/PopupMenuComponentSpec.js @@ -735,6 +735,31 @@ describe('features/popup-menu - ', function() { }); + describe('a11y', function() { + + const entries = [ + { id: '1', label: 'Entry 1', description: 'Entry 1 description' }, + { id: '2', label: 'Entry 2' }, + { id: '3', label: 'Entry 3' }, + { id: '4', label: 'Entry 4' }, + { id: '5', label: 'Entry 5', search: 'foo' }, + { id: 'some_entry_id', label: 'Last' }, + { id: '7', label: 'Entry 7' , searchable: false } + ]; + + it('should have label for search input', async function() { + + // given + await createPopupMenu({ container, entries, title: 'Search', search: true }); + + const searchInput = domQuery('.djs-popup-search input', container); + + // then + expect(searchInput.getAttribute('aria-label')).to.eql('Search'); + }); + }); + + // helpers async function createPopupMenu(options) { From e96387fc92a7f7a486e40105826ca9fbf269063f Mon Sep 17 00:00:00 2001 From: Maciej Barelkowski Date: Mon, 18 Mar 2024 15:33:31 +0100 Subject: [PATCH 2/3] fix: apply label to search pad input Related to https://github.com/camunda/web-modeler/issues/7930 --- lib/features/search-pad/SearchPad.js | 21 ++++++++++++++++--- lib/features/search-pad/index.js | 2 ++ .../spec/features/search-pad/SearchPadSpec.js | 12 +++++++++++ 3 files changed, 32 insertions(+), 3 deletions(-) diff --git a/lib/features/search-pad/SearchPad.js b/lib/features/search-pad/SearchPad.js index d02eb39d3..6d5f89dd5 100644 --- a/lib/features/search-pad/SearchPad.js +++ b/lib/features/search-pad/SearchPad.js @@ -23,6 +23,7 @@ import { isKey } from '../keyboard/KeyboardUtil'; * @typedef {import('../../core/EventBus').default} EventBus * @typedef {import('../overlays/Overlays').default} Overlays * @typedef {import('../selection/Selection').default} Selection + * @typedef {import('../../i18n/translate/translate.js').default} Translate * * @typedef {import('../overlays/Overlays').OverlayAttrs} OverlayAttrs * @@ -40,8 +41,9 @@ import { isKey } from '../keyboard/KeyboardUtil'; * @param {EventBus} eventBus * @param {Overlays} overlays * @param {Selection} selection + * @param {Translate} translate */ -export default function SearchPad(canvas, eventBus, overlays, selection) { +export default function SearchPad(canvas, eventBus, overlays, selection, translate) { this._open = false; this._results = []; this._eventMaps = []; @@ -50,9 +52,10 @@ export default function SearchPad(canvas, eventBus, overlays, selection) { this._eventBus = eventBus; this._overlays = overlays; this._selection = selection; + this._translate = translate; // setup elements - this._container = domify(SearchPad.BOX_HTML); + this._container = this._getBoxHtml(); this._searchInput = domQuery(SearchPad.INPUT_SELECTOR, this._container); this._resultsContainer = domQuery(SearchPad.RESULTS_CONTAINER_SELECTOR, this._container); @@ -68,7 +71,8 @@ SearchPad.$inject = [ 'canvas', 'eventBus', 'overlays', - 'selection' + 'selection', + 'translate' ]; @@ -449,6 +453,17 @@ SearchPad.prototype._resetOverlay = function(element) { } }; +SearchPad.prototype._getBoxHtml = function() { + const box = domify(SearchPad.BOX_HTML); + const input = domQuery(SearchPad.INPUT_SELECTOR, box); + + if (input) { + input.setAttribute('aria-label', this._translate('Search')); + } + + return box; +}; + /** * Construct overlay object for the given bounding box. diff --git a/lib/features/search-pad/index.js b/lib/features/search-pad/index.js index bdc38a44b..9e249caff 100644 --- a/lib/features/search-pad/index.js +++ b/lib/features/search-pad/index.js @@ -1,5 +1,6 @@ import OverlaysModule from '../overlays'; import SelectionModule from '../selection'; +import TranslateModule from '../../i18n/translate/index.js'; import SearchPad from './SearchPad'; @@ -9,6 +10,7 @@ import SearchPad from './SearchPad'; */ export default { __depends__: [ + TranslateModule, OverlaysModule, SelectionModule ], diff --git a/test/spec/features/search-pad/SearchPadSpec.js b/test/spec/features/search-pad/SearchPadSpec.js index 9114431ee..5bd1045c3 100644 --- a/test/spec/features/search-pad/SearchPadSpec.js +++ b/test/spec/features/search-pad/SearchPadSpec.js @@ -454,6 +454,18 @@ describe('features/searchPad', function() { }); + + describe('a11y', function() { + + it('should have label for search input', inject(function(canvas) { + + // given + var input = domQuery(SearchPad.INPUT_SELECTOR, canvas.getContainer()); + + // then + expect(input.getAttribute('aria-label')).to.eql('Search'); + })); + }); }); From 6958cc5db536e10816cf0e5388445b7fc172cc2c Mon Sep 17 00:00:00 2001 From: Maciej Barelkowski Date: Tue, 19 Mar 2024 09:46:55 +0100 Subject: [PATCH 3/3] chore: apply suggestions from code review Co-authored-by: Nico Rehwaldt --- lib/features/search-pad/SearchPad.js | 2 +- test/spec/features/search-pad/SearchPadSpec.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/features/search-pad/SearchPad.js b/lib/features/search-pad/SearchPad.js index 6d5f89dd5..a830636e1 100644 --- a/lib/features/search-pad/SearchPad.js +++ b/lib/features/search-pad/SearchPad.js @@ -458,7 +458,7 @@ SearchPad.prototype._getBoxHtml = function() { const input = domQuery(SearchPad.INPUT_SELECTOR, box); if (input) { - input.setAttribute('aria-label', this._translate('Search')); + input.setAttribute('aria-label', this._translate('Search in diagram')); } return box; diff --git a/test/spec/features/search-pad/SearchPadSpec.js b/test/spec/features/search-pad/SearchPadSpec.js index 5bd1045c3..a522732fa 100644 --- a/test/spec/features/search-pad/SearchPadSpec.js +++ b/test/spec/features/search-pad/SearchPadSpec.js @@ -463,7 +463,7 @@ describe('features/searchPad', function() { var input = domQuery(SearchPad.INPUT_SELECTOR, canvas.getContainer()); // then - expect(input.getAttribute('aria-label')).to.eql('Search'); + expect(input.getAttribute('aria-label')).to.eql('Search in diagram'); })); }); });