From 34c33ff1b3bf59f23bdb7cfb882abf1df9bf990b Mon Sep 17 00:00:00 2001
From: swarnadipa-dev <swarnadipa.choudhury@globallogic.com>
Date: Thu, 21 Sep 2023 09:47:35 +0530
Subject: [PATCH] changes

---
 .../nuxeo-document-grid-thumbnail.js          | 40 +++++++++++++------
 .../default/nuxeo-default-search-results.html |  2 +-
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/elements/nuxeo-data-grid/nuxeo-document-grid-thumbnail.js b/elements/nuxeo-data-grid/nuxeo-document-grid-thumbnail.js
index 966ae39f37..382cec3a7e 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,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
index 66abbd04e8..332ddd839b 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]]"