@codemirror/lint - npm Package Compare versions

Comparing version 0.17.1 to 0.18.0

CHANGELOG.md

@@ -0,1 +1,9 @@
+## 0.18.0 (2021-03-03)
+
+### Bug fixes
+
+Make sure action access keys are discoverable for screen reader users.
+
+Selection in the lint panel should now be properly visible to screen readers.
+
 ## 0.17.1 (2021-01-06)
@@ -2,0 +10,0 @@

dist/index.js

@@ -1,2 +0,2 @@
-import { EditorView, Decoration, themeClass, ViewPlugin, logException, WidgetType } from '@codemirror/view';
+import { EditorView, Decoration, ViewPlugin, logException, WidgetType } from '@codemirror/view';
 import { StateEffect, StateField } from '@codemirror/state';
@@ -31,15 +31,15 @@ import { hoverTooltip } from '@codemirror/tooltip';
 }
-function maybeEnableLint(state) {
-    return state.field(lintState, false) ? undefined : { append: [
-            lintState,
-            EditorView.decorations.compute([lintState], state => {
-                let { selected, panel } = state.field(lintState);
-                return !selected || !panel || selected.from == selected.to ? Decoration.none : Decoration.set([
-                    activeMark.range(selected.from, selected.to)
-                ]);
-            }),
-            panels(),
-            hoverTooltip(lintTooltip),
-            baseTheme
-        ] };
+function maybeEnableLint(state, effects) {
+    return state.field(lintState, false) ? effects : effects.concat(StateEffect.appendConfig.of([
+        lintState,
+        EditorView.decorations.compute([lintState], state => {
+            let { selected, panel } = state.field(lintState);
+            return !selected || !panel || selected.from == selected.to ? Decoration.none : Decoration.set([
+                activeMark.range(selected.from, selected.to)
+            ]);
+        }),
+        panels(),
+        hoverTooltip(lintTooltip),
+        baseTheme
+    ]));
 }
@@ -50,4 +50,3 @@ /// State effect that is used to update the current set of
     return {
-        effects: setDiagnosticsEffect.of(diagnostics),
-        reconfigure: maybeEnableLint(state)
+        effects: maybeEnableLint(state, [setDiagnosticsEffect.of(diagnostics)])
     };
@@ -76,3 +75,3 @@ }
                         ? Decoration.mark({
-                            attributes: { class: themeClass("lintRange." + d.severity) },
+                            attributes: { class: "cm-lintRange cm-lintRange-" + d.severity },
                             diagnostic: d
@@ -99,3 +98,3 @@ }).range(d.from, d.to)
 });
