Merge pull request #1349 from sharelatex/jel-screen-reader-del

Add accessibility styling for <del>

GitOrigin-RevId: 85a52f777d05a7da886075e03ccaaa52d2aa2382

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

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] ";
+}