From b4abfaa9d40e1763ca1499cdf68d89329d375b8b Mon Sep 17 00:00:00 2001
From: Maciej Barelkowski <maciej.barelkowski@camunda.com>
Date: Fri, 21 Jun 2024 15:33:12 +0200
Subject: [PATCH] fix: add accessible label to drill down button

Related to https://github.com/camunda/camunda-modeler/issues/4394
---
 .../drilldown/DrilldownOverlayBehavior.js        | 16 ++++++++++++----
 test/spec/features/drilldown/DrilldownSpec.js    | 14 ++++++++++++++
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/lib/features/drilldown/DrilldownOverlayBehavior.js b/lib/features/drilldown/DrilldownOverlayBehavior.js
index 5c2e8bb9d9..04770a91c4 100644
--- 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,9 +27,10 @@ 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);
 
@@ -36,6 +38,7 @@ export default function DrilldownOverlayBehavior(
   this._eventBus = eventBus;
   this._elementRegistry = elementRegistry;
   this._overlays = overlays;
+  this._translate = translate;
 
   var self = this;
 
@@ -169,7 +172,8 @@ 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' });
 
@@ -177,7 +181,10 @@ DrilldownOverlayBehavior.prototype._addOverlay = function(element) {
     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'
 ];
\ No newline at end of file
diff --git a/test/spec/features/drilldown/DrilldownSpec.js b/test/spec/features/drilldown/DrilldownSpec.js
index 2d8d96fbeb..fe9ce6237a 100644
--- 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);
+    }));
+  });
 });