0
Fork 0
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:
Pablo Alba 2022-09-27 17:54:43 +02:00
parent 7303d311d5
commit 4ef876bf58
10 changed files with 51 additions and 14 deletions

View file

@ -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

View file

@ -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

View file

@ -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)

View file

@ -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

View file

@ -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")))}

View file

@ -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)]

View file

@ -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

View file

@ -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

View file

@ -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"

View file

@ -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"