WEBUI-555 : implemented tab navigation in nuxeo data-grid cards

nuxeo · Sep 21, 2023 · 741bf4d · 741bf4d
1 parent b2cc992
commit 741bf4d
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 13 deletions.
diff --git a/elements/nuxeo-data-grid/nuxeo-document-grid-thumbnail.js b/elements/nuxeo-data-grid/nuxeo-document-grid-thumbnail.js
@@ -63,8 +63,7 @@ Polymer({
         border: 2px solid transparent;
       }
 
-      .bubbleBox:hover,
-      .bubbleBox:focus {
+      .bubbleBox:hover {
         z-index: 500;
         border: 2px solid var(--nuxeo-link-hover-color);
         box-shadow: 0 3px 5px rgba(0, 0, 0, 0.04);
@@ -108,7 +107,6 @@ Polymer({
       }
 
       .bubbleBox .select {
-        display: none;
         position: absolute;
         top: 1rem;
         left: 1rem;
@@ -142,7 +140,6 @@ Polymer({
       }
 
       .bubbleBox .actions {
-        display: none;
         background-color: var(--nuxeo-box);
         position: absolute;
         bottom: 0;
@@ -159,12 +156,6 @@ Polymer({
         @apply --nuxeo-action-hover;
       }
 
-      .bubbleBox:hover .actions,
-      .bubbleBox:hover .select,
-      .bubbleBox[selection-mode] .select {
-        display: block;
-      }
-
       .bubbleBox:hover .select:hover {
         border: 2px solid var(--nuxeo-button-primary);
         background-color: var(--nuxeo-button-primary);
@@ -189,14 +180,39 @@ Polymer({
       :host(.droptarget-hover) .bubbleBox {
         border: 2px dashed var(--nuxeo-grid-selected);
       }
+
+      :host(:focus) .bubbleBox {
+        z-index: 500;
+        border: 2px solid var(--nuxeo-link-hover-color);
+        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.04);
+      }
+
+      :host(:focus) .bubbleBox .actions,
+      :host(:focus) .bubbleBox .select,
+      .bubbleBox:hover .actions,
+      .bubbleBox:hover .select,
+      .bubbleBox[selection-mode] .select {
+        opacity: 1;
+        height: auto;
+        overflow: visible;
+        transition: opacity 0.2s ease, height 0.2s ease;
+      }
+
+      .bubbleBox .actions,
+      .bubbleBox .select {
+        opacity: 0;
+        height: 0;
+        overflow: hidden;
+        transition: opacity 0.2s ease, height 0.2s ease;
+      }
     </style>
 
     <div class="bubbleBox grid-box" selection-mode$="[[selectionMode]]">
-      <div class="thumbnailContainer" on-tap="handleClick">
+      <div class="thumbnailContainer" on-tap="handleClick" tabindex="0">
         <img src="[[_thumbnail(doc)]]" alt$="[[doc.title]]" />
       </div>
       <template is="dom-if" if="[[_hasDocument(doc)]]">
-        <a class="title" href$="[[urlFor(doc)]]" on-tap="handleClick">
+        <a class="title" href$="[[urlFor(doc)]]" on-tap="handleClick" tabindex="0">
           <div class="dataContainer">
             <div class="title" id="title">[[doc.title]]</div>
             <nuxeo-tag>[[formatDocType(doc.type)]]</nuxeo-tag>

diff --git a/elements/search/default/nuxeo-default-search-results.html b/elements/search/default/nuxeo-default-search-results.html
@@ -47,7 +47,7 @@
       >
         <template>
           <nuxeo-document-grid-thumbnail
-            tabindex$="{{tabIndex}}"
+            tabindex$="{{_computeTabIndex(index)}}"
             selected$="{{selected}}"
             doc="[[item]]"
             index="[[index]]"
@@ -246,6 +246,10 @@
       _contentStoredInColdStorage(doc) {
         return this.hasFacet(doc, 'ColdStorage') && doc.properties && doc.properties['coldstorage:coldContent'];
       },
+
+      _computeTabIndex(index) {
+        return (index + 1).toString();
+      },
     });
   </script>
 </dom-module>