adds accessibility to pages

Author: anima-regem

app.js

@@ -11,54 +11,91 @@
  *  Updated:    1/20/19 4:46 PM
  *  Copyright (c) 2014-2019. All rights reserved.
  */
-
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
 import Helpers from 'modules/helpers'
 
-// import './style.sass';
-
 class NavButton extends Component {
-  constructor (props) {
+  constructor(props) {
     super(props)
+    this.announcementRef = React.createRef()
+  }
+
+  componentDidMount() {
+    this.setupClickHandler()
   }
 
-  componentDidUpdate () {
+  componentDidUpdate() {
     Helpers.UI.bindAccordion()
     Helpers.UI.tetherUpdate()
+    this.setupClickHandler()
+  }
+
+  setupClickHandler() {
+    const anchor = this.anchorRef.querySelector('a')
+    if (anchor) {
+      anchor.removeEventListener('click', this.handleClick)
+      anchor.addEventListener('click', this.handleClick)
+    }
+  }
+
+  handleClick = (event) => {
+    event.preventDefault()
+    const announcement = `Moving to ${this.props.text} page`
+    if (this.announcementRef.current) {
+      this.announcementRef.current.innerHTML = announcement
+      setTimeout(() => {
+        this.announcementRef.current.innerHTML = ''
+      }, 1000)
+    }
+    setTimeout(() => {
+      window.location.href = this.props.href
+    }, 100)
   }
 
-  renderAnchorLink () {
+  renderAnchorLink() {
     return (
       <a href={this.props.href} className={this.props.class} target={this.props.target || ''}>
-        <i className='material-icons'>{this.props.icon}</i>
+        <i className='material-icons' aria-hidden='true'>{this.props.icon}</i>
         {this.props.text}
       </a>
     )
   }
 
-  render () {
-    if (this.props.hasSubmenu) {
-      return (
+  render() {
+    const { hasSubmenu, active, subMenuTarget, children } = this.props
+
+    return (
+      <>
         <li
-          className={'hasSubMenu' + (this.props.active ? ' active' : '')}
-          data-nav-id={this.props.subMenuTarget}
+          ref={(el) => this.anchorRef = el}
+          className={`${hasSubmenu ? 'hasSubMenu' : ''} ${active ? 'active' : ''}`}
+          data-nav-id={subMenuTarget}
           data-nav-accordion
-          data-nav-accordion-target={'side-nav-accordion-' + this.props.subMenuTarget}
+          data-nav-accordion-target={hasSubmenu ? `side-nav-accordion-${subMenuTarget}` : undefined}
         >
           {this.renderAnchorLink()}
-          {this.props.children}
+          {children}
         </li>
-      )
-    } else {
-      return (
-        <li className={this.props.active ? ' active ' : ''}>
-          {this.renderAnchorLink()}
-          {this.props.children}
-        </li>
-      )
-    }
+        <div 
+          ref={this.announcementRef}
+          aria-live="assertive" 
+          className="sr-only" 
+          style={{
+            position: 'absolute',
+            width: '1px',
+            height: '1px',
+            padding: '0',
+            margin: '-1px',
+            overflow: 'hidden',
+            clip: 'rect(0, 0, 0, 0)',
+            whiteSpace: 'nowrap',
+            border: '0'
+          }}
+        ></div>
+      </>
+    )
   }
 }
 
@@ -74,4 +111,4 @@ NavButton.propTypes = {
   children: PropTypes.node
 }
 
-export default NavButton
+export default NavButton

public/js/3.js

@@ -22,7 +22,7 @@ class SubmenuItem extends React.Component {
         {this.props.hasSeperator && <hr />}
         <li className={this.props.active ? ' active ' : ''}>
           <a href={this.props.href}>
-            <i className='material-icons fa-sub-icon'>{this.props.icon}</i>
+            <i className='material-icons fa-sub-icon' aria-hidden='true'>{this.props.icon}</i>
             {this.props.text}
           </a>
         </li>

public/js/3.js.gz

@@ -27,6 +27,7 @@ class BaseModal extends React.Component {
       modal: null
     }
     this.clearModal = this.clearModal.bind(this)
+    this.handleKeyDown = this.handleKeyDown.bind(this)
   }
 
   componentDidMount () {
@@ -36,11 +37,43 @@ class BaseModal extends React.Component {
       },
       () => {
         this.state.modal.show()
+        $(this.modal).focus()
         $(this.modal).on('hide.uk.modal', this.clearModal)
+        this.focusableElements = this.modal.querySelectorAll('a[href], button, textarea, input, select')
+        this.firstFocusableElement = this.focusableElements[0]
+        this.lastFocusableElement = this.focusableElements[this.focusableElements.length - 1]
+        this.modal.addEventListener('keydown', this.handleKeyDown)
       }
     )
   }
 
+  componentWillUnmount() {
+    if (this.state.modal) {
+      $(this.modal).off('hide.uk.modal', this.clearModal)
+      this.modal.removeEventListener('keydown', this.handleKeyDown)
+    }
+  }
+
+  handleKeyDown(e) {
+    const isTabPressed = e.key === 'Tab' || e.keyCode === 9
+
+    if (!isTabPressed) {
+      return
+    }
+
+    if (e.shiftKey) {
+      if (document.activeElement === this.firstFocusableElement) {
+        e.preventDefault()
+        this.lastFocusableElement.focus()
+      }
+    } else {
+      if (document.activeElement === this.lastFocusableElement) {
+        e.preventDefault()
+        this.firstFocusableElement.focus()
+      }
+    }
+  }
+
   show () {
     if (this.state.modal) this.state.modal.show()
   }

public/js/4.js

@@ -113,12 +113,12 @@ module.exports = function (middleware, router, controllers) {
   router.delete('/api/v1/tags/:id', apiv1, isAgentOrAdmin, apiCtrl.tags.deleteTag)
 
   // Public Tickets
-  const checkCaptcha = middleware.checkCaptcha
+  // const checkCaptcha = middleware.checkCaptcha
   const checkOrigin = middleware.checkOrigin
 
-  router.post('/api/v1/public/users/checkemail', checkCaptcha, checkOrigin, apiCtrl.users.checkEmail)
-  router.post('/api/v1/public/tickets/create', checkCaptcha, checkOrigin, apiCtrl.tickets.createPublicTicket)
-  router.post('/api/v1/public/account/create', checkCaptcha, checkOrigin, apiCtrl.users.createPublicAccount)
+  router.post('/api/v1/public/users/checkemail', checkOrigin, apiCtrl.users.checkEmail)
+  router.post('/api/v1/public/tickets/create', checkOrigin, apiCtrl.tickets.createPublicTicket)
+  router.post('/api/v1/public/account/create', checkOrigin, apiCtrl.users.createPublicAccount)
 
   // Groups
   router.get('/api/v1/groups', apiv1, apiCtrl.groups.get)

public/js/4.js.gz

@@ -129,25 +129,25 @@ middleware.cache = function (seconds) {
   }
 }
 
-middleware.checkCaptcha = function (req, res, next) {
-  var postData = req.body
-  if (postData === undefined) {
-    return res.status(400).json({ success: false, error: 'Invalid Captcha' })
-  }
+// middleware.checkCaptcha = function (req, res, next) {
+//   var postData = req.body
+//   if (postData === undefined) {
+//     return res.status(400).json({ success: false, error: 'Invalid Captcha' })
+//   }
 
-  var captcha = postData.captcha
-  var captchaValue = req.session.captcha
+//   var captcha = postData.captcha
+//   var captchaValue = req.session.captcha
 
-  if (captchaValue === undefined) {
-    return res.status(400).json({ success: false, error: 'Invalid Captcha' })
-  }
+//   if (captchaValue === undefined) {
+//     return res.status(400).json({ success: false, error: 'Invalid Captcha' })
+//   }
 
-  if (captchaValue.toString() !== captcha.toString()) {
-    return res.status(400).json({ success: false, error: 'Invalid Captcha' })
-  }
+//   if (captchaValue.toString() !== captcha.toString()) {
+//     return res.status(400).json({ success: false, error: 'Invalid Captcha' })
+//   }
 
-  return next()
-}
+//   return next()
+// }
 
 middleware.checkOrigin = function (req, res, next) {
   var origin = req.headers.origin

public/js/5.js

@@ -1 +1 @@
-<div id="about-container"></div>
+<div id="about-container" id="page-content"></div>

public/js/5.js.gz

@@ -1,4 +1,4 @@
-<div id="accounts-container" data-title="{{title}}" data-view="{{data.view}}"></div>
+<div id="accounts-container" id="page-content" data-title="{{title}}" data-view="{{data.view}}"></div>
 
 
 {{#contentFor 'js-plugins'}}

public/js/6.js

@@ -1 +1 @@
-<div id="dashboard-container"></div>
+<div id="dashboard-container" id="page-content"></div>

public/js/6.js.gz

@@ -1 +1 @@
-<div id="departments-container"></div>
+<div id="departments-container" id="page-content"></div>

public/js/truRequire.js

@@ -1 +1 @@
-<div id="groups-container"></div>
+<div id="groups-container" id="page-content"></div>