Merge pull request #52 from freckle/lucky/auto-activate-focus-mode-for-screen-readers

Auto activate focus mode for screen readers

Author: luckysoni

package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphy-js",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "author": {
     "name": "Front Row Education",
     "email": "engineering@frontrowed.com",

src/helpers/paper-util.js

@@ -191,6 +191,14 @@ function speakPoint(point: PointT): string {
   return `${Math.round(x)}, ${Math.round(y)}`
 }
 
+function announce(text: string) {
+  // used for aria-live announcements
+  const node = document.getElementById(ANNOUNCEMENT_NODE_ID)
+  if(node) {
+    node.innerText = text
+  }
+}
+
 type GroupKeyT
   = 'grid'
   | 'points'
@@ -237,16 +245,15 @@ const PaperUtil = {
       this.pointsTool = new paper.Tool(pointsGroup)
       this.pointsTool.activate()
 
-      // used for aria-live announcements
-      this.announcementNode = document.getElementById(ANNOUNCEMENT_NODE_ID)
-
       // Provide keyboard accessible buttons for each
       // dragable coordinate point on the graph
       forEach(graphSettings.startingPoints, (p, index) => {
         const controlButton = document.createElement('button')
         const id = `control-button-${index}`
         controlButton.id = id
         controlButton.innerText = `Coordinates ${speakPoint(p)}.`
+        // auto-switch to focus mode for screen-readers
+        controlButton.setAttribute('role', 'application')
         canvas.appendChild(controlButton)
         const paperCenterPoint = this.fromGridCoordinateToView(p)
         // round-robin colors
@@ -582,7 +589,7 @@ const PaperUtil = {
 
       moveDraggedItemAt: (point: PointT): boolean => {
         if (this.draggedItem) {
-          this.announcementNode.innerText = `Moved from coordinates (${speakPoint(this.fromViewCoordinateToGrid(this.draggedItem.position))}), to, coordinates ${speakPoint(point)}.`
+          announce(`Moved from coordinates (${speakPoint(this.fromViewCoordinateToGrid(this.draggedItem.position))}), to, coordinates ${speakPoint(point)}.`)
           const paperPoint = this.fromGridCoordinateToView(point)
           this.draggedItem.position = paperPoint
           return true