-const activeMark = Decoration.mark({ class: themeClass("lintRange.active") });
+const activeMark = Decoration.mark({ class: "cm-lintRange cm-lintRange-active" });
 function lintTooltip(view, pos, side) {
@@ -118,3 +117,3 @@ let { diagnostics } = view.state.field(lintState);
         above: view.state.doc.lineAt(stackStart).to < stackEnd,
-        style: "lint",
+        class: "cm-tooltip-lint",
         create() {
@@ -129,4 +128,3 @@ return { dom: elt("ul", found.map(d => renderDiagnostic(view, d, false))) };
     if (!field || !field.panel)
-        view.dispatch({ effects: togglePanel.of(true),
-            reconfigure: maybeEnableLint(view.state) });
+        view.dispatch({ effects: maybeEnableLint(view.state, [togglePanel.of(true)]) });
     let panel = getPanel(view, LintPanel.open);
@@ -225,3 +223,3 @@ if (panel)
     let keys = inPanel ? assignKeys(diagnostic.actions) : [];
-    return elt("li", { class: themeClass("diagnostic." + diagnostic.severity) }, elt("span", { class: themeClass("diagnosticText") }, diagnostic.message), (_a = diagnostic.actions) === null || _a === void 0 ? void 0 : _a.map((action, i) => {
+    return elt("li", { class: "cm-diagnostic cm-diagnostic-" + diagnostic.severity }, elt("span", { class: "cm-diagnosticText" }, diagnostic.message), (_a = diagnostic.actions) === null || _a === void 0 ? void 0 : _a.map((action, i) => {
         let click = (e) => {
@@ -238,7 +236,8 @@ e.preventDefault();
         return elt("button", {
-            class: themeClass("diagnosticAction"),
+            class: "cm-diagnosticAction",
             onclick: click,
-            onmousedown: click
+            onmousedown: click,
+            "aria-label": ` Action: ${name}${keyIndex < 0 ? "" : ` (access key "${keys[i]})"`}.`
         }, nameElt);
-    }), diagnostic.source && elt("div", { class: themeClass("diagnosticSource") }, diagnostic.source));
+    }), diagnostic.source && elt("div", { class: "cm-diagnosticSource" }, diagnostic.source));
 }
@@ -252,3 +251,3 @@ class DiagnosticWidget extends WidgetType {
     toDOM() {
-        return elt("span", { class: themeClass("lintPoint." + this.diagnostic.severity) });
+        return elt("span", { class: "cm-lintPoint cm-lintPoint-" + this.diagnostic.severity });
     }
@@ -261,2 +260,3 @@ }
         this.dom = renderDiagnostic(view, diagnostic, true);
+        this.dom.id = this.id;
         this.dom.setAttribute("role", "option");
@@ -434,3 +434,3 @@ }
     }
-    get style() { return "lint"; }
+    get class() { return "cm-panel-lint"; }
     static open(view) { return new LintPanel(view); }
@@ -447,3 +447,3 @@ }
 const baseTheme = EditorView.baseTheme({
-    $diagnostic: {
+    ".cm-diagnostic": {
         padding: "3px 6px 3px 8px",
@@ -453,6 +453,6 @@ marginLeft: "-1px",
     },
-    "$diagnostic.error": { borderLeft: "5px solid #d11" },
-    "$diagnostic.warning": { borderLeft: "5px solid orange" },
-    "$diagnostic.info": { borderLeft: "5px solid #999" },
-    $diagnosticAction: {
+    ".cm-diagnostic-error": { borderLeft: "5px solid #d11" },
+    ".cm-diagnostic-warning": { borderLeft: "5px solid orange" },
+    ".cm-diagnostic-info": { borderLeft: "5px solid #999" },
+    ".cm-diagnosticAction": {
         font: "inherit",
@@ -466,15 +466,15 @@ border: "none",
     },
-    $diagnosticSource: {
+    ".cm-diagnosticSource": {
         fontSize: "70%",
         opacity: .7
     },
-    $lintRange: {
+    ".cm-lintRange": {
         backgroundPosition: "left bottom",
         backgroundRepeat: "repeat-x"
     },
-    "$lintRange.error": { backgroundImage: underline("#d11") },
-    "$lintRange.warning": { backgroundImage: underline("orange") },
-    "$lintRange.info": { backgroundImage: underline("#999") },
-    "$lintRange.active": { backgroundColor: "#ffdd9980" },
-    $lintPoint: {
+    ".cm-lintRange-error": { backgroundImage: underline("#d11") },
+    ".cm-lintRange-warning": { backgroundImage: underline("orange") },
+    ".cm-lintRange-info": { backgroundImage: underline("#999") },
+    ".cm-lintRange-active": { backgroundColor: "#ffdd9980" },
+    ".cm-lintPoint": {
         position: "relative",
@@ -491,9 +491,9 @@ "&:after": {
     },
-    "$lintPoint.warning": {
+    ".cm-lintPoint-warning": {
         "&:after": { borderBottomColor: "orange" }
     },
-    "$lintPoint.info": {
+    ".cm-lintPoint-info": {
         "&:after": { borderBottomColor: "#999" }
     },
-    "$panel.lint": {
+    ".cm-panel.cm-panel-lint": {
         position: "relative",
@@ -528,3 +528,3 @@ "& ul": {
     },
-    "$tooltip.lint": {
+    ".cm-tooltip.cm-tooltip-lint": {
         padding: 0,
@@ -531,0 +531,0 @@ margin: 0

package.json

 {
   "name": "@codemirror/lint",
-  "version": "0.17.1",
+  "version": "0.18.0",
   "description": "Linting support for the CodeMirror code editor",
@@ -29,6 +29,6 @@ "scripts": {
   "dependencies": {
-    "@codemirror/panel": "^0.17.0",
-    "@codemirror/state": "^0.17.0",
-    "@codemirror/tooltip": "^0.17.0",
-    "@codemirror/view": "^0.17.0",
+    "@codemirror/panel": "^0.18.0",
+    "@codemirror/state": "^0.18.0",
+    "@codemirror/tooltip": "^0.18.0",
+    "@codemirror/view": "^0.18.0",
     "crelt": "^1.0.5"
@@ -35,0 +35,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

88180

increased by0.93%

Dependency changes

• + Added@codemirror/panel@0.18.2(transitive)

• + Added@codemirror/rangeset@0.18.5(transitive)

• + Added@codemirror/state@0.18.7(transitive)

• + Added@codemirror/text@0.18.1(transitive)

• + Added@codemirror/tooltip@0.18.4(transitive)

• + Added@codemirror/view@0.18.19(transitive)

• + Addedstyle-mod@4.1.2(transitive)

• - Removed@codemirror/panel@0.17.1(transitive)

• - Removed@codemirror/rangeset@0.17.1(transitive)

• - Removed@codemirror/state@0.17.2(transitive)

• - Removed@codemirror/text@0.17.2(transitive)

• - Removed@codemirror/tooltip@0.17.2(transitive)

• - Removed@codemirror/view@0.17.13(transitive)

• - Removedstyle-mod@3.2.2(transitive)

• Updated@codemirror/panel@^0.18.0

• Updated@codemirror/state@^0.18.0

• Updated@codemirror/tooltip@^0.18.0

• Updated@codemirror/view@^0.18.0