maidr 2.13.0 → 2.14.0

package/README.md

@@ -397,22 +397,19 @@ To learn more about the theoretical background and user study results, we recomm
 }
 ```
 
-1. [Born Accessible Data Science and Visualization Courses: Challenges of Developing Curriculum to be Taught by Blind Instructors to Blind Students](https://arxiv.org/abs/2403.02568v1):
+2. [Designing Born-Accessible Courses in Data Science and Visualization: Challenges and Opportunities of a Remote Curriculum Taught by Blind Instructors to Blind Students](https://diglib.eg.org:8443/server/api/core/bitstreams/6d392735-a045-46bb-867c-90b0a538b1b7/content):
 
 ```tex
-@misc{seoBornAccessibleData2024,
-  title         = {Born {{Accessible Data Science}} and {{Visualization Courses}}: {{Challenges}} of {{Developing Curriculum}} to Be {{Taught}} by {{Blind Instructors}} to {{Blind Students}}},
-  shorttitle    = {Born {{Accessible Data Science}} and {{Visualization Courses}}},
-  author        = {Seo, JooYoung and O'Modhrain, Sile and Xia, Yilin and Kamath, Sanchita and Lee, Bongshin and Coughlan, James M.},
-  year          = {2024},
-  month         = mar,
-  number        = {arXiv:2403.02568},
-  eprint        = {2403.02568},
-  primaryclass  = {cs},
-  publisher     = {{arXiv}},
-  urldate       = {2024-03-08},
-  archiveprefix = {arxiv},
-  keywords      = {Computer Science - Human-Computer Interaction}
+@inproceedings{10.2312:eved.20241053,
+  booktitle = {EuroVis 2024 - Education Papers},
+  editor    = {Firat, Elif E. and Laramee, Robert S. and Andersen, Nicklas Sindelv},
+  title     = {{Designing Born-Accessible Courses in Data Science and Visualization: Challenges and Opportunities of a Remote Curriculum Taught by Blind Instructors
+               to Blind Students}},
+  author    = {JooYoung Seo and Sile O'Modhrain and Yilin Xia and Sanchita Kamath and Bongshin Lee and James M. Coughlan},
+  year      = {2024},
+  publisher = {The Eurographics Association},
+  isbn      = {978-3-03868-257-8},
+  doi       = {10.2312/eved.20241053}
 }
 ```
 

package/dist/maidr.js

@@ -4433,6 +4433,11 @@ class Display {
         globalMax = constants.maxX;
       }
 
+      // exception: return if we're out of bounds
+      if (plotPos < 0 || plotPos >= plot.plotData.length) {
+        return;
+      }
+
       // We convert main plot data to array of values and types, including min and max, and seperating outliers and removing nulls
       let valData = [];
       valData.push({ type: 'global_min', value: globalMin });
@@ -4698,8 +4703,6 @@ class Display {
       }
     }
 
-    constants.brailleInput.value = brailleArray.join('');
-
     constants.brailleInput.value = brailleArray.join('');
     if (constants.debugLevel > 5) {
       console.log('braille:', constants.brailleInput.value);
@@ -8210,35 +8213,30 @@ class Control {
       constants.lastx = 0;
       let lastPlayed = '';
 
-      // testing for braille cursor routing
-      /*
+      // braille cursor routing
       document.addEventListener('selectionchange', function (e) {
-        // notes:
-        // this basically works
-        // constants.braillInput.selectionStart is the key, and is the position,
-        // but it starts at 1, so we need to subtract 1 to get the actual position
-        // hard part is that we need to wire this through the whole script
-        // event is selectionchange, so we'll either need to refactor and do separate events + functions for this,
-        // or pull UpdateAll() etc into their own area so it can be triggered from anywhere
-        // ... ideally let's do that. Better yet, have a global UpdateAll, not per chart
-
-        const selection = document.getSelection();
-        console.log('Testing cursor routing', new Date().toLocaleTimeString());
-        console.log('selection: ', selection);
-        let pos = constants.brailleInput.selectionStart;
-        console.log('Position: ', pos);
-        position.x = pos - 1; // selection starts at 1, so we subtract 1 to get the actual position
-        let testEnd = lockPosition();
-
-        // update display / text / audio
-        if (testEnd) {
-          UpdateAll();
-        }
-        if (testEnd) {
-          audio.playEnd();
+        if (constants.brailleMode == 'on') {
+          let pos = constants.brailleInput.selectionStart;
+          // we're using braille cursor, update the selection from what was clicked
+          pos = constants.brailleInput.selectionStart;
+          if (pos < 0) {
+            pos = 0;
+          }
+          position.x = pos;
+          lockPosition();
+          let testEnd = true;
+
+          // update display / text / audio
+          if (testEnd) {
+            UpdateAll();
+          }
+          if (testEnd) {
+            audio.playEnd();
+          }
+        } else {
+          // we're using normal cursor, let the default handle it
         }
       });
-      */
 
       // control eventlisteners
       constants.events.push([
@@ -8417,17 +8415,19 @@ class Control {
       function lockPosition() {
         // lock to min / max postions
         let didLockHappen = false;
-        // if (!constants.hasRect) {
-        //   return didLockHappen;
-        // }
 
         if (position.x < 0) {
           position.x = 0;
           didLockHappen = true;
+          if (constants.brailleMode != 'off') {
+            // change selection to match postion as well
+            constants.brailleInput.selectionEnd = 0;
+          }
         }
         if (position.x > plot.plotData.length - 1) {
           position.x = plot.plotData.length - 1;
           didLockHappen = true;
+          constants.brailleInput.selectionEnd = plot.plotData.length - 1;
         }
 
         return didLockHappen;
@@ -8514,6 +8514,59 @@ class Control {
       }
       let lastPlayed = '';
 
+      // braille cursor routing
+      // bug: still not working. Not really sure what's going on but the tethering is now totally broken
+      // like, it doesn't even seem to be on the right plot
+      document.addEventListener('selectionchange', function (e) {
+        e.preventDefault();
+        if (
+          constants.brailleMode == 'on' &&
+          constants.brailleInput.selectionStart
+        ) {
+          let cursorPos = constants.brailleInput.selectionStart;
+          // we're using braille cursor, update the selection from what was clicked
+          cursorPos = constants.brailleInput.selectionStart;
+          if (cursorPos < 0) {
+            pos = 0;
+          }
+          // convert braille position to start of whatever section we're in
+          let walk = 0;
+          let posType = '';
+          if (constants.brailleData) {
+            for (let i = 0; i < constants.brailleData.length; i++) {
+              walk += constants.brailleData[i].numChars;
+              if (walk > cursorPos) {
+                if (constants.brailleData[i].type == 'blank') {
+                  posType = constants.brailleData[i + 1].type;
+                } else {
+                  posType = constants.brailleData[i].type;
+                }
+                break;
+              }
+            }
+          }
+          let pos = plot.sections.indexOf(posType);
+
+          if (posType.length > 0) {
+            if (constants.plotOrientation == 'vert') {
+              position.y = pos;
+            } else {
+              position.x = pos;
+            }
+            lockPosition();
+            let testEnd = true;
+
+            // update display / text / audio
+            if (testEnd) {
+              UpdateAll();
+            }
+            if (testEnd) {
+              audio.playEnd();
+            }
+          }
+        }
+      });
+
       // control eventlisteners
       constants.events.push([
         constants.chart,
@@ -8526,12 +8579,14 @@ class Control {
           if (e.key == 'ArrowRight') {
             if (constants.isMac ? e.metaKey : e.ctrlKey) {
               if (e.shiftKey) {
+                // autoplay
                 if (constants.plotOrientation == 'vert') {
                   Autoplay('right', position.x, plot.plotData.length - 1);
                 } else {
                   Autoplay('right', position.x, plot.sections.length - 1);
                 }
               } else {
+                // move to end
                 isAtEnd = lockPosition();
                 if (constants.plotOrientation == 'vert') {
                   position.x = plot.plotData.length - 1;
@@ -8550,6 +8605,7 @@ class Control {
                 lastY = position.y;
                 Autoplay('reverse-right', plot.plotData.length - 1, position.x);
               } else {
+                // normal movement
                 if (position.x == -1 && position.y == plot.sections.length) {
                   position.y -= 1;
                 }
@@ -9122,6 +9178,45 @@ class Control {
       let lastPlayed = '';
       constants.lastx = 0;
 
+      document.addEventListener('selectionchange', function (e) {
+        if (constants.brailleMode == 'on') {
+          let pos = constants.brailleInput.selectionStart;
+
+          // exception: don't let users click the seperator char
+          let seperatorPositions = constants.brailleInput.value
+            .split('')
+            .reduce((positions, char, index) => {
+              if (char === '⠳') positions.push(index);
+              return positions;
+            }, []);
+          if (seperatorPositions.includes(pos)) {
+            return;
+          }
+
+          // we're using braille cursor, update the selection from what was clicked
+          pos = constants.brailleInput.selectionStart;
+          if (pos < 0) {
+            pos = 0;
+          }
+
+          // actual position is based on num_cols and num_rows and the spacer
+          position.y = Math.floor(pos / (plot.num_cols + 1));
+          position.x = pos % (plot.num_cols + 1);
+          lockPosition();
+          let testEnd = true;
+
+          // update display / text / audio
+          if (testEnd) {
+            UpdateAll();
+          }
+          if (testEnd) {
+            audio.playEnd();
+          }
+        } else {
+          // we're using normal cursor, let the default handle it
+        }
+      });
+
       // control eventlisteners
       constants.events.push([
         constants.chart,
@@ -9228,6 +9323,8 @@ class Control {
             constants.navigation = 0;
           }
 
+          console.log('position: ' + position.x + ', ' + position.y);
+
           // update text, display, and audio
           if (updateInfoThisRound && !isAtEnd) {
             UpdateAll();
@@ -9747,6 +9844,32 @@ class Control {
         }
       }
 
+      // todo / bug: does'nt work at all on just line (in gallery)
+      // it sorta works in scatter (in gallery), visual highlight changes, but sonify and text don't update
+      document.addEventListener('selectionchange', function (e) {
+        if (constants.brailleMode == 'on') {
+          let pos = constants.brailleInput.selectionStart;
+          // we're using braille cursor, update the selection from what was clicked
+          pos = constants.brailleInput.selectionStart;
+          if (pos < 0) {
+            pos = 0;
+          }
+          positionL1.x = pos;
+          lockPosition();
+          let testEnd = true;
+
+          // update display / text / audio
+          if (testEnd) {
+            UpdateAllBraille();
+          }
+          if (testEnd) {
+            audio.playEnd();
+          }
+        } else {
+          // we're using normal cursor, let the default handle it
+        }
+      });
+
       constants.events.push([
         constants.brailleInput,
         'keydown',
@@ -10048,6 +10171,30 @@ class Control {
       let lastPlayed = '';
       constants.lastx = 0;
 
+      document.addEventListener('selectionchange', function (e) {
+        if (constants.brailleMode == 'on') {
+          let pos = constants.brailleInput.selectionStart;
+          // we're using braille cursor, update the selection from what was clicked
+          pos = constants.brailleInput.selectionStart;
+          if (pos < 0) {
+            pos = 0;
+          }
+          position.x = pos;
+          lockPosition();
+          let testEnd = true;
+
+          // update display / text / audio
+          if (testEnd) {
+            UpdateAll();
+          }
+          if (testEnd) {
+            audio.playEnd();
+          }
+        } else {
+          // we're using normal cursor, let the default handle it
+        }
+      });
+
       // control eventlisteners
       constants.events.push([
         [constants.chart, constants.brailleInput],
@@ -10294,6 +10441,32 @@ class Control {
       let lastPlayed = '';
       constants.lastx = 0;
 
+      // todo bug, forgot about all mode
+      // bug: you can click 1 past end (for all chart types). Make sure we're lockign and then resetting the selectionStart
+      document.addEventListener('selectionchange', function (e) {
+        if (constants.brailleMode == 'on') {
+          let pos = constants.brailleInput.selectionStart;
+          // we're using braille cursor, update the selection from what was clicked
+          pos = constants.brailleInput.selectionStart;
+          if (pos < 0) {
+            pos = 0;
+          }
+          position.x = pos;
+          lockPosition();
+          let testEnd = true;
+
+          // update display / text / audio
+          if (testEnd) {
+            UpdateAll();
+          }
+          if (testEnd) {
+            audio.playEnd();
+          }
+        } else {
+          // we're using normal cursor, let the default handle it
+        }
+      });
+
       // control eventlisteners
       constants.events.push([
         [constants.chart, constants.brailleInput],
@@ -10651,6 +10824,29 @@ class Control {
       let lastPlayed = '';
       constants.lastx = 0;
 
+      // braille cursor routing
+      document.addEventListener('selectionchange', function (e) {
+        if (constants.brailleMode == 'on') {
+          let pos = constants.brailleInput.selectionStart;
+          // we're using braille cursor, update the selection from what was clicked
+          pos = constants.brailleInput.selectionStart;
+          if (pos < 0) {
+            pos = 0;
+          }
+          position.x = pos;
+          lockPosition();
+          let testEnd = true;
+
+          // update display / text / audio
+          if (testEnd) {
+            UpdateAll();
+          }
+          if (testEnd) {
+            audio.playEnd();
+          }
+        }
+      });
+
       // control eventlisteners
       constants.events.push([
         constants.chart,
@@ -11540,6 +11736,7 @@ function CreateChartComponents() {
       constants.brailleDisplayLength +
       '" ' +
       'aria-brailleroledescription="" ' + // this kills the 2 char 'edit' that screen readers add
+      'autocomplete="off" ' +
       '/>\n</div>\n'
   );