WEBUI-1318: nuxeo-data-grid cards navigable when using a keyboard

nuxeo · Dec 13, 2023 · 639dd9b · 639dd9b
1 parent cdbf5c2
commit 639dd9b
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 10 deletions.
diff --git a/elements/nuxeo-results/nuxeo-default-results.js b/elements/nuxeo-results/nuxeo-default-results.js
@@ -82,11 +82,12 @@ Polymer({
         empty-label="[[emptyLabel]]"
         empty-label-when-filtered="[[emptyLabelWhenFiltered]]"
         selection-enabled
+        last-index="[[_lastIndex]]"
       >
         <template>
           <nuxeo-document-grid-thumbnail
             class="grid-box"
-            tabindex$="{{tabIndex}}"
+            tabindex$="{{_computeTabAndLastIndex(index)}"
             selected$="{{selected}}"
             selected-items="[[selectedItems]]"
             index="[[index]]"
@@ -263,6 +264,11 @@ Polymer({
       notify: true,
     },
 
+    _lastIndex: {
+      type: Number,
+      value: 0,
+    },
+
     emptyLabel: String,
     emptyLabelWhenFiltered: String,
   },
@@ -291,4 +297,10 @@ Polymer({
   _contentStoredInColdStorage(doc) {
     return this.hasFacet(doc, 'ColdStorage') && doc.properties && doc.properties['coldstorage:coldContent'];
   },
+
+  _computeTabAndLastIndex(index) {
+    const tabindex = index + 1;
+    this._lastIndex = this.nxProvider.resultsCount;
+    return tabindex.toString();
+  },
 });
diff --git a/elements/nuxeo-results/nuxeo-document-content.js b/elements/nuxeo-results/nuxeo-document-content.js
@@ -119,11 +119,12 @@ Polymer({
         selection-enabled
         draggable$="[[_hasWritePermission(document)]]"
         drop-target-filter="[[_dropTargetFilter]]"
+        last-index="[[_lastIndex]]"
       >
         <template>
           <nuxeo-document-grid-thumbnail
             class="grid-box"
-            tabindex$="{{tabIndex}}"
+            tabindex$="{{_computeTabAndLastIndex(index)}}"
             selected$="{{selected}}"
             index="[[index]]"
             doc="[[item]]"
@@ -363,9 +364,19 @@ Polymer({
      * The label to be dislayed when there are no results with filtering applied.
      */
     emptyLabelWhenFiltered: String,
+    _lastIndex: {
+      type: Number,
+      value: 0,
+    },
   },
 
   _contentStoredInColdStorage(doc) {
     return this.hasFacet(doc, 'ColdStorage') && doc.properties && doc.properties['coldstorage:coldContent'];
   },
+
+  _computeTabAndLastIndex(index) {
+    const tabindex = index + 1;
+    this._lastIndex = this.nxProvider.resultsCount;
+    return tabindex.toString();
+  },
 });
diff --git a/elements/nuxeo-results/nuxeo-document-trash-content.js b/elements/nuxeo-results/nuxeo-document-trash-content.js
@@ -129,11 +129,12 @@ Polymer({
         empty-label="[[emptyLabel]]"
         empty-label-when-filtered="[[emptyLabelWhenFiltered]]"
         selection-enabled
+        last-index="[[_lastIndex]]"
       >
         <template>
           <nuxeo-document-grid-thumbnail
             class="grid-box"
-            tabindex$="{{tabIndex}}"
+            tabindex$="{{_computeTabAndLastIndex(index)}}"
             selected$="{{selected}}"
             index="[[index]]"
             doc="[[item]]"
@@ -339,6 +340,10 @@ Polymer({
      * The label to be dislayed when there are no results with filtering applied.
      */
     emptyLabelWhenFiltered: String,
+    _lastIndex: {
+      type: Number,
+      value: 0,
+    },
   },
 
   _emptyTrash() {
@@ -368,4 +373,10 @@ Polymer({
       { field: 'dc:lastContributor', label: this.i18n('searchResults.sort.field.lastContributor'), order: 'asc' },
     ];
   },
+
+  _computeTabAndLastIndex(index) {
+    const tabindex = index + 1;
+    this._lastIndex = this.nxProvider.resultsCount;
+    return tabindex.toString();
+  },
 });
diff --git a/elements/search/default/nuxeo-default-search-results.html b/elements/search/default/nuxeo-default-search-results.html
@@ -44,10 +44,11 @@
         icon="nuxeo:view-thumbnails"
         empty-label="[[i18n('searchResults.noResults')]]"
         selection-enabled
+        last-index="[[_lastIndex]]"
       >
         <template>
           <nuxeo-document-grid-thumbnail
-            tabindex$="{{_computeTabIndex(index)}}"
+            tabindex$="{{_computeTabAndLastIndex(index)}}"
             selected$="{{selected}}"
             doc="[[item]]"
             index="[[index]]"
@@ -225,6 +226,11 @@
           type: Array,
           value: [],
         },
+
+        _lastIndex: {
+          type: Number,
+          value: 0,
+        },
       },
 
       attached() {
@@ -247,8 +253,10 @@
         return this.hasFacet(doc, 'ColdStorage') && doc.properties && doc.properties['coldstorage:coldContent'];
       },
 
-      _computeTabIndex(index) {
-        return (index + 1).toString();
+      _computeTabAndLastIndex(index) {
+        const tabindex = index + 1;
+        this._lastIndex = this.nxProvider.resultsCount;
+        return tabindex.toString();
       },
     });
   </script>

diff --git a/elements/search/document_picker/nuxeo-document_picker-search-results.html b/elements/search/document_picker/nuxeo-document_picker-search-results.html
@@ -22,10 +22,11 @@
         class="results"
         empty-label="[[i18n('searchResults.noResults')]]"
         selection-enabled
+        last-index="[[_lastIndex]]"
       >
         <template>
           <nuxeo-document-grid-thumbnail
-            tabindex$="{{tabIndex}}"
+            tabindex$="{{_computeTabAndLastIndex(index)}}"
             selected$="{{selected}}"
             doc="[[item]]"
             index="[[index]]"
@@ -41,6 +42,16 @@
       behaviors: [Nuxeo.LayoutBehavior],
       properties: {
         nxProvider: Object,
+        _lastIndex: {
+          type: Number,
+          value: 0,
+        },
+      },
+
+      _computeTabAndLastIndex(index) {
+        const tabindex = index + 1;
+        this._lastIndex = this.nxProvider.resultsCount;
+        return tabindex.toString();
       },
     });
   </script>

