resolve feedback issues

Author: peilingjiang

client/modules/IDE/components/Editor.jsx

@@ -346,9 +346,10 @@ class Editor extends React.Component {
 
   showHint(_cm) {
     const hintOptions = {
+      _fontSize: this.props.fontSize,
       completeSingle: false
       // completeOnSingleClick: false,
-      // closeOnUnfocus: false
+      // closeOnUnfocus: false,
       // closeOnPick: false
     };
 

client/modules/IDE/components/EditorShowHint.jsx

@@ -174,7 +174,7 @@
 
   function getText(completion) {
     if (typeof completion == "string") return completion;
-    else return completion.text;
+    else return completion.item.text;
   }
 
   function buildKeyMap(completion, handle) {
@@ -235,23 +235,30 @@
     var ownerDocument = cm.getInputField().ownerDocument;
     var parentWindow = ownerDocument.defaultView || ownerDocument.parentWindow;
 
+    var fontSize = completion.options._fontSize;
+
     var hints = this.hints = ownerDocument.createElement("ul");
+    hints.setAttribute("role", "listbox")
+    hints.setAttribute("aria-expanded", "true")
     var theme = completion.cm.options.theme;
     hints.className = "CodeMirror-hints " + theme;
     this.selectedHint = data.selectedHint || 0;
 
     var completions = data.list;
+
     for (var i = 0; i < completions.length; ++i) {
       var elt = hints.appendChild(ownerDocument.createElement("li")), cur = completions[i];
       var className = HINT_ELEMENT_CLASS + (i != this.selectedHint ? "" : " " + ACTIVE_HINT_ELEMENT_CLASS);
       if (cur.className != null) className = cur.className + " " + className;
       elt.className = className;
+      if (i == this.selectedHint) elt.setAttribute("aria-selected", "true")
+      elt.setAttribute("role", "option")
       if (cur.render) cur.render(elt, data, cur);
       else {
         const e = ownerDocument.createElement('p');
         const name = getText(cur);
-        if (cur.type) {
-          cur.displayText = `<span class="${cur.type}-name hint-name">${name}</span><span class="hint-type">${cur.type}</span>*`;
+        if (cur.item && cur.item.type) {
+          cur.displayText = `<span class="${cur.item.type}-name hint-name">${name}</span><span class="hint-type">${cur.item.type}</span>*`;
           cur.displayText = cur.displayText.replace('*', `<a href="https://p5js.org/reference/#/p5/${name}" onclick="event.stopPropagation()" target="_blank">&#10132;</a>`);
         }
         elt.appendChild(e);
@@ -280,6 +287,7 @@
     var winW = parentWindow.innerWidth || Math.max(ownerDocument.body.offsetWidth, ownerDocument.documentElement.offsetWidth);
     var winH = parentWindow.innerHeight || Math.max(ownerDocument.body.offsetHeight, ownerDocument.documentElement.offsetHeight);
     container.appendChild(hints);
+    cm.getInputField().setAttribute("aria-autocomplete", "list")
 
     var box = completion.options.moveOnOverlap ? hints.getBoundingClientRect() : new DOMRect();
     var scrolls = completion.options.paddingForScrollbar ? hints.scrollHeight > hints.clientHeight + 1 : false;
@@ -377,6 +385,9 @@
       this.completion.widget = null;
       if (this.hints.parentNode) this.hints.parentNode.removeChild(this.hints);
       this.completion.cm.removeKeyMap(this.keyMap);
+      var input = this.completion.cm.getInputField()
+      input.removeAttribute("aria-activedescendant")
+      input.removeAttribute("aria-owns")
 
       var cm = this.completion.cm;
       if (this.completion.options.closeOnUnfocus) {
@@ -404,9 +415,14 @@
         i = avoidWrap ? 0  : this.data.list.length - 1;
       if (this.selectedHint == i) return;
       var node = this.hints.childNodes[this.selectedHint];
-      if (node) node.className = node.className.replace(" " + ACTIVE_HINT_ELEMENT_CLASS, "");
+      if (node) {
+        node.className = node.className.replace(" " + ACTIVE_HINT_ELEMENT_CLASS, "");
+        node.removeAttribute("aria-selected")
+      }
       node = this.hints.childNodes[this.selectedHint = i];
       node.className += " " + ACTIVE_HINT_ELEMENT_CLASS;
+      node.setAttribute("aria-selected", "true")
+      this.completion.cm.getInputField().setAttribute("aria-activedescendant", node.id)
       this.scrollToActive()
       CodeMirror.signal(this.data, "select", this.data.list[this.selectedHint], node);
     },

client/styles/abstracts/_variables.scss

@@ -116,7 +116,22 @@ $themes: (
     form-secondary-title-color: $medium-dark,
     form-input-text-color: $dark,
     form-input-placeholder-text-color: $middle-light,
-    form-navigation-options-color: $middle-dark
+    form-navigation-options-color: $middle-dark,
+
+    hint-background-color: $white,
+    hint-text-color: $dark,
+    hint-item-border-bottom: 1px solid $lighter,
+    hint-fun-text-color: #0B7CA9,
+    hint-var-text-color: #D52889,
+    hint-type-text-color: $middle-dark,
+    hint-arrow-color: $lightest,
+    hint-arrow-background-color: $p5js-pink,
+    hint-item-hover-background-color: #f4f4f4,
+    hint-item-active-text-color: unset,
+    hint-item-active-background-color: #cfcfcf,
+    hint-item-active-type-text-color: $white,
+    hint-item-active-outline: none,
+    hint-item-active-outline-offset: 0
   ),
   dark: (
     logo-color: $p5js-pink,
@@ -196,7 +211,22 @@ $themes: (
 
     form-title-color: $lightest,
     form-secondary-title-color: $medium-light,
-    form-navigation-options-color: $middle-light
+    form-navigation-options-color: $middle-light,
+
+    hint-background-color: $darker,
+    hint-text-color: #E0D7D1,
+    hint-item-border-bottom: 1px solid $middle-dark,
+    hint-fun-text-color: #0F9DD7,
+    hint-var-text-color: #DE4A9B,
+    hint-type-text-color: #E0D7D1,
+    hint-arrow-color: #FDFDFD,
+    hint-arrow-background-color: $p5js-pink,
+    hint-item-hover-background-color: $middle-dark,
+    hint-item-active-text-color: $darker,
+    hint-item-active-background-color: #cfcfcf,
+    hint-item-active-type-text-color: $middle-dark,
+    hint-item-active-outline: none,
+    hint-item-active-outline-offset: 0
   ),
   contrast: (
     logo-color: $yellow,
@@ -276,7 +306,22 @@ $themes: (
 
     form-title-color: $lightest,
     form-secondary-title-color: $medium-light,
-    form-navigation-options-color: $middle-light
+    form-navigation-options-color: $middle-light,
+
+    hint-background-color: $darker,
+    hint-text-color: #c1c1c1,
+    hint-item-border-bottom: 1px solid #333,
+    hint-fun-text-color: #00FFFF,
+    hint-var-text-color: #FFA9D9,
+    hint-type-text-color: #c1c1c1,
+    hint-arrow-color: #333,
+    hint-arrow-background-color: #F5DC23,
+    hint-item-hover-background-color: #454545,
+    hint-item-active-text-color: #FDFDFD,
+    hint-item-active-background-color: unset,
+    hint-item-active-type-text-color: #FDFDFD,
+    hint-item-active-outline: 2px solid #FDFDFD,
+    hint-item-active-outline-offset: -2px
   )
 );