Improve accessibility

3 files changed, 6 insertions, 16 deletions

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