cm-chessboard 7.3.4 → 7.3.6

package/examples/extensions/accessibility-extension.html

@@ -16,6 +16,10 @@
     It allows a better usage of the board for visually impaired
     people.
 </p>
+<p>
+    The <a href="../validate-moves.html">validate moves</a> example has also
+    accessibility features enabled, but visually hidden.
+</p>
 <h3>Features of the Accessibility extension</h3>
 <ul>
     <li>Enable Braille notation in the alt text of the chessboard image</li>

package/examples/simple-boards.html

@@ -19,13 +19,12 @@ new Chessboard(document.getElementById("board1"), {
 })
 new Chessboard(document.getElementById("board2"), {
     position: "rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR w Gkq - 4 11",
-    assetsCache: false,
-    style: {pieces: {file: "staunty.svg"}},
+    style: {pieces: {file: "staunty.svg"},cssClass: "green", borderType: BORDER_TYPE.frame},
     orientation: COLOR.black
 })
 </pre>
 <script type="module">
-    import {COLOR, Chessboard} from "../src/cm-chessboard/Chessboard.js"
+    import {COLOR, Chessboard, BORDER_TYPE} from "../src/cm-chessboard/Chessboard.js"
     import {FEN} from "../src/cm-chessboard/model/Position.js"
 
     new Chessboard(document.getElementById("board1"), {
@@ -36,7 +35,7 @@ new Chessboard(document.getElementById("board2"), {
         position: "rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR w Gkq - 4 11",
         assetsUrl: "../assets/",
         assetsCache: false,
-        style: {pieces: {file: "staunty.svg"}},
+        style: {pieces: {file: "staunty.svg"},cssClass: "green", borderType: BORDER_TYPE.frame},
         orientation: COLOR.black
     })
 </script>

package/examples/validate-moves.html

@@ -14,7 +14,7 @@
 <h2>Example: Input enabled, move validation with chess.js</h2>
 <p>Input enabled for white. <a href="https://github.com/jhlywa/chess.js">chess.js</a> does the validation and answers
     with random moves.</p>
-<h2 class="cm-visually-hidden">The Board</h2>
+<h2 class="cm-visually-hidden">The chessboard widget</h2>
 <div class="board board-large" id="board"></div>
 <h2 class="cm-visually-hidden">The Sourcecode of the example</h2>
 <div id="output"></div>
@@ -23,6 +23,7 @@
     import {INPUT_EVENT_TYPE, COLOR, Chessboard, BORDER_TYPE} from "../src/cm-chessboard/Chessboard.js"
     import {MARKER_TYPE, Markers} from "../src/cm-chessboard/extensions/markers/Markers.js"
     import {PromotionDialog} from "../src/cm-chessboard/extensions/promotion-dialog/PromotionDialog.js"
+    import {Accessibility} from "../src/cm-chessboard/extensions/accessibility/Accessibility.js"
 
     const chess = new Chess()
 
@@ -77,7 +78,8 @@
         orientation: COLOR.white,
         extensions: [
             {class: Markers, props: {autoMarkers: MARKER_TYPE.square}},
-            {class: PromotionDialog}
+            {class: PromotionDialog},
+            {class: Accessibility, props: {visuallyHidden: true}}
         ]
     })
     board.enableMoveInput(inputHandler, COLOR.white)

package/package.json

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

package/src/cm-chessboard/extensions/accessibility/Accessibility.js

@@ -9,26 +9,30 @@ import {piecesTranslations, renderPieceTitle} from "../../lib/I18n.js"
 
 const hlTranslations = {
     de: {
+        chessboard: "Schachbrett",
         pieces_lists: "Figurenlisten",
         board_as_table: "Schachbrett als Tabelle",
         move_piece: "Figur bewegen",
-        from: "von",
-        to: "nach",
-        move: "bewegen",
+        from: "Zug von",
+        to: "Zug nach",
+        move: "Zug ausführen",
         input_white_enabled: "Eingabe Weiß aktiviert",
         input_black_enabled: "Eingabe Schwarz aktiviert",
-        input_disabled: "Eingabe deaktiviert"
+        input_disabled: "Eingabe deaktiviert",
+        pieces: "Figuren",
     },
     en: {
+        chessboard: "Chessboard",
         pieces_lists: "Pieces lists",
         board_as_table: "Chessboard as table",
         move_piece: "Move piece",
-        from: "from",
-        to: "to",
-        move: "move",
+        from: "Move from",
+        to: "Move to",
+        move: "Make move",
         input_white_enabled: "Input white enabled",
         input_black_enabled: "Input black enabled",
-        input_disabled: "Input disabled"
+        input_disabled: "Input disabled",
+        pieces: "Pieces"
     }
 }
 
