From 4ef876bf58d9bfc85a107133a91014b66b1b834c Mon Sep 17 00:00:00 2001
From: Pablo Alba <pablo.alba@kaleidos.net>
Date: Tue, 27 Sep 2022 17:54:43 +0200
Subject: [PATCH 1/2] :sparkles: Fix elements-without-names accesibility issues
---
frontend/src/app/main/ui/dashboard.cljs | 9 +++++----
frontend/src/app/main/ui/dashboard/projects.cljs | 13 +++++++++----
frontend/src/app/main/ui/dashboard/sidebar.cljs | 9 ++++++---
frontend/src/app/main/ui/workspace.cljs | 3 ++-
frontend/src/app/main/ui/workspace/header.cljs | 1 +
.../src/app/main/ui/workspace/left_toolbar.cljs | 12 ++++++++++++
frontend/src/app/main/ui/workspace/presence.cljs | 3 ++-
frontend/src/app/main/ui/workspace/sidebar.cljs | 3 ++-
frontend/translations/en.po | 6 ++++++
frontend/translations/es.po | 6 ++++++
10 files changed, 51 insertions(+), 14 deletions(-)
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"
From 6a329fac2782a4dde496b22ae7c2def472800c5e Mon Sep 17 00:00:00 2001
From: Pablo Alba <pablo.alba@kaleidos.net>
Date: Wed, 28 Sep 2022 13:16:36 +0200
Subject: [PATCH 2/2] :sparkles: Fix html-lang-missing accesibility issues
---
frontend/src/app/util/dom.cljs | 4 ++++
frontend/src/app/util/i18n.cljs | 1 +
2 files changed, 5 insertions(+)
diff --git a/frontend/src/app/util/dom.cljs b/frontend/src/app/util/dom.cljs
index 26c361a32..d24e681af 100644
--- a/frontend/src/app/util/dom.cljs
+++ b/frontend/src/app/util/dom.cljs
@@ -53,6 +53,10 @@
[^string title]
(set! (.-title globals/document) title))
+(defn set-html-lang!
+ [^string lang]
+ (.setAttribute (.querySelector js/document "html") "lang" lang))
+
(defn set-html-theme-color
[^string color scheme]
(let [meta-node (.querySelector js/document "meta[name='theme-color']")]
diff --git a/frontend/src/app/util/i18n.cljs b/frontend/src/app/util/i18n.cljs
index c031ee9ec..42984b424 100644
--- a/frontend/src/app/util/i18n.cljs
+++ b/frontend/src/app/util/i18n.cljs
@@ -105,6 +105,7 @@
(add-watch locale ::browser-font
(fn [_ _ _ locale]
(log/info :hint "locale changed" :locale locale)
+ (dom/set-html-lang! locale)
(let [node (dom/get-body)]
(if (or (= locale "fa")
(= locale "ar"))