cm-chessboard 8.11.3 → 8.11.5

package/assets/extensions/arrows/arrows.css

@@ -34,13 +34,13 @@
   stroke-linecap: butt;
   opacity: 0.4;
 }
-.cm-chessboard .arrow-neutral .arrow-head {
-  fill: black;
+.cm-chessboard .arrow-secondary .arrow-head {
+  fill: #666;
   fill-rule: nonzero;
 }
-.cm-chessboard .arrow-neutral .arrow-line {
-  stroke: black;
-  stroke-linecap: round;
+.cm-chessboard .arrow-secondary .arrow-line {
+  stroke: #666;
+  stroke-linecap: butt;
   opacity: 0.5;
 }
 

package/assets/extensions/arrows/arrows.scss

@@ -43,14 +43,14 @@
       opacity: 0.4;
     }
   }
-  .arrow-neutral {
+  .arrow-secondary {
     .arrow-head {
-      fill: black;
+      fill: #666;
       fill-rule: nonzero;
     }
     .arrow-line {
-      stroke: black;
-      stroke-linecap: round;
+      stroke: #666;
+      stroke-linecap: butt;
       opacity: 0.5;
     }
   }

package/examples/extensions/arrows-extension.html

@@ -55,6 +55,7 @@ console.log(chessboard.getArrows())
     chessboard.addArrow(ARROW_TYPE.info, "b8", "c6")
     chessboard.addArrow(ARROW_TYPE.success, "d2", "d3")
     chessboard.addArrow(ARROW_TYPE.warning, "g5", "e6")
+    chessboard.addArrow(ARROW_TYPE.secondary, "a1", "c3")
     console.log(chessboard.getArrows())
 
 </script>

package/examples/extensions/promotion-dialog-extension.html

@@ -23,12 +23,19 @@
     import {Chessboard, COLOR, INPUT_EVENT_TYPE} from "../../src/Chessboard.js"
     import {PromotionDialog} from "../../src/extensions/promotion-dialog/PromotionDialog.js"
     import {Markers} from "../../src/extensions/markers/Markers.js"
+    import {Accessibility} from "../../src/extensions/accessibility/Accessibility.js"
 
     const position = "4k3/1P6/8/8/6r1/8/8/2R1K3 w - - 0 1"
     const chessboard = new Chessboard(document.getElementById("chessboard"), {
         position: position,
         assetsUrl: "../../assets/",
-        extensions: [{class: PromotionDialog}, {class: Markers}]
+        extensions: [{class: PromotionDialog}, {class: Markers}, {class: Accessibility, props: {
+                brailleNotationInAlt: true, // show the braille notation of the game in the alt attribute of the SVG
+                boardAsTable: true, // display the board additionally as HTML table
+                movePieceForm: true, // display a form to move a piece (from, to, move)
+                piecesAsList: true, // display the pieces additionally as List
+                visuallyHidden: true // hide all those extra outputs visually but keep them accessible for screen readers and braille displays
+            }}]
     })
     chessboard.enableMoveInput((event) => {
         if (event.type === INPUT_EVENT_TYPE.validateMoveInput) {

package/index.html

@@ -42,9 +42,9 @@
                 <li><a href="examples/extensions/arrows-extension.html">Arrows extension</a></li>
             </ul>
         </li>
-        <li>Draw HTML over the board with <a href="examples/extensions/html-layer-extension.html">HTML Layer extension</a></li>
-        <li>Allow displaying a promotion dialog with <a href="examples/extensions/promotion-dialog-extension.html">PromotionDialog extension</a></li>
-        <li>Make the board accessible with screen-reader support with <a href="examples/extensions/accessibility-extension.html">Accessibility extension</a></li>
+        <li>Draw HTML over the board with the <a href="examples/extensions/html-layer-extension.html">HTML Layer extension</a></li>
+        <li>Allow displaying a promotion dialog with the <a href="examples/extensions/promotion-dialog-extension.html">PromotionDialog extension</a></li>
+        <li>Make the board accessible, add screen-reader support with the <a href="examples/extensions/accessibility-extension.html">Accessibility extension</a></li>
     </ul>
 </div>
 <h2>Chessboard</h2>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cm-chessboard",
-  "version": "8.11.3",
+  "version": "8.11.5",
   "description": "A JavaScript chessboard which is lightweight, ES6 module based, responsive, SVG rendered and without dependencies.",
   "keywords": [
     "chess",

package/src/extensions/arrows/Arrows.js

@@ -11,6 +11,7 @@ import {Utils} from "../../lib/Utils.js"
 export const ARROW_TYPE = {
     default: {class: "arrow-success"},
     success: {class: "arrow-success"},
+    secondary: {class: "arrow-secondary"},
     warning: {class: "arrow-warning"},
     info: {class: "arrow-info"},
     danger: {class: "arrow-danger"}