Improve accessibility

8 files changed, 61 insertions, 56 deletions

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;
     }
   }