diff --git a/elements/nuxeo-data-grid/nuxeo-document-grid-thumbnail.js b/elements/nuxeo-data-grid/nuxeo-document-grid-thumbnail.js
index 966ae39f37..ad67e63456 100644
--- 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,7 @@ Polymer({
       }
 
       .bubbleBox .select {
-        display: none;
+        // display: none;
         position: absolute;
         top: 1rem;
         left: 1rem;
@@ -142,7 +141,7 @@ Polymer({
       }
 
       .bubbleBox .actions {
-        display: none;
+        // display: none;
         background-color: var(--nuxeo-box);
         position: absolute;
         bottom: 0;
@@ -159,11 +158,11 @@ Polymer({
         @apply --nuxeo-action-hover;
       }
 
-      .bubbleBox:hover .actions,
+      /* .bubbleBox:hover .actions,
       .bubbleBox:hover .select,
       .bubbleBox[selection-mode] .select {
         display: block;
-      }
+      } */
 
       .bubbleBox:hover .select:hover {
         border: 2px solid var(--nuxeo-button-primary);
@@ -189,35 +188,67 @@ 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;
+      }
+
+      /* div.actions *:focus-visible {
+        outline: none;
+      } */
+
+      /* :host *:focus-visible {
+        outline: none;
+      } */
     </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">
-          <div class="dataContainer">
-            <div class="title" id="title">[[doc.title]]</div>
-            <nuxeo-tag>[[formatDocType(doc.type)]]</nuxeo-tag>
-            <nuxeo-tooltip for="title">[[doc.title]]</nuxeo-tooltip>
-          </div>
-        </a>
-        <div class="actions">
-          <nuxeo-favorites-toggle-button document="[[doc]]"></nuxeo-favorites-toggle-button>
-          <nuxeo-download-button document="[[doc]]"></nuxeo-download-button>
-        </div>
-        <div class="select">
-          <paper-icon-button
-            noink
-            icon="icons:check"
-            title="[[_computeTitle(doc)]]"
-            on-tap="_onCheckBoxTap"
-            role="checkbox"
-            aria-checked="[[selected]]"
-          ></paper-icon-button>
+
+      <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>
+          <nuxeo-tooltip for="title">[[doc.title]]</nuxeo-tooltip>
         </div>
-      </template>
+      </a>
+      <div class="actions">
+        <nuxeo-favorites-toggle-button document="[[doc]]" tabindex="0"></nuxeo-favorites-toggle-button>
+        <nuxeo-download-button document="[[doc]]" tabindex="0"></nuxeo-download-button>
+      </div>
+      <div class="select" tabindex="0">
+        <paper-icon-button
+          noink
+          icon="icons:check"
+          title="[[_computeTitle(doc)]]"
+          on-tap="_onCheckBoxTap"
+          role="checkbox"
+          aria-checked="[[selected]]"
+        ></paper-icon-button>
+      </div>
     </div>
   `,
 
@@ -249,6 +280,10 @@ Polymer({
     index: {
       type: Number,
     },
+
+    tabindex: {
+      type: String,
+    },
   },
 
   observers: ['_selectedItemsChanged(selectedItems.splices)'],
@@ -263,6 +298,10 @@ Polymer({
       : '';
   },
 
+  computeTabIndex(index) {
+    return (Number(this.tabindex) + Number(index)).toString();
+  },
+
   handleClick(e) {
     if (this.selectionMode) {
       this._toogleSelect(e);
@@ -289,6 +328,9 @@ Polymer({
   },
 
   _computeTitle(doc) {
+    // const myComponent = document.querySelector('nuxeo-document-grid-thumbnail');
+    // const shadowRootMode = myComponent.shadowRoot.constructor.mode;
+    // console.log(shadowRootMode);
     return `${doc && doc.title}${this.i18n && this.i18n('command.select')}`;
   },
 });
diff --git a/elements/search/default/nuxeo-default-search-results.html b/elements/search/default/nuxeo-default-search-results.html
index 66abbd04e8..1747adec2d 100644
--- 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="0"
             selected$="{{selected}}"
             doc="[[item]]"
             index="[[index]]"
@@ -55,6 +55,16 @@
             selected-items="[[selectedItems]]"
           >
           </nuxeo-document-grid-thumbnail>
+          <!--  <div style="width: 100px; height: 100px; border: 1px solid black" tabindex="0">
+            <div style="width: 80px; height: 80px; border: 1px solid red; display: flex;" tabindex="0">
+                <div style="width: 50px; height: 50px; border: 1px solid green;" tabindex="0">
+                  Hi
+                </div>
+                <div style="width: 50px; height: 50px; border: 1px solid green;" tabindex="0">
+                  Hello
+                </div>
+            </div>
+          </div> -->
         </template>
       </nuxeo-data-grid>
 
@@ -144,16 +154,16 @@
         <nuxeo-data-table-column name="[[i18n('label.dublincore.nature')]]" field="dc:nature" hidden>
           <template>
             <nuxeo-tag hidden$="[[!item.properties.dc:nature]]"
-              >[[formatDirectory(item.properties.dc:nature)]]</nuxeo-tag
-            >
+              >[[formatDirectory(item.properties.dc:nature)]]
+            </nuxeo-tag>
           </template>
         </nuxeo-data-table-column>
 
         <nuxeo-data-table-column name="[[i18n('label.dublincore.coverage')]]" field="dc:coverage" hidden>
           <template>
             <nuxeo-tag hidden$="[[!item.properties.dc:coverage]]"
-              >[[formatDirectory(item.properties.dc:coverage)]]</nuxeo-tag
-            >
+              >[[formatDirectory(item.properties.dc:coverage)]]
+            </nuxeo-tag>
           </template>
         </nuxeo-data-table-column>
 
@@ -246,6 +256,10 @@
       _contentStoredInColdStorage(doc) {
         return this.hasFacet(doc, 'ColdStorage') && doc.properties && doc.properties['coldstorage:coldContent'];
       },
+
+      computeTabIndex(index) {
+        return (index + 1).toString();
+      },
     });
   </script>
 </dom-module>