Add labels to inputs

lib/features/popup-menu/PopupMenuComponent.js

@@ -236,6 +236,7 @@ export default function PopupMenuComponent(props) {
             <input
                 ref=${ inputRef }
                 type="text"
+                aria-label="${ title }"
               />
           </div>
           ` }

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 in diagram'));
+  }
+
+  return box;
+};
+
 
 /**
  * Construct overlay object for the given bounding box.

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
   ],

test/spec/features/popup-menu/PopupMenuComponentSpec.js

@@ -735,6 +735,31 @@ describe('features/popup-menu - <PopupMenu>', 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) {
 

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 in diagram');
+    }));
+  });
 });