From dc9c9500bf5f0fd66906576ee3df4f1c49a1871d Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 15 Mar 2023 14:20:26 +0100 Subject: Improve accessibility --- client/src/app/+search/search.component.html | 2 +- client/src/app/app.component.html | 8 +- client/src/app/app.component.ts | 8 +- client/src/app/menu/menu.component.html | 16 +-- client/src/app/menu/menu.component.scss | 2 - client/src/app/menu/notification.component.html | 7 +- .../shared-forms/markdown-textarea.component.html | 14 +- .../shared-forms/markdown-textarea.component.scss | 13 +- .../instance-about-accordion.component.html | 2 +- .../instance-about-accordion.component.scss | 3 +- .../shared/shared-main/angular/link.component.scss | 2 +- .../shared/shared-main/angular/link.component.ts | 9 +- .../shared/shared-main/feeds/feed.component.html | 4 +- .../shared/shared-main/feeds/feed.component.scss | 8 +- .../shared/shared-main/misc/help.component.html | 8 +- .../shared/shared-main/misc/help.component.scss | 6 - .../shared-share-modal/video-share.component.html | 141 +++++++++++---------- .../shared-share-modal/video-share.component.scss | 5 - .../video-thumbnail.component.html | 4 +- .../video-download.component.html | 2 +- .../video-filters-header.component.html | 8 +- .../video-filters-header.component.scss | 4 + .../video-miniature.component.html | 6 +- .../video-miniature.component.scss | 2 +- .../video-playlist-miniature.component.html | 6 +- .../video-playlist-miniature.component.scss | 2 +- client/src/sass/bootstrap.scss | 20 +-- client/src/sass/class-helpers/_common.scss | 24 ---- client/src/sass/class-helpers/_text.scss | 47 +++++++ client/src/sass/class-helpers/index.scss | 1 + client/src/sass/include/_bootstrap-variables.scss | 1 + client/src/sass/include/_miniature.scss | 2 +- client/src/sass/include/_mixins.scss | 19 +-- client/src/sass/ng-select.scss | 3 +- 34 files changed, 200 insertions(+), 209 deletions(-) create mode 100644 client/src/sass/class-helpers/_text.scss diff --git a/client/src/app/+search/search.component.html b/client/src/app/+search/search.component.html index c07dbab08..2530c87b7 100644 --- a/client/src/app/+search/search.component.html +++ b/client/src/app/+search/search.component.html @@ -22,7 +22,7 @@ -
+
{{ error }}
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html index 6a833b039..5fefffaf4 100644 --- a/client/src/app/app.component.html +++ b/client/src/app/app.component.html @@ -6,9 +6,11 @@
- + + + - + {{ instanceName }} @@ -22,7 +24,7 @@
-
+
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index e621ce432..da3ffef2f 100644 --- a/client/src/app/app.component.ts +++ b/client/src/app/app.component.ts @@ -83,10 +83,6 @@ export class AppComponent implements OnInit, AfterViewInit { return this.serverConfig.instance.name } - goToDefaultRoute () { - return this.router.navigateByUrl(this.redirectService.getDefaultRoute()) - } - ngOnInit () { document.getElementById('incompatible-browser').className += ' browser-ok' @@ -135,6 +131,10 @@ export class AppComponent implements OnInit, AfterViewInit { this.pluginService.initializeCustomModal(this.customModal) } + getDefaultRoute () { + return this.redirectService.getDefaultRoute() + } + getToggleTitle () { if (this.menu.isDisplayed()) return $localize`Close the left menu` diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html index 6c5258010..0786b953b 100644 --- a/client/src/app/menu/menu.component.html +++ b/client/src/app/menu/menu.component.html @@ -7,7 +7,7 @@ class="logged-in-more" ngbDropdown #dropdown="ngbDropdown" placement="bottom-left auto" [container]="dropdownContainer" (openChange)="onDropdownOpenChange($event)" autoClose="outside" > - diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index a51686601..4b1ed65ce 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -252,8 +252,6 @@ my-actor-avatar { > a, > my-login-link { - @include ellipsis; - display: block; width: 100%; diff --git a/client/src/app/menu/notification.component.html b/client/src/app/menu/notification.component.html index 7a62800f5..907828efb 100644 --- a/client/src/app/menu/notification.component.html +++ b/client/src/app/menu/notification.component.html @@ -3,15 +3,16 @@
99+
-
-
+
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.html b/client/src/app/shared/shared-forms/markdown-textarea.component.html index 5a9ff1a15..5d355a6d8 100644 --- a/client/src/app/shared/shared-forms/markdown-textarea.component.html +++ b/client/src/app/shared/shared-forms/markdown-textarea.component.html @@ -25,15 +25,11 @@ - - - +
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.scss b/client/src/app/shared/shared-forms/markdown-textarea.component.scss index f4b74a2d4..1f30bf129 100644 --- a/client/src/app/shared/shared-forms/markdown-textarea.component.scss +++ b/client/src/app/shared/shared-forms/markdown-textarea.component.scss @@ -23,7 +23,7 @@ $input-border-radius: 3px; } .nav-preview { - padding: 10px; + padding: 10px 0; border: 1px solid pvar(--inputBorderColor); border-top: 1px dashed pvar(--inputBorderColor); @@ -38,14 +38,9 @@ $input-border-radius: 3px; border-bottom: 2px solid pvar(--mainColor); .maximize-button { - @include margin-left(15px); - opacity: 0.6; - cursor: default; - - &:not(.disabled) { - cursor: pointer; + &:not([disabled]) { &:hover, &:active { opacity: 1; @@ -105,10 +100,6 @@ $input-border-radius: 3px; padding: 20px 0; width: 100% !important; - - .maximize-button { - @include margin-right(15px); - } } textarea { diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.html b/client/src/app/shared/shared-instance/instance-about-accordion.component.html index 94077fafa..ac8c01856 100644 --- a/client/src/app/shared/shared-instance/instance-about-accordion.component.html +++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.html @@ -1,6 +1,6 @@

{{ about?.instance.name }}

-
{{ about?.instance.shortDescription }}
+
{{ about?.instance.shortDescription }}
diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.scss b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss index ee9e4c3ee..8337a7154 100644 --- a/client/src/app/shared/shared-instance/instance-about-accordion.component.scss +++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss @@ -6,8 +6,7 @@ } .instance-short-description { - @include ellipsis-multiline(1rem, 3, inherit); - + font-size: 1rem; margin: 25px 0; } diff --git a/client/src/app/shared/shared-main/angular/link.component.scss b/client/src/app/shared/shared-main/angular/link.component.scss index f54240d31..d288afab1 100644 --- a/client/src/app/shared/shared-main/angular/link.component.scss +++ b/client/src/app/shared/shared-main/angular/link.component.scss @@ -1,4 +1,4 @@ -.no-class { +.inherit-parent { color: inherit; text-decoration: inherit; position: inherit; diff --git a/client/src/app/shared/shared-main/angular/link.component.ts b/client/src/app/shared/shared-main/angular/link.component.ts index 1f5975589..f2093496f 100644 --- a/client/src/app/shared/shared-main/angular/link.component.ts +++ b/client/src/app/shared/shared-main/angular/link.component.ts @@ -14,14 +14,17 @@ export class LinkComponent implements OnInit { @Input() title?: string @Input() className?: string + @Input() inheritParentCSS = false @Input() tabindex: string | number builtClasses: string ngOnInit () { - this.builtClasses = this.className - ? this.className - : 'no-class' + this.builtClasses = this.className || '' + + if (!this.builtClasses || this.inheritParentCSS) { + this.builtClasses += ' inherit-parent' + } } } diff --git a/client/src/app/shared/shared-main/feeds/feed.component.html b/client/src/app/shared/shared-main/feeds/feed.component.html index a748be873..7032c4cd0 100644 --- a/client/src/app/shared/shared-main/feeds/feed.component.html +++ b/client/src/app/shared/shared-main/feeds/feed.component.html @@ -1,4 +1,4 @@ -
+
+ diff --git a/client/src/app/shared/shared-main/feeds/feed.component.scss b/client/src/app/shared/shared-main/feeds/feed.component.scss index bf1f4eeeb..25afe9c6c 100644 --- a/client/src/app/shared/shared-main/feeds/feed.component.scss +++ b/client/src/app/shared/shared-main/feeds/feed.component.scss @@ -3,15 +3,19 @@ .feed { width: 100%; + color: inherit; a { - color: #000; + color: pvar(--mainForegroundColor); display: block; min-width: 100px; + + &:hover { + text-decoration: underline; + } } } my-global-icon { - cursor: pointer; width: 100%; } diff --git a/client/src/app/shared/shared-main/misc/help.component.html b/client/src/app/shared/shared-main/misc/help.component.html index 360a476f6..0252ad5cb 100644 --- a/client/src/app/shared/shared-main/misc/help.component.html +++ b/client/src/app/shared/shared-main/misc/help.component.html @@ -22,11 +22,9 @@

- - + diff --git a/client/src/app/shared/shared-main/misc/help.component.scss b/client/src/app/shared/shared-main/misc/help.component.scss index 6ccef9f2c..46f533f61 100644 --- a/client/src/app/shared/shared-main/misc/help.component.scss +++ b/client/src/app/shared/shared-main/misc/help.component.scss @@ -2,12 +2,6 @@ @use '_mixins' as *; .help-tooltip-button { - @include disable-outline; - - cursor: pointer; - border: 0; - margin: 5px; - my-global-icon { @include apply-svg-color(pvar(--greyForegroundColor)); diff --git a/client/src/app/shared/shared-share-modal/video-share.component.html b/client/src/app/shared/shared-share-modal/video-share.component.html index 01d351783..5650fa948 100644 --- a/client/src/app/shared/shared-share-modal/video-share.component.html +++ b/client/src/app/shared/shared-share-modal/video-share.component.html @@ -1,7 +1,10 @@

Share

- + +
@@ -150,89 +153,85 @@
-
-
+
+ + + + +
+ +
+ + +
+ +
+
+ +
+ +
+ + + +
+
-
+
- -
- -
-
+
- -
- -
-
-
- - - - -
- -
- -
- -
- -
- -
- -
+
+ +
-
- -
+
+
@@ -280,9 +279,11 @@
-
- +
+
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.scss b/client/src/app/shared/shared-share-modal/video-share.component.scss index 7b6009f5a..c64e11f4d 100644 --- a/client/src/app/shared/shared-share-modal/video-share.component.scss +++ b/client/src/app/shared/shared-share-modal/video-share.component.scss @@ -42,12 +42,7 @@ my-input-text { } .advanced-filters-button { - display: flex; - justify-content: center; - align-items: center; - margin-top: 20px; font-weight: $font-semibold; - cursor: pointer; } .video-caption-block { diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html index 4fea0cc1c..57fcdd899 100644 --- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html +++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html @@ -1,8 +1,8 @@ - + - + diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.html b/client/src/app/shared/shared-video-miniature/video-download.component.html index 1f622933d..3d8ce22de 100644 --- a/client/src/app/shared/shared-video-miniature/video-download.component.html +++ b/client/src/app/shared/shared-video-miniature/video-download.component.html @@ -56,7 +56,7 @@
-
+
Format diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.html b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html index 1e92e1952..48bb0d812 100644 --- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.html +++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html @@ -12,8 +12,8 @@
-
@@ -21,7 +21,7 @@ Hide filters -
+
-
+
diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss b/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss index a4e51982c..c65895a51 100644 --- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss +++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss @@ -50,6 +50,10 @@ padding: 4px 15px; margin-bottom: 15px; cursor: pointer; + + &:focus-visible { + outline: pvar(--mainColor) auto 1px; + } } .filters-toggle { diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html index 7d3c3dbfc..42d13f458 100644 --- a/client/src/app/shared/shared-video-miniature/video-miniature.component.html +++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.html @@ -24,8 +24,8 @@
{{ video.name }} @@ -40,7 +40,7 @@ - diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss index a397efdca..d48b00518 100644 --- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss +++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss @@ -167,7 +167,7 @@ my-actor-avatar { } .video-miniature-name { - @include ellipsis-multiline($video-miniature-row-name-font-size, 2); + font-size: $video-miniature-row-name-font-size; } .video-miniature-created-at-views, diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html index 1dd68b09e..3b34c71ce 100644 --- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html +++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html @@ -1,6 +1,6 @@
@@ -16,8 +16,8 @@
{{ playlist.displayName }} diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss index d43afad28..2d8377e7b 100644 --- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss +++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss @@ -95,7 +95,7 @@ display: flex; .miniature-name { - @include ellipsis-multiline($video-miniature-row-name-font-size, 2); + font-size: $video-miniature-row-name-font-size; } .miniature-thumbnail { diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss index 4d956d652..d04652184 100644 --- a/client/src/sass/bootstrap.scss +++ b/client/src/sass/bootstrap.scss @@ -15,6 +15,7 @@ @import 'bootstrap/scss/grid'; @import 'bootstrap/scss/forms'; @import 'bootstrap/scss/buttons'; +@import 'bootstrap/scss/transitions'; @import 'bootstrap/scss/dropdown'; @import 'bootstrap/scss/button-group'; @import 'bootstrap/scss/nav'; @@ -203,7 +204,6 @@ body { display: flex !important; align-items: center; height: 30px !important; - padding: 10px 15px !important; } .nav.nav-pills { @@ -260,19 +260,6 @@ body { border-color: #dee2e6; } -.collapse-transition { - // Animation when we show/hide the filters - transition: max-height 0.3s; - display: block !important; - overflow: hidden !important; - max-height: 0; - - &.show { - max-height: 1500px; - overflow: inherit !important; - } -} - .accordion-button { font-size: 18px; @@ -389,3 +376,8 @@ body { display: none; } } + +.text-truncate { + // Prevent invalid height in parent: https://stackoverflow.com/a/22425601 + vertical-align: top; +} diff --git a/client/src/sass/class-helpers/_common.scss b/client/src/sass/class-helpers/_common.scss index 0a81a415d..e42d7d587 100644 --- a/client/src/sass/class-helpers/_common.scss +++ b/client/src/sass/class-helpers/_common.scss @@ -3,30 +3,6 @@ @use '_variables' as *; @use '_mixins' as *; -.link-orange { - color: pvar(--mainForegroundColor); - font-weight: $font-semibold; - border-bottom: 0.18em solid pvar(--mainColor); - display: inline-block; - line-height: 1.1; - - &:hover { - color: pvar(--mainForegroundColor); - opacity: 0.8; - } -} - -.underline-orange { - display: inline-block; - border-bottom: 0.19em solid pvar(--mainColor); -} - -// --------------------------------------------------------------------------- - -.muted { - @include muted; -} - // --------------------------------------------------------------------------- .pt-badge { diff --git a/client/src/sass/class-helpers/_text.scss b/client/src/sass/class-helpers/_text.scss new file mode 100644 index 000000000..0fe698d4f --- /dev/null +++ b/client/src/sass/class-helpers/_text.scss @@ -0,0 +1,47 @@ +@use '_badges' as *; +@use '_icons' as *; +@use '_variables' as *; +@use '_mixins' as *; + +.link-orange { + color: pvar(--mainForegroundColor); + font-weight: $font-semibold; + border-bottom: 0.18em solid pvar(--mainColor); + display: inline-block; + line-height: 1.1; + + &:hover { + color: pvar(--mainForegroundColor); + opacity: 0.8; + } +} + +.underline-orange { + display: inline-block; + border-bottom: 0.19em solid pvar(--mainColor); +} + +// --------------------------------------------------------------------------- + +.muted { + @include muted; +} + +// --------------------------------------------------------------------------- + +@mixin ellipsis-multiline($number-of-lines) { + display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */ + -webkit-line-clamp: $number-of-lines; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.ellipsis-multiline-2 { + @include ellipsis-multiline(2); +} + +.ellipsis-multiline-3 { + @include ellipsis-multiline(3); +} + +// --------------------------------------------------------------------------- diff --git a/client/src/sass/class-helpers/index.scss b/client/src/sass/class-helpers/index.scss index 28beb3b7f..4fe935ab1 100644 --- a/client/src/sass/class-helpers/index.scss +++ b/client/src/sass/class-helpers/index.scss @@ -3,3 +3,4 @@ @use './_custom-bootstrap-helpers'; @use './_forms'; @use './_menu'; +@use './_text'; diff --git a/client/src/sass/include/_bootstrap-variables.scss b/client/src/sass/include/_bootstrap-variables.scss index ca4a835f9..47ebe685c 100644 --- a/client/src/sass/include/_bootstrap-variables.scss +++ b/client/src/sass/include/_bootstrap-variables.scss @@ -41,6 +41,7 @@ $input-focus-bg: pvar(--inputBackgroundColor); $input-btn-focus-width: 0; $input-btn-focus-color: inherit; $input-focus-border-color: #ced4da; +$input-focus-box-shadow: 0 0 0 0.25rem pvar(--mainColorLightest); $input-group-addon-color: pvar(--mainForegroundColor); $input-group-addon-bg: pvar(--greyBackgroundColor); diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss index a1b963400..eb77f2c3d 100644 --- a/client/src/sass/include/_miniature.scss +++ b/client/src/sass/include/_miniature.scss @@ -2,9 +2,9 @@ @use '_mixins' as *; @mixin miniature-name { - @include ellipsis-multiline(1.1em, 2); @include peertube-word-wrap(false); + font-size: 1.1em; transition: color 0.2s; font-weight: $font-semibold; color: pvar(--mainForegroundColor); diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 0f301dab2..004f49262 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -8,13 +8,16 @@ &:focus, &:active { text-decoration: none !important; + } + + &:focus:not(.focus-visible) { outline: none !important; } } @mixin disable-outline { &:focus:not(.focus-visible) { - outline: none; + outline: none !important; } } @@ -24,20 +27,6 @@ text-overflow: ellipsis; } -@mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2, $line-height: $font-size) { - display: block; - /* Fallback for non-webkit */ - display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */ - -webkit-line-clamp: $number-of-lines; - -webkit-box-orient: vertical; - /* Fallback for non-webkit */ - font-size: $font-size; - line-height: $line-height; - overflow: hidden; - text-overflow: ellipsis; - max-height: $font-size * $number-of-lines; -} - @mixin muted { color: pvar(--greyForegroundColor) !important; } diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss index 55494a556..dfe1f6f0d 100644 --- a/client/src/sass/ng-select.scss +++ b/client/src/sass/ng-select.scss @@ -40,8 +40,7 @@ $ng-select-input-text: pvar(--mainForegroundColor); &.ng-select-focused { &:not(.ng-select-opened) > .ng-select-container { - border-color: #ccc !important; - box-shadow: none !important; + border-color: $ng-select-border !important; } } -- cgit v1.2.3