diff --git a/frontend/src/app/main/ui/dashboard.cljs b/frontend/src/app/main/ui/dashboard.cljs index a1154ec93..be423286f 100644 --- a/frontend/src/app/main/ui/dashboard.cljs +++ b/frontend/src/app/main/ui/dashboard.cljs @@ -144,7 +144,7 @@ :section section})))] [:div.dashboard-templates-section {:class (when collapsed "collapsed")} - [:div.title + [:div.title [:div {:on-click toggle-collapse} [:span (tr "dashboard.libraries-and-templates")] [:span.icon (if collapsed i/arrow-up i/arrow-down)]]] @@ -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 @@ -195,8 +196,8 @@ (case section :dashboard-projects [:* - [:& projects-section {:team team - :projects projects + [:& projects-section {:team team + :projects projects :profile profile :default-project-id default-project-id}] [:& templates-section {:profile profile diff --git a/frontend/src/app/main/ui/dashboard/projects.cljs b/frontend/src/app/main/ui/dashboard/projects.cljs index 08b507302..8f10a151b 100644 --- a/frontend/src/app/main/ui/dashboard/projects.cljs +++ b/frontend/src/app/main/ui/dashboard/projects.cljs @@ -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 diff --git a/frontend/src/app/main/ui/dashboard/sidebar.cljs b/frontend/src/app/main/ui/dashboard/sidebar.cljs index eb11a8eda..4c87c6b80 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.cljs +++ b/frontend/src/app/main/ui/dashboard/sidebar.cljs @@ -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) diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs index da4f644b3..cbb8ba694 100644 --- a/frontend/src/app/main/ui/workspace.cljs +++ b/frontend/src/app/main/ui/workspace.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/header.cljs b/frontend/src/app/main/ui/workspace/header.cljs index 7657d319b..f51678593 100644 --- a/frontend/src/app/main/ui/workspace/header.cljs +++ b/frontend/src/app/main/ui/workspace/header.cljs @@ -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")))} diff --git a/frontend/src/app/main/ui/workspace/left_toolbar.cljs b/frontend/src/app/main/ui/workspace/left_toolbar.cljs index 95435b53e..458632e6b 100644 --- a/frontend/src/app/main/ui/workspace/left_toolbar.cljs +++ b/frontend/src/app/main/ui/workspace/left_toolbar.cljs @@ -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)] diff --git a/frontend/src/app/main/ui/workspace/presence.cljs b/frontend/src/app/main/ui/workspace/presence.cljs index 19b1dcd22..16225650f 100644 --- a/frontend/src/app/main/ui/workspace/presence.cljs +++ b/frontend/src/app/main/ui/workspace/presence.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs index e898b4e5a..1d8fbafde 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar.cljs @@ -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 diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 374a9cc61..485cf15d0 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -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" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 84d0d8f29..3bef0ce74 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -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"