From fc6cec57581bb877547bbece3c68f4ab0e4c35e2 Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <jelawshe@gmail.com>
Date: Mon, 7 Jan 2019 09:57:48 -0600
Subject: [PATCH] Merge pull request #1349 from
 sharelatex/jel-screen-reader-del

Add accessibility styling for <del>

GitOrigin-RevId: 85a52f777d05a7da886075e03ccaaa52d2aa2382
---
 .../public/stylesheets/_style_includes.less   |  1 +
 .../stylesheets/core/accessibility.less       | 27 +++++++++++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 services/web/public/stylesheets/core/accessibility.less

diff --git a/services/web/public/stylesheets/_style_includes.less b/services/web/public/stylesheets/_style_includes.less
index 445e0086f3..2d93050238 100644
--- a/services/web/public/stylesheets/_style_includes.less
+++ b/services/web/public/stylesheets/_style_includes.less
@@ -10,6 +10,7 @@
 @import "core/scaffolding.less";
 @import "core/type.less";
 @import "core/grid.less";
+@import "core/accessibility.less";
 
 // Components
 @import "components/tables.less";
diff --git a/services/web/public/stylesheets/core/accessibility.less b/services/web/public/stylesheets/core/accessibility.less
new file mode 100644
index 0000000000..4175fdd7ac
--- /dev/null
+++ b/services/web/public/stylesheets/core/accessibility.less
@@ -0,0 +1,27 @@
+//
+// Accessibility
+// --------------------------------------------------
+
+// For improving accessibility.
+// If possible, add accessibiity styling to stylesheet where selector is
+// defined. Otherwise, add here.
+
+// <del> styling taken from:
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del#Accessibility_concerns
+del::before, 
+del::after {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+del::before {
+  content: " [deletion start] ";
+}
+
+del::after {
+  content: " [deletion end] ";
+}
\ No newline at end of file