Add role=presentation to more elements to help screenreaders

Author: schanzer

src/display/Display.js

@@ -1,5 +1,5 @@
 import { gecko, ie, ie_version, mobile, webkit } from "../util/browser"
-import { elt } from "../util/dom"
+import { elt, eltP } from "../util/dom"
 import { scrollerGap } from "../util/misc"
 
 // The display handles the DOM integration, both for input reading
@@ -18,7 +18,7 @@ export function Display(place, doc, input) {
   d.gutterFiller = elt("div", null, "CodeMirror-gutter-filler")
   d.gutterFiller.setAttribute("cm-not-content", "true")
   // Will contain the actual code, positioned to cover the viewport.
-  d.lineDiv = elt("div", null, "CodeMirror-code")
+  d.lineDiv = eltP("div", null, "CodeMirror-code")
   // Elements are added to these to represent selection and cursors.
   d.selectionDiv = elt("div", null, null, "position: relative; z-index: 1")
   d.cursorDiv = elt("div", null, "CodeMirror-cursors")
@@ -27,10 +27,11 @@ export function Display(place, doc, input) {
   // When lines outside of the viewport are measured, they are drawn in this.
   d.lineMeasure = elt("div", null, "CodeMirror-measure")
   // Wraps everything that needs to exist inside the vertically-padded coordinate system
-  d.lineSpace = elt("div", [d.measure, d.lineMeasure, d.selectionDiv, d.cursorDiv, d.lineDiv],
+  d.lineSpace = eltP("div", [d.measure, d.lineMeasure, d.selectionDiv, d.cursorDiv, d.lineDiv],
                     null, "position: relative; outline: none")
+  let lines = eltP("div", [d.lineSpace], "CodeMirror-lines")
   // Moved around its parent to cover visible view.
-  d.mover = elt("div", [elt("div", [d.lineSpace], "CodeMirror-lines")], null, "position: relative")
+  d.mover = elt("div", [lines], null, "position: relative")
   // Set to the height of the document, allowing scrolling.
   d.sizer = elt("div", [d.mover], "CodeMirror-sizer")
   d.sizerWidth = null

src/line/line_data.js

@@ -1,6 +1,6 @@
 import { getOrder } from "../util/bidi"
 import { ie, ie_version, webkit } from "../util/browser"
-import { elt, joinClasses } from "../util/dom"
+import { elt, eltP, joinClasses } from "../util/dom"
 import { eventMixin, signal } from "../util/event"
 import { hasBadBidiRects, zeroWidthElement } from "../util/feature_detection"
 import { lst, spaceStr } from "../util/misc"
@@ -64,14 +64,11 @@ export function buildLineContent(cm, lineView) {
   // The padding-right forces the element to have a 'border', which
   // is needed on Webkit to be able to get line-level bounding
   // rectangles for it (in measureChar).
-  let content = elt("span", null, null, webkit ? "padding-right: .1px" : null)
-  let builder = {pre: elt("pre", [content], "CodeMirror-line"), content: content,
+  let content = eltP("span", null, null, webkit ? "padding-right: .1px" : null)
+  let builder = {pre: eltP("pre", [content], "CodeMirror-line"), content: content,
                  col: 0, pos: 0, cm: cm,
                  trailingSpace: false,
                  splitSpaces: (ie || webkit) && cm.getOption("lineWrapping")}
-  // hide from accessibility tree
-  content.setAttribute("role", "presentation")
-  builder.pre.setAttribute("role", "presentation")
   lineView.measure = {}
 
   // Iterate over the logical lines that make up this visual line.

src/model/mark_text.js

@@ -1,4 +1,4 @@
-import { elt } from "../util/dom"
+import { eltP } from "../util/dom"
 import { eventMixin, hasHandler, on } from "../util/event"
 import { endOperation, operation, runInOp, startOperation } from "../display/operations"
 import { clipPos, cmp, Pos } from "../line/pos"
@@ -166,8 +166,7 @@ export function markText(doc, from, to, options, type) {
   if (marker.replacedWith) {
     // Showing up as a widget implies collapsed (widget replaces text)
     marker.collapsed = true
-    marker.widgetNode = elt("span", [marker.replacedWith], "CodeMirror-widget")
-    marker.widgetNode.setAttribute("role", "presentation") // hide from accessibility tree
+    marker.widgetNode = eltP("span", [marker.replacedWith], "CodeMirror-widget")
     if (!options.handleMouseEvents) marker.widgetNode.setAttribute("cm-ignore-events", "true")
     if (options.insertLeft) marker.widgetNode.insertLeft = true
   }

src/util/dom.js

@@ -29,6 +29,12 @@ export function elt(tag, content, className, style) {
   else if (content) for (let i = 0; i < content.length; ++i) e.appendChild(content[i])
   return e
 }
+// wrapper for elt, which removes the elt from the accessibility tree
+export function eltP(tag, content, className, style) {
+  let e = elt(tag, content, className, style)
+  e.setAttribute("role", "presentation")
+  return e
+}
 
 export let range
 if (document.createRange) range = function(node, start, end, endNode) {