From 80e92f76f1fc210727b8e3ddc4c2668c0de79c52 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 26 Sep 2024 15:02:32 +0200 Subject: [PATCH] Fix danger button accessibility --- .../users/user-edit/user-edit.component.html | 6 +++--- .../users/user-edit/user-edit.component.scss | 5 ----- .../user-edit/user-password.component.html | 2 +- .../user-edit/user-password.component.scss | 8 -------- .../my-account-danger-zone.component.html | 3 ++- .../my-account-danger-zone.component.scss | 10 ---------- .../my-account-danger-zone.component.ts | 1 - client/src/sass/application.scss | 3 ++- client/src/sass/class-helpers/_buttons.scss | 4 ++++ client/src/sass/class-helpers/_layout.scss | 2 +- client/src/sass/include/_mixins.scss | 19 ++++++++----------- client/src/sass/include/_variables.scss | 4 ++-- 12 files changed, 23 insertions(+), 44 deletions(-) delete mode 100644 client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss diff --git a/client/src/app/+admin/overview/users/user-edit/user-edit.component.html b/client/src/app/+admin/overview/users/user-edit/user-edit.component.html index 3335f8b77..89588c204 100644 --- a/client/src/app/+admin/overview/users/user-edit/user-edit.component.html +++ b/client/src/app/+admin/overview/users/user-edit/user-edit.component.html @@ -225,9 +225,9 @@
-
+
Send a link to reset the password by email to the user
- +
@@ -237,7 +237,7 @@
This user has two factor authentication enabled
- +
diff --git a/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss b/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss index efd1dd800..66a03d93e 100644 --- a/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss +++ b/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss @@ -24,11 +24,6 @@ my-select-custom-value { @include responsive-width($form-base-input-width); } -.danger-zone button { - @include danger-button; - @include disable-outline; -} - .dashboard { display: flex; flex-wrap: wrap; diff --git a/client/src/app/+admin/overview/users/user-edit/user-password.component.html b/client/src/app/+admin/overview/users/user-edit/user-password.component.html index 40cc0c1f5..ca6400f04 100644 --- a/client/src/app/+admin/overview/users/user-edit/user-password.component.html +++ b/client/src/app/+admin/overview/users/user-edit/user-password.component.html @@ -16,5 +16,5 @@ {{ formErrors.password }}
- + diff --git a/client/src/app/+admin/overview/users/user-edit/user-password.component.scss b/client/src/app/+admin/overview/users/user-edit/user-password.component.scss index 8586adb2b..ccf9cf9d0 100644 --- a/client/src/app/+admin/overview/users/user-edit/user-password.component.scss +++ b/client/src/app/+admin/overview/users/user-edit/user-password.component.scss @@ -5,11 +5,3 @@ input[type=text], input[type=password] { @include peertube-input-text(340px); } - -input[type=submit] { - margin-top: 10px; - - @include peertube-button; - @include danger-button; - @include disable-outline; -} diff --git a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.html b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.html index 6e22abeed..1275b713d 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.html +++ b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.html @@ -1,5 +1,6 @@

Once you delete your account, there is no going back. You will be asked to confirm this action.

- +
+ diff --git a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss deleted file mode 100644 index f955fc607..000000000 --- a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use '_variables' as *; -@use '_mixins' as *; - -.delete-me { - button { - @include peertube-button; - @include danger-button; - @include disable-outline; - } -} diff --git a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts index 7f135d01c..9541495ea 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts +++ b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts @@ -4,7 +4,6 @@ import { AuthService, ConfirmService, Notifier, RedirectService, User, UserServi @Component({ selector: 'my-account-danger-zone', templateUrl: './my-account-danger-zone.component.html', - styleUrls: [ './my-account-danger-zone.component.scss' ], standalone: true }) export class MyAccountDangerZoneComponent { diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 007710f7f..8ad43e2fe 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -111,8 +111,9 @@ input[readonly] { input, textarea { - outline: none; color: pvar(--inputForegroundColor); + + @include disable-outline; } button { diff --git a/client/src/sass/class-helpers/_buttons.scss b/client/src/sass/class-helpers/_buttons.scss index 5079492d6..3f0311e9e 100644 --- a/client/src/sass/class-helpers/_buttons.scss +++ b/client/src/sass/class-helpers/_buttons.scss @@ -32,6 +32,10 @@ @include tertiary-button; } +.danger-button { + @include danger-button; +} + .peertube-radio-container { @include peertube-radio-container; } diff --git a/client/src/sass/class-helpers/_layout.scss b/client/src/sass/class-helpers/_layout.scss index 0b7319b4f..08ca2a9a0 100644 --- a/client/src/sass/class-helpers/_layout.scss +++ b/client/src/sass/class-helpers/_layout.scss @@ -25,7 +25,7 @@ margin-bottom: 10px; &.pt-title-danger { - color: color.adjust($color: #c54130, $lightness: 10%); + color: pvar(--red); } } } diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index ae68faf58..d58bca61d 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -191,8 +191,8 @@ } @mixin grey-button { - background-color: pvar(--greyBackgroundColor); color: pvar(--greyForegroundColor); + background-color: pvar(--greyBackgroundColor); @include button-focus($grey-button-outline-color); @@ -214,27 +214,24 @@ } @mixin danger-button { - $color: color.adjust($color: #c54130, $lightness: 10%); - $text: #fff6f5; + background-color: pvar(--red); + color: pvar(--white); - background-color: $color; - color: $text; - - @include button-focus(color.scale($color, $alpha: -95%)); + @include button-focus(pvar(--red)); &:hover, &:active, - &:focus, - &[disabled] { - background-color: color.adjust($color: $color, $lightness: 10%); + &:focus:not(:focus-visible) { + opacity: 0.8; } &[disabled] { cursor: default; + opacity: 0.7; } my-global-icon { - @include apply-svg-color($text); + @include apply-svg-color(pvar(--white)); } } diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index 4843edde2..3e7e4fa38 100644 --- a/client/src/sass/include/_variables.scss +++ b/client/src/sass/include/_variables.scss @@ -31,8 +31,8 @@ $support-button-heart: #e83e8c; $bg-color: #fff; $fg-color: #212529; -$red: #EE0700; -$green: #278904; +$red: #dc3545; +$green: #198754; $white: #fff; $expanded-horizontal-margins: 150px;