@@ -38,9 +42,9 @@ export class Accessibility extends Extension {
         super(chessboard, props)
         this.props = {
             brailleNotationInAlt: true, // show the braille notation of the position in the alt attribute of the SVG image
-            boardAsTable: false, // display the board additionally as HTML table
-            movePieceForm: false, // display a form to move a piece (from, to, move)
-            piecesAsList: false, // display the pieces additionally as List
+            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
         }
         Object.assign(this.props, props)
@@ -49,7 +53,7 @@ export class Accessibility extends Extension {
         this.t = this.translations[this.lang]
         this.th = hlTranslations[this.lang]
         if (this.props.movePieceForm) {
-            this.movePieceFormContainer = this.createElement(`<div><h3>${this.th.move_piece}</h3><form>
+            this.movePieceFormContainer = this.createElement(`<div><h3 id="hl_form_${this.chessboard.id}">${this.th.move_piece}</h3><form aria-labelledby="hl_form_${this.chessboard.id}">
             <label for="move_piece_input_from_${chessboard.id}">${this.th.from}</label><input class="input-from" type="text" size="2" id="move_piece_input_from_${chessboard.id}"/>
             <label for="move_piece_input_to_${chessboard.id}">${this.th.to}</label><input class="input-to" type="text" size="2" id="move_piece_input_to_${chessboard.id}"/>
             <button type="submit" class="button-move">${this.th.move}</button>
@@ -79,7 +83,7 @@ export class Accessibility extends Extension {
             this.chessboard.context.appendChild(this.movePieceFormContainer)
         }
         if (this.props.boardAsTable) {
-            this.boardAsTableContainer = this.createElement(`<div><h3>${this.th.board_as_table}</h3><div class="table"></div></div>`)
+            this.boardAsTableContainer = this.createElement(`<div><h3 id="hl_table_${this.chessboard.id}">${this.th.board_as_table}</h3><div class="table"></div></div>`)
             this.boardAsTable = this.boardAsTableContainer.querySelector(".table")
             this.chessboard.context.appendChild(this.boardAsTableContainer)
             if (this.props.visuallyHidden) {
@@ -87,7 +91,7 @@ export class Accessibility extends Extension {
             }
         }
         if (this.props.piecesAsList) {
-            this.piecesListContainer = this.createElement(`<div><h3>${this.th.pieces_lists}</h3><div class="list"></div></div>`)
+            this.piecesListContainer = this.createElement(`<div><h3 id="hl_lists_${this.chessboard.id}">${this.th.pieces_lists}</h3><div class="list"></div></div>`)
             this.piecesList = this.piecesListContainer.querySelector(".list")
             this.chessboard.context.appendChild(this.piecesListContainer)
             if (this.props.visuallyHidden) {
@@ -169,9 +173,9 @@ ${listB}`
             }
         }
         this.piecesList.innerHTML = `
-        <h4 id="white_${this.chessboard.id}">${this.t.colors_long.w}</h4>
+        <h4 id="white_${this.chessboard.id}">${this.th.pieces} ${this.t.colors_long.w}</h4>
         <ul aria-labelledby="white_${this.chessboard.id}" class="list-inline">${listW}</ul>
-        <h4 id="black_${this.chessboard.id}">${this.t.colors_long.b}</h4>
+        <h4 id="black_${this.chessboard.id}">${this.th.pieces} ${this.t.colors_long.b}</h4>
         <ul aria-labelledby="black_${this.chessboard.id}" class="list-inline">${listB}</ul>`
     }
 
@@ -184,7 +188,7 @@ ${listB}`
             files.reverse()
             squares.reverse()
         }
-        let html = `<table><!--<caption>${this.th.board_as_table}</caption>--><tr><th></th>`
+        let html = `<table aria-labelledby="hl_table_${this.chessboard.id}"><tr><th></th>`
         for (const rank of ranks) {
             html += `<th scope='col'>${rank}</th>`
         }

package/src/cm-chessboard/lib/Utils.js

@@ -38,4 +38,15 @@ export class Utils {
         return target
     }
 
+    static createTask() {
+        let resolve, reject
+        const promise = new Promise(function (_resolve, _reject) {
+            resolve = _resolve
+            reject = _reject
+        })
+        promise.resolve = resolve
+        promise.reject = reject
+        return promise
+    }
+
 }

package/src/cm-chessboard/model/ChessboardState.js

@@ -5,17 +5,6 @@
  */
 import {Position} from "./Position.js"
 
-export function createTask() {
-    let resolve, reject
-    const promise = new Promise(function (_resolve, _reject) {
-        resolve = _resolve
-        reject = _reject
-    })
-    promise.resolve = resolve
-    promise.reject = reject
-    return promise
-}
-
 export class ChessboardState {
 
     constructor() {
@@ -27,30 +16,7 @@ export class ChessboardState {
         this.inputEnabled = false
         this.squareSelectEnabled = false
         this.extensionPoints = {}
-        this.moveInputProcess = createTask().resolve()
-    }
-
-    setPosition(fen, animated = false) {
-        this.position = new Position(fen, animated)
-    }
-
-    movePiece(fromSquare, toSquare, animated = false) {
-        const position = this._position.clone()
-        position.animated = animated
-        const piece = position.getPiece(fromSquare)
-        if (!piece) {
-            console.error("no piece on", fromSquare)
-        }
-        position.setPiece(fromSquare, undefined)
-        position.setPiece(toSquare, piece)
-        this._position = position
-    }
-
-    setPiece(square, piece, animated = false) {
-        const position = this._position.clone()
-        position.animated = animated
-        position.setPiece(square, piece)
-        this._position = position
+        this.moveInputProcess = Promise.resolve()
     }
 
     invokeExtensionPoints(name, data = {}) {

package/src/cm-chessboard/view/ChessboardView.js

@@ -96,7 +96,7 @@ export class ChessboardView {
         this.svg.setAttribute("role", "img")
         this.updateMetrics()
         this.boardGroup = Svg.addElement(this.svg, "g", {class: "board"})
-        this.coordinatesGroup = Svg.addElement(this.svg, "g", {class: "coordinates"})
+        this.coordinatesGroup = Svg.addElement(this.svg, "g", {class: "coordinates", "aria-hidden": "true"})
         this.markersLayer = Svg.addElement(this.svg, "g", {class: "markers-layer"})
         this.piecesLayer = Svg.addElement(this.svg, "g", {class: "pieces-layer"})
         this.piecesGroup = Svg.addElement(this.piecesLayer, "g", {class: "pieces"})

package/src/cm-chessboard/view/VisualMoveInput.js

@@ -5,7 +5,7 @@
  */
 
 import {Svg} from "../lib/Svg.js"
-import {createTask} from "../model/ChessboardState.js"
+import {Utils} from "../lib/Utils.js"
 
 const STATE = {
     waitForInputStart: 0,
@@ -36,7 +36,7 @@ export class VisualMoveInput {
         this.moveInputStartedCallback = (square) => {
             const result = moveInputStartedCallback(square)
             if (result) {
-                this.chessboard.state.moveInputProcess = createTask()
+                this.chessboard.state.moveInputProcess = Utils.createTask()
             }
             return result
         }

package/test/TestPiecesAnimation.js

@@ -7,6 +7,7 @@
 import {describe, it, assert} from "../node_modules/teevi/src/teevi.js"
 import {ChessboardState} from "../src/cm-chessboard/model/ChessboardState.js"
 import {PositionsAnimation} from "../src/cm-chessboard/view/PositionAnimationsQueue.js"
+import {Position} from "../src/cm-chessboard/model/Position.js"
 
 describe("TestPiecesAnimation", () => {
     it("should calculate square distances", () => {
@@ -22,9 +23,9 @@ describe("TestPiecesAnimation", () => {
 
     it("should seek changes", () => {
         const state1 = new ChessboardState()
-        state1.setPosition("rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR")
+        state1.position = new Position("rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR")
         const state2 = new ChessboardState()
-        state2.setPosition("rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR")
+        state2.position = new Position("rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR")
         const previousBoard1 = state1.position.squares
         const newBoard1 = state2.position.squares
         const changes = PositionsAnimation.seekChanges(previousBoard1, newBoard1)