From 79130b4da95b66cfc076289db523913992ef29d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Mon, 5 Feb 2024 15:32:39 +0100 Subject: [PATCH] :sparkles: Improve a11y of paragraphs in modal + layout fixes --- .../styles/common/refactor/mixins.scss | 15 +++++ frontend/src/app/main/ui/alert.scss | 8 +-- frontend/src/app/main/ui/confirm.scss | 9 ++- frontend/src/app/main/ui/dashboard/team.scss | 5 +- frontend/src/app/main/ui/delete_shared.scss | 10 ++-- frontend/src/app/main/ui/export.cljs | 4 +- frontend/src/app/main/ui/export.scss | 29 +++++----- .../src/app/main/ui/workspace/libraries.cljs | 56 +++++++------------ .../src/app/main/ui/workspace/libraries.scss | 30 ++++++---- frontend/src/app/main/ui/workspace/nudge.scss | 6 +- 10 files changed, 89 insertions(+), 83 deletions(-) diff --git a/frontend/resources/styles/common/refactor/mixins.scss b/frontend/resources/styles/common/refactor/mixins.scss index 856d6ae03..f988cd0df 100644 --- a/frontend/resources/styles/common/refactor/mixins.scss +++ b/frontend/resources/styles/common/refactor/mixins.scss @@ -70,6 +70,21 @@ line-height: 1.2; } +@mixin headlineMediumTypography { + font-family: "worksans", sans-serif; + font-size: $fs-16; + line-height: 1.4; + text-transform: uppercase; + font-weight: normal; +} + +@mixin bodyLargeTypography { + font-family: "worksans", sans-serif; + font-size: $fs-16; + line-height: 1.5; + font-weight: normal; +} + @mixin textEllipsis { max-width: 99%; overflow: hidden; diff --git a/frontend/src/app/main/ui/alert.scss b/frontend/src/app/main/ui/alert.scss index 2d4a8b1d7..33e202118 100644 --- a/frontend/src/app/main/ui/alert.scss +++ b/frontend/src/app/main/ui/alert.scss @@ -21,7 +21,7 @@ } .modal-title { - @include tabTitleTipography; + @include headlineMediumTypography; color: var(--modal-title-foreground-color); } @@ -30,12 +30,12 @@ } .modal-content { - @include titleTipography; + @include bodyLargeTypography; margin-bottom: $s-24; } .modal-hint { - @include titleTipography; + @include bodyLargeTypography; } .action-buttons { @@ -56,7 +56,7 @@ .modal-scd-msg, .modal-subtitle, .modal-msg { - @include titleTipography; + @include bodyLargeTypography; color: var(--modal-text-foreground-color); line-height: 1.5; } diff --git a/frontend/src/app/main/ui/confirm.scss b/frontend/src/app/main/ui/confirm.scss index ea944f3e5..0b4b08202 100644 --- a/frontend/src/app/main/ui/confirm.scss +++ b/frontend/src/app/main/ui/confirm.scss @@ -22,7 +22,7 @@ } .modal-title { - @include tabTitleTipography; + @include headlineMediumTypography; color: var(--modal-title-foreground-color); } @@ -31,7 +31,7 @@ } .modal-content { - @include titleTipography; + @include bodyLargeTypography; margin-bottom: $s-24; } @@ -49,7 +49,7 @@ } } .modal-component-name { - @include titleTipography; + @include bodyLargeTypography; } .modal-hint { @@ -74,7 +74,6 @@ .modal-scd-msg, .modal-subtitle, .modal-msg { - @include titleTipography; + @include bodyLargeTypography; color: var(--modal-text-foreground-color); - line-height: 1.5; } diff --git a/frontend/src/app/main/ui/dashboard/team.scss b/frontend/src/app/main/ui/dashboard/team.scss index 06c66d748..d528bf00c 100644 --- a/frontend/src/app/main/ui/dashboard/team.scss +++ b/frontend/src/app/main/ui/dashboard/team.scss @@ -593,7 +593,7 @@ right: $s-32; } .modal-title { - @include tabTitleTipography; + @include headlineMediumTypography; height: $s-32; color: var(--modal-title-foreground-color); } @@ -643,8 +643,9 @@ .role-select { @include flexColumn; + row-gap: $s-8; .role-title { - @include titleTipography; + @include bodyLargeTypography; margin: 0; color: var(--modal-title-foreground-color); } diff --git a/frontend/src/app/main/ui/delete_shared.scss b/frontend/src/app/main/ui/delete_shared.scss index 84ec2e9b5..bcd69bfba 100644 --- a/frontend/src/app/main/ui/delete_shared.scss +++ b/frontend/src/app/main/ui/delete_shared.scss @@ -22,7 +22,7 @@ } .modal-title { - @include tabTitleTipography; + @include headlineMediumTypography; color: var(--modal-title-foreground-color); } @@ -40,10 +40,8 @@ } .element-list { - @include titleTipography; - .list-item { - @include titleTipography; - } + @include bodyLargeTypography; + color: var(--modal-text-foreground-color); } .action-buttons { @@ -64,7 +62,7 @@ .modal-scd-msg, .modal-subtitle, .modal-msg { - @include titleTipography; + @include bodyLargeTypography; color: var(--modal-text-foreground-color); line-height: 1.5; } diff --git a/frontend/src/app/main/ui/export.cljs b/frontend/src/app/main/ui/export.cljs index a9085b317..35dcc244d 100644 --- a/frontend/src/app/main/ui/export.cljs +++ b/frontend/src/app/main/ui/export.cljs @@ -138,8 +138,8 @@ (cond-> (:name shape) suffix (str suffix))] (when (:scale export) [:div {:class (stl/css :selection-scale)} - (dm/str (ust/format-precision (* width (:scale export)) 2) "px" - (ust/format-precision (* height (:scale export)) 2) "px")]) + (dm/str (ust/format-precision (* width (:scale export)) 2) "x" + (ust/format-precision (* height (:scale export)) 2))]) (when (:type export) [:div {:class (stl/css :selection-extension)} diff --git a/frontend/src/app/main/ui/export.scss b/frontend/src/app/main/ui/export.scss index 16e280ba9..0f687fe61 100644 --- a/frontend/src/app/main/ui/export.scss +++ b/frontend/src/app/main/ui/export.scss @@ -41,14 +41,14 @@ .title-text { @include flexCenter; - @include titleTipography; + @include bodyLargeTypography; padding: 0; margin: 0; color: var(--modal-title-foreground-color); padding-left: $s-4; } .progress { - @include titleTipography; + @include bodyLargeTypography; padding-left: $s-8; margin: 0; color: var(--modal-text-foreground-color); @@ -86,7 +86,7 @@ } .modal-title { - @include tabTitleTipography; + @include headlineMediumTypography; color: var(--modal-title-foreground-color); } @@ -125,7 +125,7 @@ } } .selection-title { - @include titleTipography; + @include bodyLargeTypography; color: var(--modal-text-foreground-color); } } @@ -160,7 +160,9 @@ border-radius: $br-8; .selection-btn { @include buttonStyle; - @include flexRow; + display: grid; + grid-template-columns: min-content auto 1fr auto auto; + align-items: center; width: 100%; height: 10%; gap: $s-8; @@ -176,21 +178,21 @@ } } .selection-name { - @include titleTipography; + @include bodyLargeTypography; @include textEllipsis; flex-grow: 1; color: var(--modal-text-foreground-color); text-align: start; } .selection-scale { - @include titleTipography; + @include bodyLargeTypography; @include textEllipsis; min-width: $s-108; padding: $s-12; color: var(--modal-text-foreground-color); } .selection-extension { - @include titleTipography; + @include bodyLargeTypography; @include textEllipsis; min-width: $s-72; padding: $s-12; @@ -199,7 +201,6 @@ } .image-wrapper { @include flexCenter; - height: 100%; min-height: $s-32; min-width: $s-32; background-color: var(--app-white); @@ -231,9 +232,8 @@ .modal-scd-msg, .modal-subtitle, .modal-msg { - @include titleTipography; + @include bodyLargeTypography; color: var(--modal-text-foreground-color); - line-height: 1.5; } .export-option { @@ -243,7 +243,8 @@ label { align-items: flex-start; .modal-subtitle { - @include tabTitleTipography; + // @include tabTitleTipography; + @include bodyLargeTypography; color: var(--modal-title-foreground-color); } } @@ -254,7 +255,7 @@ .option-content { @include flexColumn; - @include titleTipography; + @include bodyLargeTypography; } .file-entry { @@ -271,7 +272,7 @@ } } .file-name-label { - @include titleTipography; + @include bodyLargeTypography; } } &.loading { diff --git a/frontend/src/app/main/ui/workspace/libraries.cljs b/frontend/src/app/main/ui/workspace/libraries.cljs index 6232f7c23..3262f202b 100644 --- a/frontend/src/app/main/ui/workspace/libraries.cljs +++ b/frontend/src/app/main/ui/workspace/libraries.cljs @@ -70,36 +70,22 @@ (mf/defc describe-library-blocks [{:keys [components-count graphics-count colors-count typography-count] :as props}] + [:* + (when (pos? components-count) + [:li {:class (stl/css :element-count)} + (tr "workspace.libraries.components" components-count)]) - (let [last-one (cond - (> colors-count 0) :color - (> graphics-count 0) :graphics - (> components-count 0) :components)] - [:* - (when (pos? components-count) - [:* - [:span {:class (stl/css :element-count)} - (tr "workspace.libraries.components" components-count)] - (when (not= last-one :components) - [:span " · "])]) + (when (pos? graphics-count) + [:li {:class (stl/css :element-count)} + (tr "workspace.libraries.graphics" graphics-count)]) - (when (pos? graphics-count) - [:* - [:span {:class (stl/css :element-count)} - (tr "workspace.libraries.graphics" graphics-count)] - (when (not= last-one :graphics) - [:span " · "])]) + (when (pos? colors-count) + [:li {:class (stl/css :element-count)} + (tr "workspace.libraries.colors" colors-count)]) - (when (pos? colors-count) - [:* - [:span {:class (stl/css :element-count)} - (tr "workspace.libraries.colors" colors-count)] - (when (not= last-one :colors) - [:span " · "])]) - - (when (pos? typography-count) - [:span {:class (stl/css :element-count)} - (tr "workspace.libraries.typography" typography-count)])])) + (when (pos? typography-count) + [:li {:class (stl/css :element-count)} + (tr "workspace.libraries.typography" typography-count)])]) (mf/defc libraries-tab @@ -208,7 +194,7 @@ [:div {:class (stl/css :section-list-item)} [:div [:div {:class (stl/css :item-name)} (tr "workspace.libraries.file-library")] - [:div {:class (stl/css :item-contents)} + [:ul {:class (stl/css :item-contents)} [:& describe-library-blocks {:components-count (count components) :graphics-count (count media) :colors-count (count colors) @@ -229,7 +215,7 @@ :key (dm/str id)} [:div [:div {:class (stl/css :item-name)} name] - [:div {:class (stl/css :item-contents)} + [:ul {:class (stl/css :item-contents)} (let [components-count (count (or (ctkl/components-seq (:data library)) [])) graphics-count (count (dm/get-in library [:data :media] [])) colors-count (count (dm/get-in library [:data :colors] [])) @@ -262,7 +248,7 @@ :key (dm/str id)} [:div [:div {:class (stl/css :item-name)} name] - [:div {:class (stl/css :item-contents)} + [:ul {:class (stl/css :item-contents)} (let [components-count (dm/get-in library [:library-summary :components :count] 0) graphics-count (dm/get-in library [:library-summary :media :count] 0) colors-count (dm/get-in library [:library-summary :colors :count] 0) @@ -376,11 +362,11 @@ :key (dm/str id)} [:div [:div {:class (stl/css :item-name)} name] - [:div {:class (stl/css :item-contents)} (describe-library - (count components) - 0 - (count colors) - (count typographies))]] + [:ul {:class (stl/css :item-contents)} (describe-library + (count components) + 0 + (count colors) + (count typographies))]] [:input {:type "button" :class (stl/css-case :item-update true :disabled updating?) diff --git a/frontend/src/app/main/ui/workspace/libraries.scss b/frontend/src/app/main/ui/workspace/libraries.scss index 38e6836c8..2664f3209 100644 --- a/frontend/src/app/main/ui/workspace/libraries.scss +++ b/frontend/src/app/main/ui/workspace/libraries.scss @@ -39,7 +39,7 @@ } .modal-title { - @include tabTitleTipography; + @include headlineMediumTypography; margin-bottom: $s-16; color: var(--modal-title-foreground-color); } @@ -70,24 +70,18 @@ max-height: $s-320; margin-top: $s-12; overflow: auto; - padding-right: $s-8; .section-list-item { display: grid; grid-template-columns: 1fr auto; + column-gap: $s-12; margin-bottom: $s-24; &:last-child { margin-bottom: $s-8; } - .item-name { - @include titleTipography; + @include bodyLargeTypography; color: var(--library-name-foreground-color); } - .item-contents { - @include titleTipography; - color: var(--library-content-foreground-color); - } - .item-publish, .item-unpublish { @extend .button-primary; @@ -99,7 +93,7 @@ } .item-update { @extend .button-warning; - @include tabTitleTipography; + @include headlineMediumTypography; height: $s-32; min-width: $s-92; padding: $s-8 $s-24; @@ -143,7 +137,7 @@ } .section-title { - @include titleTipography; + @include bodyLargeTypography; color: var(--modal-title-foreground-color); margin-bottom: $s-12; } @@ -161,7 +155,7 @@ } } .section-list-empty { - @include titleTipography; + @include bodyLargeTypography; @include flexCenter; color: var(--empty-message-foreground-color); @@ -236,6 +230,18 @@ } } +.item-contents { + @include bodyLargeTypography; + color: var(--library-content-foreground-color); + display: flex; + flex-wrap: wrap; +} + .element-count { white-space: nowrap; + + &:not(:last-child)::after { + content: "·"; + margin-inline: $s-4; + } } diff --git a/frontend/src/app/main/ui/workspace/nudge.scss b/frontend/src/app/main/ui/workspace/nudge.scss index 5e58a036c..084645b45 100644 --- a/frontend/src/app/main/ui/workspace/nudge.scss +++ b/frontend/src/app/main/ui/workspace/nudge.scss @@ -20,7 +20,7 @@ } .modal-title { - @include tabTitleTipography; + @include headlineMediumTypography; color: var(--modal-title-foreground-color); } .modal-close-btn { @@ -30,7 +30,7 @@ .modal-content { @include flexColumn; gap: $s-24; - @include titleTipography; + @include bodyLargeTypography; margin-bottom: $s-24; } @@ -42,7 +42,7 @@ } .modal-msg { - @include titleTipography; + @include bodyLargeTypography; color: var(--modal-text-foreground-color); line-height: 1.5; }