Merge pull request #330 from UrbanOS-Public/1142

1142

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smartcitiesdata/react-discovery-ui",
-  "version": "2.1.35",
+  "version": "2.1.36",
   "description": "React component for dataset discovery UI",
   "main": "./lib/ReactDiscoveryUI.js",
   "repository": {

src/components/auth0-login-zone/auth0-login-zone.js

@@ -58,20 +58,20 @@ export const Auth0LoginZone = ({ auth: { isAuthenticated, isLoading, loginWithRe
                 <span className='menu-text'><Link to='/user' rel='noopener noreferrer'>Workspaces</Link></span>
               </li>
               {(regenerateApiKeyFF === 'true') &&
-              <li className='menu-item'>
-                <VpnKeyIcon />
-                <span className='menu-text'><Link to='/apiKey' rel='noopener noreferrer'>API Key</Link></span>
-              </li>}
+                <li className='menu-item'>
+                  <VpnKeyIcon />
+                  <span className='menu-text'><Link to='/apiKey' rel='noopener noreferrer'>API Key</Link></span>
+                </li>}
               {
                 (window.CONTRIBUTE_HOST) &&
                 <li className='menu-item'>
                   <Backup />
-                  <span className='menu-text'><a href={window.CONTRIBUTE_HOST}>My Datasets</a></span>
+                  <span className='menu-text'><a role="link" href={window.CONTRIBUTE_HOST}>My Datasets</a></span>
                 </li>
               }
               <li className='menu-item' id='logout-button' onClick={() => { logout({ returnTo }) }}>
                 <ExitIcon />
-                <span className='menu-text'><a href="#">Log Out</a></span>
+                <span className='menu-text'><a role="link" href="#">Log Out</a></span>
               </li>
             </ul>
           </div>

src/components/collapsable-box/collapsable-box.js

@@ -5,28 +5,28 @@ import { Component } from 'react'
 import DetailToggleIcon from '../detail-toggle-icon'
 
 export default class extends Component {
-  constructor (props) {
+  constructor(props) {
     super(props)
     const isDesktop = window.matchMedia(variables.aboveMaxBreak).matches
     this.state = { expanded: isDesktop || props.expanded }
   }
 
-  toggleCollapsed () {
+  toggleCollapsed() {
     this.setState({ expanded: !this.state.expanded })
   }
 
-  headerOpenClass () {
+  headerOpenClass() {
     return this.state.expanded ? 'open' : ''
   }
 
-  render () {
+  render() {
     return (
       <collapsable-box>
         <div
           data-testid={this.props.testId}
           className={`header-container ${this.headerOpenClass()}`}
           onClick={e => { this.toggleCollapsed() }}
-          onKeyDown={(event) => { if (event.key === ' ' || event.key === 'Enter') { this.toggleCollapsed() } }}
+          onKeyDown={(event) => { if (event.key === ' ' || event.key === 'Enter') { event.preventDefault(); this.toggleCollapsed() } }}
           role='button'
           tabIndex='0'
           aria-label={`${this.props.title} collapsable box`}

src/components/dataset-api-doc/api-example.js

@@ -137,7 +137,7 @@ function renderExample(example, index) {
         <div
           className='example-element curl'
           onClick={(event) => copyToClipboard(event)}
-          onKeyDownCapture={(event) => { if (event.key === ' ' || event.key === 'Enter') { copyToClipboard(event) } }}
+          onKeyDownCapture={(event) => { if (event.key === ' ' || event.key === 'Enter') { event.preventDefault() && copyToClipboard(event) } }}
           role='button'
           tabIndex='0'
           aria-label={`cURL ${index}`}

src/components/dataset-api-doc/dataset-api-doc.js

@@ -89,9 +89,9 @@ function freestyleDescription() {
       The query to run must be submitted as plain text in the body of the request.<br />
       Documentation can be found at:
       <ul>
-        <li><a className="primary-color" href='https://en.wikipedia.org/wiki/SQL_syntax' target='_blank'>SQL Syntax (Wikipedia)</a></li>
-        <li><a className="primary-color" href='https://www.w3schools.com/sql/sql_quickref.asp' target='_blank'>Quick Reference (W3 Schools)</a></li>
-        <li><a className="primary-color" href='https://prestodb.github.io/docs/current/sql/select.html' target='_blank'>PrestoDB Specific Syntax</a></li>
+        <li><a role="link" className="primary-color" href='https://en.wikipedia.org/wiki/SQL_syntax' target='_blank'>SQL Syntax (Wikipedia)</a></li>
+        <li><a role="link" className="primary-color" href='https://www.w3schools.com/sql/sql_quickref.asp' target='_blank'>Quick Reference (W3 Schools)</a></li>
+        <li><a role="link" className="primary-color" href='https://prestodb.github.io/docs/current/sql/select.html' target='_blank'>PrestoDB Specific Syntax</a></li>
       </ul>
     </div>
   )

src/components/dataset-details/dataset-details.js

@@ -44,6 +44,7 @@ const createKeyword = name => (
   <a
     key={`dataset-keyword-${name}`}
     className='keyword'
+    role="link"
     href={`/?${QueryStringBuilder.createFilterQueryString('keywords', name)}`}
   >
     {name}

src/components/dataset-dictionary/dataset-dictionary.js

@@ -101,6 +101,7 @@ const viewLink = datasetId => (
     <a
       href={`${window.DISC_API_URL}/api/v1/dataset/${datasetId}/dictionary`}
       target='_blank'
+      role="link"
     >
       <span className='view-text'>View as JSON</span>
     </a>

src/components/dataset-metadata/dataset-metadata.js

@@ -5,7 +5,7 @@ import 'react-table/react-table.css'
 import CollapsableBox from '../../components/collapsable-box'
 
 export default class extends Component {
-  render () {
+  render() {
     const { dataset } = this.props
     if (!this.props.dataset) {
       return <div />
@@ -48,7 +48,7 @@ export default class extends Component {
       {
         Field: 'Data Dictionary URL',
         Value: (
-          <a href={dataset.describedByUrl} target='_blank'>
+          <a role="link" href={dataset.describedByUrl} target='_blank'>
             {dataset.describedByUrl}
           </a>
         )
@@ -67,13 +67,13 @@ export default class extends Component {
       },
       {
         Field: 'Homepage URL',
-        Value: <a href={dataset.homepage} target='_blank'>{dataset.homepage}</a>
+        Value: <a role="link" href={dataset.homepage} target='_blank'>{dataset.homepage}</a>
       },
       {
         Field: 'Related Documents',
         Value: referenceUrls.map(url => (
           <div>
-            <a href={url} target='_blank'>
+            <a role="link" href={url} target='_blank'>
               {url}
             </a>
           </div>
@@ -82,7 +82,7 @@ export default class extends Component {
       {
         Field: 'Source URL',
         Value: (
-          <a href={dataset.sourceUrl} target='_blank'>
+          <a role="link" href={dataset.sourceUrl} target='_blank'>
             {dataset.sourceUrl}
           </a>
         )
@@ -94,7 +94,7 @@ export default class extends Component {
       {
         Field: 'License',
         Value: (
-          <a href={dataset.license} target='_blank'>
+          <a role="link" href={dataset.license} target='_blank'>
             {dataset.license}
           </a>
         )
@@ -149,9 +149,9 @@ export default class extends Component {
   }
 }
 
-function mailto (email, name) {
+function mailto(email, name) {
   if (email) {
-    return <a href={'mailto:' + email}>{name}</a>
+    return <a role="link" href={'mailto:' + email}>{name}</a>
   } else {
     return <span>{name}</span>
   }

src/components/dataset-metadata/dataset-metadata.test.js

@@ -11,14 +11,14 @@ describe('additional info element', () => {
   test('card renders mailto link correctly', () => {
     const subject = shallow(<DatasetMetadata dataset={{ contactName: 'John', contactEmail: '[email protected]' }} />)
     const actual = JSON.stringify(subject.find('ReactTable').prop('data')[0])
-    const expected = JSON.stringify({ Field: 'Maintainer', Value: <a href='mailto:[email protected]'>John</a> })
+    const expected = JSON.stringify({ Field: 'Maintainer', Value: <a role="link" href='mailto:[email protected]'>John</a> })
     expect(actual).toEqual(expected)
   })
 
   test('referenceUrls renders correctly', () => {
     const subject = shallow(<DatasetMetadata dataset={{ referenceUrls: ['https://www.google.com', 'https://www.facebook.com'] }} />)
     const actual = JSON.stringify(subject.find('ReactTable').prop('data')[13])
-    const expected = JSON.stringify({ Field: 'Related Documents', Value: [<div><a href='https://www.google.com' target='_blank'>https://www.google.com</a></div>, <div><a href='https://www.facebook.com' target='_blank'>https://www.facebook.com</a></div>] })
+    const expected = JSON.stringify({ Field: 'Related Documents', Value: [<div><a role="link" href='https://www.google.com' target='_blank'>https://www.google.com</a></div>, <div><a role="link" href='https://www.facebook.com' target='_blank'>https://www.facebook.com</a></div>] })
     expect(actual).toEqual(expected)
   })
 })

src/components/dataset-recommendations/dataset-recommendations.js

@@ -26,7 +26,7 @@ const DatasetRecommendations = (props) => {
         <div className='recommendation-content'>
           {recommendations.map(rec =>
             <div className='recommended-dataset' key={rec.id}>
-              <a href={RecommendationUtils.getDatasetUrl(rec)} target='_blank'>{rec.dataTitle}</a>
+              <a role="link" href={RecommendationUtils.getDatasetUrl(rec)} target='_blank'>{rec.dataTitle}</a>
             </div>)}
         </div>
       </CollapsableBox>

src/components/facet-list/facet-list.js

@@ -33,7 +33,7 @@ const FacetList = props => {
           ))
           .value()
       }
-      {showMore && <a className='show-more' onClick={() => props.showMoreHandler(props.title, props.facets)}>Show more</a>}
+      {showMore && <a role="link" className='show-more' onClick={() => props.showMoreHandler(props.title, props.facets)}>Show more</a>}
     </div>
   )
 }

src/components/generic-elements/call-to-action-button/call-to-action-button.js

@@ -64,19 +64,9 @@ export function CallToActionButton({ url, format, sourceType, sourceUrl }) {
           <button className='modal-confirm modal-button' onClick={navigateToSourceUrl}>Continue</button>
         </div>
       </Modal>
-      <div>
-        <call-to-action-button className='primary-background-color'>
-          <a
-            data-testid='call-to-action-button'
-            className='call-to-action-button'
-            role='button'
-            rel='noopener noreferrer'
-            onClick={handleAction}
-          >
-            {callToActionText()}
-          </a>
-        </call-to-action-button>
-      </div>
+      <button onClick={handleAction} rel='noopener noreferrer' data-testid='call-to-action-button' className='call-to-action-button primary-background-color'>
+        {callToActionText()}
+      </button>
     </div>
   )
 }

src/components/generic-elements/select/select.scss

@@ -19,4 +19,4 @@ select-element {
     padding-right: 0.5rem;
     text-transform: uppercase;
   }
-}
+}

src/components/generic-elements/tab-button/tab-button.scss

@@ -8,13 +8,19 @@
   cursor: pointer;
   color: $dark-grey;
   background-color: transparent;
+  fill: currentColor;
 
   &:hover {
     color: $almost-black;
   }
 
+  &:focus {
+    color: $almost-black;
+  }
+
   &:disabled,
-  &:disabled:hover {
+  &:disabled:hover,
+  &:disabled:focus {
     cursor: default;
     color: $dark-grey;
   }

src/components/login-zone/login-zone.scss

@@ -88,6 +88,10 @@ login-zone {
       background-color: $light-blue;
       color: white;
     }
+
+    &:focus {
+      background-color: $light-grey;
+    }
   }
 
   .logintext {

src/components/organization/organization.js

@@ -4,7 +4,7 @@ import { QueryStringBuilder } from '../../utils'
 export default ({ organization }) => (
   <dataset-organization>
     <div className='organization-header'>Organization Info</div>
-    <a href={`/?${QueryStringBuilder.createFilterQueryString('organization', organization.title)}`}>
+    <a role="link" href={`/?${QueryStringBuilder.createFilterQueryString('organization', organization.title)}`}>
       <img data-testid='organization-logo' className='logo' src={organization.image} />
     </a>
     <div data-testid='organization-title' className='name wrapped-text'>{organization.title}</div>

src/components/query-form/query-form.js

@@ -1,6 +1,9 @@
-import { useState, useRef } from 'react'
+import { useState } from 'react'
 import PropTypes from 'prop-types'
 import './query-form.scss'
+import '@trendmicro/react-buttons/dist/react-buttons.css'
+import '@trendmicro/react-dropdown/dist/react-dropdown.css'
+import Dropdown, { MenuItem } from '@trendmicro/react-dropdown';
 import LoadingElement from '../generic-elements/loading-element'
 import RecommendationList from '../recommendation-list'
 import ReactTooltip from 'react-tooltip'
@@ -9,8 +12,6 @@ import MergeType from '@material-ui/icons/MergeType'
 import _ from 'lodash'
 import { Link } from 'react-router-dom'
 import CodeEditor from '../code-editor'
-import { MenuItem } from '@trendmicro/react-dropdown'
-import Dropdown from '../download-dropdown/dropdown'
 import { parse } from 'js2xmlparser'
 
 const QueryForm = props => {
@@ -216,9 +217,9 @@ const QueryForm = props => {
           <Dropdown.Toggle title='Download Returned Results' style={{ background: downloadButtonColor, color: 'white', border: 'none', padding: '1rem' }} />
           <Dropdown.MenuWrapper>
             <Dropdown.Menu>
-              <MenuItem onClick={() => queryDataDownloadLinkAsCsv()}>CSV</MenuItem>
-              <MenuItem onClick={() => queryDataDownloadLinkAsJson()}>JSON</MenuItem>
-              <MenuItem onClick={() => queryDataDownloadLinkAsXml()}>XML</MenuItem>
+              <MenuItem onKeyDown={(event) => (event.key === ' ' || event.key === 'Enter') && queryDataDownloadLinkAsCsv()} onClick={() => queryDataDownloadLinkAsCsv()}>CSV</MenuItem>
+              <MenuItem onKeyDown={(event) => (event.key === ' ' || event.key === 'Enter') && queryDataDownloadLinkAsJson()} onClick={() => queryDataDownloadLinkAsJson()}>JSON</MenuItem>
+              <MenuItem onKeyDown={(event) => (event.key === ' ' || event.key === 'Enter') && queryDataDownloadLinkAsJson()} onClick={() => queryDataDownloadLinkAsXml()}>XML</MenuItem>
             </Dropdown.Menu>
           </Dropdown.MenuWrapper>
         </Dropdown>

src/components/recommendation-list/recommendation-list.js

@@ -30,7 +30,7 @@ const RecommendationList = props => {
             <FilterNoneIcon data-for={recommendation.id} data-tip='' />
           </CopyToClipboard>
           <div className='recommendation'>
-            <a href={RecommendationUtils.getDatasetUrl(recommendation)} target='_blank' className='action'>
+            <a role="link" href={RecommendationUtils.getDatasetUrl(recommendation)} target='_blank' className='action'>
               {recommendation.dataTitle}
             </a>
           </div>

src/components/streaming-api-doc/streaming-api-doc.js

@@ -3,21 +3,21 @@ import { Component } from 'react'
 import CollapsableBox from '../../components/collapsable-box'
 
 export default class extends Component {
-  streamingHeader () {
+  streamingHeader() {
     return (
       <div>Access Operating System data through a websocket.</div>
     )
   }
 
-  streamingBody () {
+  streamingBody() {
     const dataset = this.props.dataset
     const systemName = dataset.organization.name + '__' + dataset.name
 
     return (
       <div>
         <div className='example-container'>
           <div className='example-header'>
-            Example using <a href='https://github.com/vi/websocat'>Websocat</a> on a terminal
+            Example using <a role="link" href='https://github.com/vi/websocat'>Websocat</a> on a terminal
           </div>
           <div className='example-code'>
             <code>
@@ -29,14 +29,14 @@ export default class extends Component {
             Phoenix Channels clients
           </div>
           <div>
-            For application development, look at the <a href='https://www.npmjs.com/package/phoenix' target='_blank'>official Phoenix Javascript library</a>, or one of the <a href='https://hexdocs.pm/phoenix/channels.html#client-libraries' target='_blank'>other client libraries</a>
+            For application development, look at the <a role="link" href='https://www.npmjs.com/package/phoenix' target='_blank'>official Phoenix Javascript library</a>, or one of the <a role="link" href='https://hexdocs.pm/phoenix/channels.html#client-libraries' target='_blank'>other client libraries</a>
           </div>
         </div>
       </div>
     )
   }
 
-  render () {
+  render() {
     if (!this.props.dataset) {
       return <streaming-api-doc />
     }

src/components/visualization-list-menu-item/visualization-list-menu-item.js

@@ -15,7 +15,7 @@ const VisualizationListMenuItem = ({ isAuthenticated }) => {
   return (
     <visualization-list-menu-item>
       <TabButton data-testid='visualization-list-menu-item' className={`button-${isAuthenticated ? 'enabled' : 'disabled'} ${userNeedsLoginInfo && 'dialog-open'}`} onClick={showLoginPrompt}>
-        <div title='Saved Workspaces'>
+        <div className='visualization-list-menu-item-icon-holder' title='Saved Workspaces'>
           <FolderIcon className={`header-item link-${isAuthenticated ? 'enabled' : 'disabled'}`} accessibilityDesc="Open Saved Workspaces" />
         </div>
       </TabButton>