fix: add accessible label to drill down button

Related to camunda/camunda-modeler#4394
bpmn-io · Jun 25, 2024 · b4abfaa · b4abfaa
1 parent fcc38ba
commit b4abfaa
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/lib/features/drilldown/DrilldownOverlayBehavior.js b/lib/features/drilldown/DrilldownOverlayBehavior.js
@@ -10,6 +10,7 @@ import { getPlaneIdFromShape } from '../../util/DrilldownUtil';
  * @typedef {import('diagram-js/lib/core/ElementRegistry').default} ElementRegistry
  * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
  * @typedef {import('diagram-js/lib/features/overlays/Overlays').default} Overlays
+ * @typedef {import('diagram-js/lib/i18n/translate/translate').default} Translate
  *
  * @typedef {import('../../model/Types').Element} Element
  * @typedef {import('../../model/Types').Parent} Parent
@@ -26,16 +27,18 @@ var EMPTY_MARKER = 'bjs-drilldown-empty';
  * @param {EventBus} eventBus
  * @param {ElementRegistry} elementRegistry
  * @param {Overlays} overlays
+ * @param {Translate} translate
  */
 export default function DrilldownOverlayBehavior(
-    canvas, eventBus, elementRegistry, overlays
+    canvas, eventBus, elementRegistry, overlays, translate
 ) {
   CommandInterceptor.call(this, eventBus);
 
   this._canvas = canvas;
   this._eventBus = eventBus;
   this._elementRegistry = elementRegistry;
   this._overlays = overlays;
+  this._translate = translate;
 
   var self = this;
 
@@ -169,15 +172,19 @@ DrilldownOverlayBehavior.prototype._updateOverlayVisibility = function(element)
  */
 DrilldownOverlayBehavior.prototype._addOverlay = function(element) {
   var canvas = this._canvas,
-      overlays = this._overlays;
+      overlays = this._overlays,
+      bo = getBusinessObject(element);
 
   var existingOverlays = overlays.get({ element: element, type: 'drilldown' });
 
   if (existingOverlays.length) {
     this._removeOverlay(element);
   }
 
-  var button = domify('<button class="bjs-drilldown">' + ARROW_DOWN_SVG + '</button>');
+  var button = domify('<button type="button" class="bjs-drilldown">' + ARROW_DOWN_SVG + '</button>'),
+      elementName = bo.get('name') || bo.get('id'),
+      title = this._translate('Open {element}', { element: elementName });
+  button.setAttribute('title', title);
 
   button.addEventListener('click', function() {
     canvas.setRootElement(canvas.findRoot(getPlaneIdFromShape(element)));
@@ -207,5 +214,6 @@ DrilldownOverlayBehavior.$inject = [
   'canvas',
   'eventBus',
   'elementRegistry',
-  'overlays'
+  'overlays',
+  'translate'
 ];
diff --git a/test/spec/features/drilldown/DrilldownSpec.js b/test/spec/features/drilldown/DrilldownSpec.js
@@ -1,3 +1,5 @@
+import { expectToBeAccessible } from '@bpmn-io/a11y';
+
 import {
   inject
 } from 'test/TestHelper';
@@ -530,6 +532,18 @@ describe('features - drilldown', function() {
 
   });
 
+
+  describe('a11y', function() {
+
+    it('should report no violations', inject(async function(canvas) {
+
+      // given
+      const container = canvas.getContainer();
+
+      // then
+      await expectToBeAccessible(container);
+    }));
+  });
 });