✨ Add some accessibility on shortcuts panel

CHANGES.md

@@ -9,6 +9,7 @@
 - Show board miniature in manual overlay setting [Taiga #4475](https://tree.taiga.io/project/penpot/issue/4475)
 - Handoff visual improvements [Taiga #3124](https://tree.taiga.io/project/penpot/us/3124)
 - Dynamic alignment only in sight [Github 1971](https://github.com/penpot/penpot/issues/1971)
+- Add some accessibility to shortcut panel [Taiga #4713](https://tree.taiga.io/project/penpot/issue/4713)
 
 ### :bug: Bugs fixed
 

frontend/resources/styles/main/partials/sidebar.scss

@@ -433,8 +433,16 @@ button.collapse-sidebar {
         display: flex;
         justify-content: center;
         align-items: center;
-        &.close {
+        border: none;
-          transform: rotate(45deg);
+        background-color: transparent;
+        padding: 0;
+        .icon {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          &.close {
+            transform: rotate(45deg);
+          }
         }
       }
       svg {

frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs

@@ -9,6 +9,7 @@
    [app.common.data :as d]
    [app.config :as cf]
    [app.main.data.dashboard.shortcuts]
+   [app.main.data.events :as ev]
    [app.main.data.shortcuts :as ds]
    [app.main.data.viewer.shortcuts]
    [app.main.data.workspace :as dw]
@@ -18,6 +19,7 @@
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
+   [app.util.keyboard :as kbd]
    [app.util.strings :refer [matches-search]]
    [clojure.set :as set]
    [clojure.string]
@@ -450,7 +452,24 @@
         (mf/use-callback
          (fn [_]
            (reset! open-sections [[1]])
-           (reset! filter-term "")))]
+           (reset! filter-term "")))
+
+        manage-key-down
+        (mf/use-callback
+         (fn [event]
+           (when (kbd/esc? event)
+             (st/emit! (-> (dw/toggle-layout-flag :shortcuts)
+                           (vary-meta assoc ::ev/origin "shortcuts-panel"))))))
+
+        on-key-down
+        (mf/use-callback
+         (fn [event]
+           (when (kbd/enter? event)
+             (on-search-clear-click)
+             (dom/focus! (dom/get-element "shortcut-search")))))]
+    
+      (mf/with-effect []
+        (dom/focus! (dom/get-element "shortcut-search")))
 
     [:div.shortcuts
      [:div.shortcuts-header
@@ -465,13 +484,16 @@
          :type "text"
          :value @filter-term
          :on-change on-search-term-change
-         :auto-complete "off"}]
+         :auto-complete "off"
+         :on-key-down manage-key-down}]
        (if (str/empty? @filter-term)
          [:span.icon-wrapper
           i/search]
-         [:span.icon-wrapper.close
+         [:button.icon-wrapper
-          {:on-click on-search-clear-click}
+          {:on-click on-search-clear-click
-          i/close])]]
+           :on-key-down on-key-down}
+          [:span.icon.close
+           i/close]])]]
      (if match-any?
        [:div.shortcut-list
         (for [section all-shortcuts]