Improve accessibility

3 files changed, 48 insertions, 24 deletions

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