Sfoglia il codice sorgente

enhance(ux): improve accessibility for the property creation

charlie 1 anno fa
parent
commit
ee51887265

+ 4 - 0
resources/css/shui.css

@@ -236,6 +236,10 @@ html[data-theme=dark] {
   }
 }
 
+.ui__dialog-content {
+  @apply outline-none;
+}
+
 .ui__button-shortcut-key {
   @apply text-xs font-normal h-5 w-5 flex items-center justify-center rounded bg-gray-06-alpha;
 

+ 0 - 1
src/main/frontend/components/property.cljs

@@ -446,7 +446,6 @@
                                 (not= (:db/id original-block) (:db/id (state/get-edit-block)))) ; new block created
                        (edit-original-block)))
                    state)}
-  shortcut/disable-all-shortcuts
   [state block *property-key {:keys [class-schema? page? page-configure?]
                               :as opts}]
   (let [*show-new-property-config? (::show-new-property-config? state)

+ 15 - 4
src/main/frontend/components/property/value.cljs

@@ -122,12 +122,21 @@
                  (and many? (<= (count (get block (:db/ident property))) 1)))
          (shui/popup-hide!))))))
 
-(rum/defc calendar-inner <
-  {:will-unmount (fn [state]
+(rum/defcs calendar-inner <
+  (rum/local (str "calendar-inner-" (js/Date.now)) ::identity)
+  {:will-mount (fn [state]
+                 (js/setTimeout
+                   #(some-> @(::identity state)
+                      (js/document.getElementById)
+                      (.querySelector "[aria-selected=true]")
+                      (.focus)) 0)
+                 state)
+   :will-unmount (fn [state]
                    (shui/dialog-close!)
                    state)}
-  [id on-change value]
-  (let [initial-day (some-> value (.getTime) (js/Date.))
+  [state id on-change value]
+  (let [*ident (::identity state)
+        initial-day (or (some-> value (.getTime) (js/Date.)) (js/Date.))
         initial-month (when value
                         (js/Date. (.getFullYear value) (.getMonth value)))
         select-handler!
@@ -149,6 +158,7 @@
       {:mode "single"
        :initial-focus true
        :selected initial-day
+       :id @*ident
        :class-names {:months ""}
        :on-day-key-down (fn [^js d _ ^js e]
                           (when (= "Enter" (.-key e))
@@ -760,6 +770,7 @@
             [:label.flex.w-full.as-scalar-value-wrap.cursor-pointer
              (shui/checkbox {:class "jtrigger flex flex-row items-center"
                              :disabled config/publishing?
+                             :auto-focus editing?
                              :checked value
                              :on-checked-change add-property!
                              :on-key-down (fn [e]