mirror of
https://github.com/penpot/penpot.git
synced 2025-02-13 02:28:18 -05:00
✨ Fix elements-without-names accesibility issues
This commit is contained in:
parent
7303d311d5
commit
4ef876bf58
10 changed files with 51 additions and 14 deletions
|
@ -156,7 +156,8 @@
|
|||
:on-click #(import-template item)}
|
||||
[:div.template-card
|
||||
[:div.img-container
|
||||
[:img {:src (:thumbnail-uri item)}]]
|
||||
[:img {:src (:thumbnail-uri item)
|
||||
:alt (:name item)}]]
|
||||
[:div.card-name [:span (:name item)] [:span.icon i/download]]]])
|
||||
|
||||
[:div.card-container
|
||||
|
|
|
@ -54,7 +54,8 @@
|
|||
:team team
|
||||
:origin :hero}))))]
|
||||
[:div.team-hero
|
||||
[:img {:src "images/deco-team-banner.png" :border "0"}]
|
||||
[:img {:src "images/deco-team-banner.png" :border "0"
|
||||
:role "presentation"}]
|
||||
[:div.text
|
||||
[:div.title (tr "dasboard.team-hero.title")]
|
||||
[:div.info
|
||||
|
@ -63,7 +64,9 @@
|
|||
[:button.btn-primary.invite
|
||||
{:on-click invite-member}
|
||||
(tr "onboarding.choice.team-up.invite-members")]
|
||||
[:button.close {:on-click close-banner}
|
||||
[:button.close
|
||||
{:on-click close-banner
|
||||
:aria-label (tr "labels.close")}
|
||||
[:span i/close]]]))
|
||||
|
||||
(def builtin-templates
|
||||
|
@ -113,7 +116,8 @@
|
|||
:success "")]]
|
||||
|
||||
[:button.close
|
||||
{:on-click close-tutorial}
|
||||
{:on-click close-tutorial
|
||||
:aria-label (tr "labels.close")}
|
||||
[:span.icon i/close]]]))
|
||||
|
||||
(mf/defc interface-walkthrough
|
||||
|
@ -132,7 +136,8 @@
|
|||
[:a.btn-primary.action {:href " https://design.penpot.app/walkthrough" :target "_blank" :on-click handle-walkthrough-link}
|
||||
(tr "dasboard.walkthrough-hero.start")]]
|
||||
[:button.close
|
||||
{:on-click close-walkthrough}
|
||||
{:on-click close-walkthrough
|
||||
:aria-label (tr "labels.close")}
|
||||
[:span.icon i/close]]]))
|
||||
|
||||
(mf/defc project-item
|
||||
|
|
|
@ -227,7 +227,8 @@
|
|||
[:li.team-name {:on-click (partial team-selected (:id team))
|
||||
:key (dm/str (:id team))}
|
||||
[:span.team-icon
|
||||
[:img {:src (cf/resolve-team-photo-url team)}]]
|
||||
[:img {:src (cf/resolve-team-photo-url team)
|
||||
:alt (:name team)}]]
|
||||
[:span.team-text {:title (:name team)} (:name team)]])
|
||||
|
||||
[:hr]
|
||||
|
@ -354,7 +355,8 @@
|
|||
[:span.team-text (tr "dashboard.default-team-name")]]
|
||||
[:div.team-name
|
||||
[:span.team-icon
|
||||
[:img {:src (cf/resolve-team-photo-url team)}]]
|
||||
[:img {:src (cf/resolve-team-photo-url team)
|
||||
:alt (:name team)}]]
|
||||
[:span.team-text {:title (:name team)} (:name team)]])
|
||||
|
||||
[:span.switch-icon
|
||||
|
@ -487,7 +489,8 @@
|
|||
[:div.profile-section
|
||||
[:div.profile {:on-click #(reset! show true)
|
||||
:data-test "profile-btn"}
|
||||
[:img {:src photo}]
|
||||
[:img {:src photo
|
||||
:alt (:fullname profile)}]
|
||||
[:span (:fullname profile)]]
|
||||
|
||||
[:& dropdown {:on-close #(reset! show false)
|
||||
|
|
|
@ -81,7 +81,8 @@
|
|||
[:*
|
||||
[:& left-toolbar {:layout layout}]
|
||||
(if (:collapse-left-sidebar layout)
|
||||
[:button.collapse-sidebar.collapsed {:on-click #(st/emit! (dw/toggle-layout-flag :collapse-left-sidebar))}
|
||||
[:button.collapse-sidebar.collapsed {:on-click #(st/emit! (dw/toggle-layout-flag :collapse-left-sidebar))
|
||||
:aria-label (tr "workspace.sidebar.expand")}
|
||||
i/arrow-slide]
|
||||
[:& left-sidebar {:layout layout}])
|
||||
[:& right-sidebar {:section options-mode
|
||||
|
|
|
@ -461,6 +461,7 @@
|
|||
[:& export-progress-widget]
|
||||
[:button.document-history
|
||||
{:alt (tr "workspace.sidebar.history" (sc/get-tooltip :toggle-history))
|
||||
:aria-label (tr "workspace.sidebar.history" (sc/get-tooltip :toggle-history))
|
||||
:class (when (contains? layout :document-history) "selected")
|
||||
:on-click #(st/emit! (-> (dw/toggle-layout-flag :document-history)
|
||||
(vary-meta assoc ::ev/origin "workspace-header")))}
|
||||
|
|
|
@ -50,6 +50,7 @@
|
|||
[:li
|
||||
[:button.tooltip.tooltip-right
|
||||
{:alt (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image))
|
||||
:aria-label (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image))
|
||||
:on-click on-click}
|
||||
[:*
|
||||
i/image
|
||||
|
@ -72,6 +73,7 @@
|
|||
[:li
|
||||
[:button.tooltip.tooltip-right
|
||||
{:alt (tr "workspace.toolbar.move" (sc/get-tooltip :move))
|
||||
:aria-label (tr "workspace.toolbar.move" (sc/get-tooltip :move))
|
||||
:class (when (and (nil? selected-drawtool)
|
||||
(not edition)) "selected")
|
||||
:on-click #(st/emit! :interrupt)}
|
||||
|
@ -79,6 +81,7 @@
|
|||
[:li
|
||||
[:button.tooltip.tooltip-right
|
||||
{:alt (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame))
|
||||
:aria-label (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame))
|
||||
:class (when (= selected-drawtool :frame) "selected")
|
||||
:on-click (partial select-drawtool :frame)
|
||||
:data-test "artboard-btn"}
|
||||
|
@ -86,6 +89,7 @@
|
|||
[:li
|
||||
[:button.tooltip.tooltip-right
|
||||
{:alt (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect))
|
||||
:aria-label (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect))
|
||||
:class (when (= selected-drawtool :rect) "selected")
|
||||
:on-click (partial select-drawtool :rect)
|
||||
:data-test "rect-btn"}
|
||||
|
@ -93,6 +97,7 @@
|
|||
[:li
|
||||
[:button.tooltip.tooltip-right
|
||||
{:alt (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse))
|
||||
:aria-label (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse))
|
||||
:class (when (= selected-drawtool :circle) "selected")
|
||||
:on-click (partial select-drawtool :circle)
|
||||
:data-test "ellipse-btn"}
|
||||
|
@ -100,6 +105,7 @@
|
|||
[:li
|
||||
[:button.tooltip.tooltip-right
|
||||
{:alt (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text))
|
||||
:aria-label (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text))
|
||||
:class (when (= selected-drawtool :text) "selected")
|
||||
:on-click (partial select-drawtool :text)}
|
||||
i/text]]
|
||||
|
@ -109,6 +115,7 @@
|
|||
[:li
|
||||
[:button.tooltip.tooltip-right
|
||||
{:alt (tr "workspace.toolbar.curve" (sc/get-tooltip :draw-curve))
|
||||
:aria-label (tr "workspace.toolbar.curve" (sc/get-tooltip :draw-curve))
|
||||
:class (when (= selected-drawtool :curve) "selected")
|
||||
:on-click (partial select-drawtool :curve)
|
||||
:data-test "curve-btn"}
|
||||
|
@ -116,6 +123,7 @@
|
|||
[:li
|
||||
[:button.tooltip.tooltip-right
|
||||
{:alt (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path))
|
||||
:aria-label (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path))
|
||||
:class (when (= selected-drawtool :path) "selected")
|
||||
:on-click (partial select-drawtool :path)
|
||||
:data-test "path-btn"}
|
||||
|
@ -124,6 +132,7 @@
|
|||
[:li
|
||||
[:button.tooltip.tooltip-right
|
||||
{:alt (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment))
|
||||
:aria-label (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment))
|
||||
:class (when (= selected-drawtool :comments) "selected")
|
||||
:on-click (partial select-drawtool :comments)}
|
||||
i/chat]]]
|
||||
|
@ -132,6 +141,7 @@
|
|||
[:li
|
||||
[:button.tooltip.tooltip-right
|
||||
{:alt (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette))
|
||||
:aria-label (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette))
|
||||
:class (when (contains? layout :textpalette) "selected")
|
||||
:on-click (fn []
|
||||
(r/set-resize-type! :bottom)
|
||||
|
@ -144,6 +154,7 @@
|
|||
[:li
|
||||
[:button.tooltip.tooltip-right
|
||||
{:alt (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette))
|
||||
:aria-label (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette))
|
||||
:class (when (contains? layout :colorpalette) "selected")
|
||||
:on-click (fn []
|
||||
(r/set-resize-type! :bottom)
|
||||
|
@ -155,6 +166,7 @@
|
|||
[:li
|
||||
[:button.tooltip.tooltip-right.separator
|
||||
{:alt (tr "workspace.toolbar.shortcuts" (sc/get-tooltip :show-shortcuts))
|
||||
:aria-label (tr "workspace.toolbar.shortcuts" (sc/get-tooltip :show-shortcuts))
|
||||
:class (when (contains? layout :shortcuts) "selected")
|
||||
:on-click (fn []
|
||||
(let [is-sidebar-closed? (contains? layout :collapse-left-sidebar)]
|
||||
|
|
|
@ -16,7 +16,8 @@
|
|||
[{:keys [session profile] :as props}]
|
||||
[:li.tooltip.tooltip-bottom
|
||||
{:alt (:fullname profile)}
|
||||
[:img {:style {:border-color (:color session)}
|
||||
[:img {:alt (:fullname profile)
|
||||
:style {:border-color (:color session)}
|
||||
:src (cfg/resolve-profile-photo-url profile)}]])
|
||||
|
||||
(mf/defc active-sessions
|
||||
|
|
|
@ -56,7 +56,8 @@
|
|||
[:& shortcuts-container]
|
||||
[:*
|
||||
[:button.collapse-sidebar
|
||||
{:on-click handle-collapse}
|
||||
{:on-click handle-collapse
|
||||
:aria-label (tr "workspace.sidebar.collapse")}
|
||||
i/arrow-slide]
|
||||
[:& tab-container {:on-change-tab #(st/emit! (dw/go-to-layout %))
|
||||
:selected section
|
||||
|
|
|
@ -4374,6 +4374,12 @@ msgstr "Imported SVG Attributes"
|
|||
msgid "workspace.sidebar.sitemap"
|
||||
msgstr "Pages"
|
||||
|
||||
msgid "workspace.sidebar.collapse"
|
||||
msgstr "Collapse sidebar"
|
||||
|
||||
msgid "workspace.sidebar.expand"
|
||||
msgstr "Expand sidebar"
|
||||
|
||||
#: src/app/main/ui/workspace/header.cljs
|
||||
msgid "workspace.sitemap"
|
||||
msgstr "Sitemap"
|
||||
|
|
|
@ -4581,6 +4581,12 @@ msgstr "Atributos del SVG Importado"
|
|||
msgid "workspace.sidebar.sitemap"
|
||||
msgstr "Páginas"
|
||||
|
||||
msgid "workspace.sidebar.collapse"
|
||||
msgstr "Cerrar barra lateral"
|
||||
|
||||
msgid "workspace.sidebar.expand"
|
||||
msgstr "Abrir barra lateral"
|
||||
|
||||
#: src/app/main/ui/workspace/header.cljs
|
||||
msgid "workspace.sitemap"
|
||||
msgstr "Mapa del sitio"
|
||||
|
|
Loading…
Add table
Reference in a new issue