feat: make drilldown buttons navigable via keyboard

Related to #778 --------- Co-authored-by: Maciej Barelkowski <[email protected]>
bpmn-io · Dec 7, 2023 · ab43a42 · ab43a42
1 parent ca60f89
commit ab43a42
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 9 deletions.
diff --git a/packages/dmn-js-decision-table/assets/css/dmn-js-decision-table.css b/packages/dmn-js-decision-table/assets/css/dmn-js-decision-table.css
@@ -419,7 +419,6 @@
   color: var(--view-drd-button-color);
   font-weight: bold;
   cursor: pointer;
-  outline: none;
 }
 
 .dmn-decision-table-container .view-drd .view-drd-button:hover {

diff --git a/packages/dmn-js-drd/assets/css/dmn-js-drd.css b/packages/dmn-js-drd/assets/css/dmn-js-drd.css
@@ -20,11 +20,21 @@
 
 .djs-overlay .drill-down-overlay {
   font-size: 16px;
-  background: var(--drill-down-overlay-background-color);
-  color: var(--drill-down-overlay-color);
   text-align: left;
+  padding: 1px;
+}
+
+.djs-overlay .drill-down-overlay > button,
+.djs-overlay .drill-down-overlay > span {
+  display: block;
+  padding: 2px 4px;
+  margin: 0;
+  border: none;
   border-radius: 1px;
-  padding: 0 2px;
+  background: var(--drill-down-overlay-background-color);
+  color: var(--drill-down-overlay-color);
+  font-size: inherit;
+  outline-offset: 2px;
 }
 
 .dmn-definitions {

diff --git a/packages/dmn-js-drd/src/features/drill-down/DrillDown.js b/packages/dmn-js-drd/src/features/drill-down/DrillDown.js
@@ -69,9 +69,12 @@ export default class DrillDown {
    *        CSS class that will be added to overlay in order to display icon.
    */
   addOverlay(element, className) {
+    const enabled = this._config.enabled !== false;
+
     const html = domify(`
       <div class="drill-down-overlay">
-        <span class="${className}"></span>
+        ${ enabled ? `<button type="button" class="${className}"></button>` :
+    `<span class="${className}"></span>`}
       </div>
     `);
 
@@ -84,9 +87,8 @@ export default class DrillDown {
     });
 
     // TODO(nikku): can we remove renamed to drillDown.enabled
-    if (this._config.enabled !== false) {
+    if (enabled) {
       domClasses(html).add('interactive');
-
       this.bindEventListener(element, html, overlayId);
     }
   }

diff --git a/packages/dmn-js-drd/test/spec/features/drill-down/DrillDownSpec.js b/packages/dmn-js-drd/test/spec/features/drill-down/DrillDownSpec.js
@@ -17,7 +17,9 @@ import {
 } from 'min-dom';
 
 import {
-  triggerClick
+  triggerClick,
+  triggerFocusIn,
+  triggerKeyEvent
 } from 'dmn-js-shared/test/util/EventUtil';
 
 var diagramXML = require('./DrillDown.dmn');
@@ -215,6 +217,7 @@ describe('features - drilldown', function() {
 
             // then
             expect(matches(overlayEl, '.interactive')).to.be.false;
+            expect(query('button', overlayEl)).to.be.null;
             expect(iconEl).to.exist;
           });
 
@@ -252,6 +255,29 @@ describe('features - drilldown', function() {
       }
     ));
 
+    // TODO(@barmac): browser emits 'click' event on ENTER key press
+    // but not for synthetic events
+    it.skip('on Enter key pressed', inject(
+      function(eventBus, drillDown, elementRegistry) {
+
+        // given
+        var drillSpy = sinon.spy(drillDown, 'drillDown');
+
+        var overlayEl = queryOverlay('Decision_Table');
+        console.log(overlayEl.innerHTML);
+
+        // when
+        // press ENTER
+        triggerFocusIn(overlayEl);
+        triggerKeyEvent(overlayEl, 'keydown', 13);
+
+        // then
+        expect(drillSpy).to.have.been.calledOnce;
+
+        expect(drillSpy).to.have.been.calledWith(overlayEl);
+      }
+    ));
+
   });
 
 

diff --git a/packages/dmn-js-literal-expression/assets/css/dmn-js-literal-expression.css b/packages/dmn-js-literal-expression/assets/css/dmn-js-literal-expression.css
@@ -157,7 +157,6 @@
   color: var(--view-drd-button-color);
   font-weight: bold;
   cursor: pointer;
-  outline: none;
 }
 
 .dmn-literal-expression-container .view-drd .view-drd-button:hover {