From f635f6d46452ee24c4924689972eb1b7ba903b34 Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Wed, 17 Jun 2026 09:47:59 +0200 Subject: [PATCH] wip3 --- frontend/src/app/main/ui/settings.cljs | 2 +- .../src/app/main/ui/settings/feedback.cljs | 6 ++- .../app/main/ui/settings/integrations.cljs | 8 ++-- .../src/app/main/ui/settings/options.cljs | 9 +++- .../src/app/main/ui/settings/password.cljs | 5 ++- .../src/app/main/ui/settings/profile.cljs | 5 ++- .../src/app/main/ui/settings/shortcuts.cljs | 43 +++++++++---------- .../src/app/main/ui/settings/shortcuts.scss | 23 +++++++--- .../src/app/main/ui/settings/sidebar.cljs | 5 ++- .../app/main/ui/settings/subscription.cljs | 6 +-- 10 files changed, 67 insertions(+), 45 deletions(-) diff --git a/frontend/src/app/main/ui/settings.cljs b/frontend/src/app/main/ui/settings.cljs index 5801d8e98f..dc5ecbde07 100644 --- a/frontend/src/app/main/ui/settings.cljs +++ b/frontend/src/app/main/ui/settings.cljs @@ -55,7 +55,7 @@ [:div {:class (stl/css :dashboard-content)} [:> header*] - [:section {:class (stl/css :dashboard-container)} + [:div {:class (stl/css :dashboard-container)} (case section :settings-profile [:> profile-page*] diff --git a/frontend/src/app/main/ui/settings/feedback.cljs b/frontend/src/app/main/ui/settings/feedback.cljs index 6b7e10fc0e..ee7fd553e9 100644 --- a/frontend/src/app/main/ui/settings/feedback.cljs +++ b/frontend/src/app/main/ui/settings/feedback.cljs @@ -98,7 +98,8 @@ :form form} ;; --- Feedback section - [:h2 {:class (stl/css :field-title :feedback-title)} (tr "feedback.title-contact-us")] + [:h2 {:class (stl/css :field-title :feedback-title) + :id "feedback-section-title"} (tr "feedback.title-contact-us")] [:p {:class (stl/css :field-text :feedback-title)} (tr "feedback.subtitle")] [:div {:class (stl/css :fields-row)} @@ -164,6 +165,7 @@ (:content errors/last-report)) props (mf/spread-props props {:error-report report})] - [:div {:class (stl/css :dashboard-settings)} + [:section {:class (stl/css :dashboard-settings) + :aria-labelledby "feedback-section-title"} [:div {:class (stl/css :form-container)} [:> feedback-form* props]]])) diff --git a/frontend/src/app/main/ui/settings/integrations.cljs b/frontend/src/app/main/ui/settings/integrations.cljs index e7d51438bc..a7a41f178a 100644 --- a/frontend/src/app/main/ui/settings/integrations.cljs +++ b/frontend/src/app/main/ui/settings/integrations.cljs @@ -617,10 +617,12 @@ (dom/set-html-title (tr "title.settings.integrations")) (st/emit! (du/fetch-access-tokens))) - [:div {:class (stl/css :integrations)} - [:> heading* {:level 1 + [:section {:class (stl/css :integrations) + :aria-labelledby "integrations-section-title"} + [:> heading* {:level 2 :typography t/title-large - :class (stl/css :color-primary)} + :class (stl/css :color-primary) + :id "integrations-section-title"} (tr "integrations.title")] (when (contains? cf/flags :mcp) diff --git a/frontend/src/app/main/ui/settings/options.cljs b/frontend/src/app/main/ui/settings/options.cljs index aca2ef130c..23932ba133 100644 --- a/frontend/src/app/main/ui/settings/options.cljs +++ b/frontend/src/app/main/ui/settings/options.cljs @@ -122,10 +122,15 @@ (mf/use-effect #(dom/set-html-title (tr "title.settings.options"))) - [:div {:class (stl/css :dashboard-settings)} + [:section {:class (stl/css :dashboard-settings) + :aria-labelledby "options-section-title"} [:* [:div {:class (stl/css :form-container) :data-testid "settings-form"} - [:h2 (tr "labels.settings")] + [:> heading* {:level 2 + :typography t/title-large + :class (stl/css :color-primary) + :id "options-section-title"} + (tr "labels.settings")] [:> options-form*]] (when (contains? cf/flags :render-switch) [:> webgl-settings* {:renderer renderer}])]])) diff --git a/frontend/src/app/main/ui/settings/password.cljs b/frontend/src/app/main/ui/settings/password.cljs index 301bff0d00..82ea1d2ee0 100644 --- a/frontend/src/app/main/ui/settings/password.cljs +++ b/frontend/src/app/main/ui/settings/password.cljs @@ -104,7 +104,8 @@ (mf/with-effect [] (dom/set-html-title (tr "title.settings.password"))) - [:section {:class (stl/css :dashboard-settings)} + [:section {:class (stl/css :dashboard-settings) + :aria-labelledby "password-section-title"} [:div {:class (stl/css :form-container)} - [:h2 (tr "dashboard.password-change")] + [:h2 {:id "password-section-title"} (tr "dashboard.password-change")] [:> password-form*]]]) diff --git a/frontend/src/app/main/ui/settings/profile.cljs b/frontend/src/app/main/ui/settings/profile.cljs index 124597a4e1..b66196ed7b 100644 --- a/frontend/src/app/main/ui/settings/profile.cljs +++ b/frontend/src/app/main/ui/settings/profile.cljs @@ -143,8 +143,9 @@ (mf/with-effect [] (dom/set-html-title (tr "title.settings.profile"))) - [:div {:class (stl/css :dashboard-settings)} + [:section {:class (stl/css :dashboard-settings) + :aria-labelledby "profile-section-title"} [:div {:class (stl/css :form-container)} - [:h2 (tr "labels.profile")] + [:h2 {:id "profile-section-title" }(tr "labels.profile")] [:> profile-photo-form*] [:> profile-form*]]]) diff --git a/frontend/src/app/main/ui/settings/shortcuts.cljs b/frontend/src/app/main/ui/settings/shortcuts.cljs index 0f434b5d26..6572d265f6 100644 --- a/frontend/src/app/main/ui/settings/shortcuts.cljs +++ b/frontend/src/app/main/ui/settings/shortcuts.cljs @@ -2,6 +2,7 @@ (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] + [app.common.i18n :refer [tr]] [app.main.data.dashboard.shortcuts] [app.main.data.modal :as modal] [app.main.data.shortcuts :as ds] @@ -128,8 +129,6 @@ :viewer-sc {}}] [:p "There are no not-assigned shortcuts."])])) - - (mf/defc shortcuts-page* [{:keys [profile]}] (let [section* (mf/use-state :all) @@ -152,28 +151,28 @@ (fn [new-section] (reset! section* (keyword new-section))))] - [:section {:class (stl/css :shortcuts-page) :aria-label "Shortcuts page"} - [:> heading* {:level 1 - :typography t/title-large - :class (stl/css :color-primary)} - "Shortcuts page"] - [:div {:class (stl/css :shortcuts-content)} - [:p "search-bar"] - [:button "restore all"] - [:p "This is the shortcuts page content."] - [:> tab-switcher* {:tabs tabs - :selected (name section) - :on-change handle-change-tab - :class (stl/css :shortcuts-switcher)} - (case section - :all - [:> all-shortcuts-section* {:profile profile}] + [:> heading* {:level 1 + :typography t/title-large + :class (stl/css :page-title)} + (tr "label.shortcuts")] - :personalized - [:> personalized-shortcuts-section* {:profile profile}] + [:div {:class (stl/css :shortcuts-content)} + [:p "search-bar"] + [:button "restore all"] + [:p "This is the shortcuts page content."] + [:> tab-switcher* {:tabs tabs + :selected (name section) + :on-change handle-change-tab + :class (stl/css :shortcuts-switcher)} + (case section + :all + [:> all-shortcuts-section* {:profile profile}] - :not-assigned - [:> not-assigned-shortcuts-section* {:profile profile}])]]])) \ No newline at end of file + :personalized + [:> personalized-shortcuts-section* {:profile profile}] + + :not-assigned + [:> not-assigned-shortcuts-section* {:profile profile}])]]]])) \ No newline at end of file diff --git a/frontend/src/app/main/ui/settings/shortcuts.scss b/frontend/src/app/main/ui/settings/shortcuts.scss index a5c460c709..b73c6f95c8 100644 --- a/frontend/src/app/main/ui/settings/shortcuts.scss +++ b/frontend/src/app/main/ui/settings/shortcuts.scss @@ -4,18 +4,29 @@ // // Copyright (c) KALEIDOS INC Sucursal en España SL +@use "ds/typography.scss" as t; +@use "ds/_borders.scss" as *; +@use "ds/spacing.scss" as *; +@use "ds/_sizes.scss" as *; +@use "ds/_utils.scss" as *; + .shortcuts-page { - height: 100%; - max-width: 31.25rem; - width: 36.25rem; - margin: 5rem auto 7.5rem; + display: flex; + justify-content: center; } .shortcuts-content { - padding: var(--sp-xl); display: flex; flex-direction: column; - justify-content: center; + max-width: $sz-500; + width: px2rem(580); + padding: var(--sp-xl); +} + +.page-title { + color: var(--color-foreground-primary); + width: 100%; + margin: px2rem(80) 0 px2rem(16); } .shortcuts-section { diff --git a/frontend/src/app/main/ui/settings/sidebar.cljs b/frontend/src/app/main/ui/settings/sidebar.cljs index e7beee8a55..d55758aea1 100644 --- a/frontend/src/app/main/ui/settings/sidebar.cljs +++ b/frontend/src/app/main/ui/settings/sidebar.cljs @@ -87,7 +87,8 @@ [:hr {:class (stl/css :sidebar-separator)}] - [:div {:class (stl/css :sidebar-content-section)} + [:nav {:class (stl/css :sidebar-content-section) + :aria-label (tr "labels.settings")} [:ul {:class (stl/css :sidebar-nav-settings)} [:li {:class (stl/css-case :current profile? :settings-item true) @@ -146,7 +147,7 @@ (mf/defc sidebar* {::mf/wrap [mf/memo]} [{:keys [profile section]}] - [:div {:class (stl/css :dashboard-sidebar :settings)} + [:aside {:class (stl/css :dashboard-sidebar :settings)} [:> sidebar-content* {:profile profile :section section}] [:> profile-section* {:profile profile}]]) diff --git a/frontend/src/app/main/ui/settings/subscription.cljs b/frontend/src/app/main/ui/settings/subscription.cljs index 86838c5790..3939c3b614 100644 --- a/frontend/src/app/main/ui/settings/subscription.cljs +++ b/frontend/src/app/main/ui/settings/subscription.cljs @@ -560,10 +560,10 @@ (tr "subscription.settings.enterprise")))})) (rt/nav :settings-subscription {} {::rt/replace true}))))) - [:section {:class (stl/css :dashboard-section)} + [:section {:class (stl/css :dashboard-section) + :aria-labelledyby "subscription-section-title"} [:div {:class (stl/css :dashboard-content)} - [:h2 {:class (stl/css :title-section)} (tr "subscription.labels")] - + [:h2 {:id "subscription-section-title" :class (stl/css :title-section)} (tr "subscription.labels")] [:div {:class (stl/css :your-subscription)} [:h3 {:class (stl/css :plan-section-title)} (tr "subscription.settings.section-plan")]