diff --git a/elements/search/expired/nuxeo-expired-search-results.html b/elements/search/expired/nuxeo-expired-search-results.html
@@ -40,10 +40,11 @@
         class="results"
         empty-label="[[i18n('searchResults.noResults')]]"
         selection-enabled
+        last-index="[[_lastIndex]]"
       >
         <template>
           <nuxeo-document-grid-thumbnail
-            tabindex$="{{tabIndex}}"
+            tabindex$="{{_computeTabAndLastIndex(index)}}"
             selected$="{{selected}}"
             doc="[[item]]"
             index="[[index]]"
@@ -202,6 +203,10 @@
           type: Array,
           value: [],
         },
+        _lastIndex: {
+          type: Number,
+          value: 0,
+        },
       },
 
       attached() {
@@ -224,6 +229,12 @@
       _contentStoredInColdStorage(doc) {
         return this.hasFacet(doc, 'ColdStorage') && doc.properties && doc.properties['coldstorage:coldContent'];
       },
+
+      _computeTabAndLastIndex(index) {
+        const tabindex = index + 1;
+        this._lastIndex = this.nxProvider.resultsCount;
+        return tabindex.toString();
+      },
     });
   </script>
 </dom-module>
diff --git a/elements/search/nxql/nuxeo-nxql-search-results.html b/elements/search/nxql/nuxeo-nxql-search-results.html
@@ -45,10 +45,11 @@
         icon="nuxeo:view-thumbnails"
         empty-label="[[i18n('searchResults.noResults')]]"
         selection-enabled
+        last-index="[[_lastIndex]]"
       >
         <template>
           <nuxeo-document-grid-thumbnail
-            tabindex$="{{tabIndex}}"
+            tabindex$="{{_computeTabAndLastIndex(index)}}"
             selected$="{{selected}}"
             doc="[[item]]"
             index="[[index]]"
@@ -195,11 +196,22 @@
       behaviors: [Nuxeo.LayoutBehavior],
       properties: {
         nxProvider: Object,
+
+        _lastIndex: {
+          type: Number,
+          value: 0,
+        },
       },
 
       _navigate(e) {
         this.fire('navigate', { doc: (e.model || e.detail).item, index: (e.detail || e.model).index });
       },
+
+      _computeTabAndLastIndex(index) {
+        const tabindex = index + 1;
+        this._lastIndex = this.nxProvider.resultsCount;
+        return tabindex.toString();
+      },
     });
   </script>
 </dom-module>
diff --git a/elements/search/trash/nuxeo-trash-search-results.html b/elements/search/trash/nuxeo-trash-search-results.html
@@ -44,10 +44,11 @@
         icon="nuxeo:view-thumbnails"
         empty-label="[[i18n('searchResults.noResults')]]"
         selection-enabled
+        last-index="[[_lastIndex]]"
       >
         <template>
           <nuxeo-document-grid-thumbnail
-            tabindex$="{{tabIndex}}"
+            tabindex$="{{_computeTabAndLastIndex(index)}}"
             selected$="{{selected}}"
             doc="[[item]]"
             index="[[index]]"
@@ -233,6 +234,11 @@
           type: Array,
           value: [],
         },
+
+        _lastIndex: {
+          type: Number,
+          value: 0,
+        },
       },
 
       attached() {
@@ -254,6 +260,12 @@
       _contentStoredInColdStorage(doc) {
         return this.hasFacet(doc, 'ColdStorage') && doc.properties && doc.properties['coldstorage:coldContent'];
       },
+
+      _computeTabAndLastIndex(index) {
+        const tabindex = index + 1;
+        this._lastIndex = this.nxProvider.resultsCount;
+        return tabindex.toString();
+      },
     });
   </script>
 </dom-module>