ELEMENTS-1676: made actions at bottom of nuxeo-data-grid operable usi…

…ng keyboard
nuxeo · Sep 25, 2023 · 5fddbfd · 5fddbfd
1 parent 77d8805
commit 5fddbfd
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/ui/actions/nuxeo-download-button.js b/ui/actions/nuxeo-download-button.js
@@ -49,7 +49,7 @@ import '../nuxeo-button-styles.js';
 
         <dom-if if="[[_isAvailable(document)]]">
           <template>
-            <div class="action" on-click="_download" tabindex="0">
+            <div class="action" on-click="_download" tabindex="-1">
               <paper-icon-button
                 icon="[[icon]]"
                 noink
@@ -107,6 +107,15 @@ import '../nuxeo-button-styles.js';
       };
     }
 
+    ready() {
+      super.ready();
+      this.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter') {
+          event.stopPropagation();
+        }
+      });
+    }
+
     _isAvailable(doc) {
       return this.hasContent(doc, this.formatPropertyXpath(this.xpath));
     }

diff --git a/ui/actions/nuxeo-favorites-toggle-button.js b/ui/actions/nuxeo-favorites-toggle-button.js
@@ -61,7 +61,7 @@ import '../nuxeo-button-styles.js';
 
         <dom-if if="[[_isAvailable(document)]]">
           <template>
-            <div class="action" tabindex="0">
+            <div class="action" tabindex="-1">
               <paper-icon-button
                 icon="[[icon]]"
                 noink
@@ -129,6 +129,11 @@ import '../nuxeo-button-styles.js';
       };
       window.addEventListener('removed-from-favorites', this.removeFromFavoritesHandler);
       this.addEventListener('click', this._toggle);
+      this.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter') {
+          event.stopPropagation();
+        }
+      });
     }
 
     disconnectedCallback() {
@@ -155,7 +160,7 @@ import '../nuxeo-button-styles.js';
           this.dispatchEvent(
             new CustomEvent('added-to-favorites', {
               composed: true,
-              bubbles: true,
+              bubbles: false,
               detail: { doc: this.document },
             }),
           );