3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-12 02:31:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix labelled by on tab-panel component

Browse source
This commit is contained in:
Eva Marco 2024-08-21 12:59:00 +02:00
parent 89562d0231
commit 3f3c3a3df4
2 changed files with 12 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

18
frontend/src/app/main/ui/ds/tab_switcher.cljs
View file

@ -30,7 +30,9 @@
:tab-index (if selected nil -1) :tab-index (if selected nil -1)
:ref (fn [node] :ref (fn [node]
(on-ref node id)) (on-ref node id))
:data-id id})] :data-id id
;; This prop is to be used for accessibility purposes only.
:id id})]
[:li [:li
[:> :button props [:> :button props
@ -188,9 +190,11 @@
:selected selected :selected selected
:on-click on-click}]] :on-click on-click}]]
(let [active-tab (get-tab tabs selected)
[:section {:class (stl/css :tab-panel) content (obj/get active-tab "content")
:tab-index 0 id (obj/get active-tab "id")]
:role "tabpanel"} [:section {:class (stl/css :tab-panel)
(let [active-tab (get-tab tabs selected)] :tab-index 0
(obj/get active-tab "content"))]])) :role "tabpanel"
:aria-labelledby id}
content])]))

37
frontend/src/app/main/ui/workspace/sidebar.cljs
View file

@ -51,7 +51,6 @@
mode-inspect? (= options-mode :inspect) mode-inspect? (= options-mode :inspect)
project (mf/deref refs/workspace-project) project (mf/deref refs/workspace-project)
section (cond (or mode-inspect? (contains? layout :layers)) :layers section (cond (or mode-inspect? (contains? layout :layers)) :layers
(contains? layout :assets) :assets) (contains? layout :assets) :assets)
@ -148,38 +147,7 @@
:on-change-tab on-tab-change :on-change-tab on-tab-change
:class (stl/css :left-sidebar-tabs) :class (stl/css :left-sidebar-tabs)
:action-button-position "start" :action-button-position "start"
:action-button (mf/html [:& collapse-button {:on-click handle-collapse}])}] :action-button (mf/html [:& collapse-button {:on-click handle-collapse}])}]])]]))
#_[:& tab-container
{:on-change-tab on-tab-change
:selected section
:collapsable true
:handle-collapse handle-collapse
:header-class (stl/css :tab-spacing)}
[:& tab-element {:id :layers
:title (tr "workspace.sidebar.layers")}
[:article {:class (stl/css :layers-tab)
:style #js {"--height" (str size-pages "px")}}
[:& sitemap {:layout layout
:toggle-pages toggle-pages
:show-pages? @show-pages?
:size size-pages}]
(when @show-pages?
[:div {:class (stl/css :resize-area-horiz)
:on-pointer-down on-pointer-down-pages
:on-lost-pointer-capture on-lost-pointer-capture-pages
:on-pointer-move on-pointer-move-pages}])
[:& layers-toolbox {:size-parent size
:size size-pages}]]]
(when-not ^boolean mode-inspect?
[:& tab-element {:id :assets
:title (tr "workspace.toolbar.assets")}
[:& assets-toolbox {:size (- size 58)}]])]])]]))
;; --- Right Sidebar (Component) ;; --- Right Sidebar (Component)
@ -193,9 +161,6 @@
is-history? (contains? layout :document-history) is-history? (contains? layout :document-history)
is-inspect? (= section :inspect) is-inspect? (= section :inspect)
;;expanded? (mf/deref refs/inspect-expanded)
;;prev-expanded? (hooks/use-previous expanded?)
current-section* (mf/use-state :info) current-section* (mf/use-state :info)
current-section (deref current-section*) current-section (deref current-section*)