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.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 @@ @@ -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 @@
-
+