Accessibility improvements

src/client/components/facet_bar/FacetBar.js

@@ -257,8 +257,8 @@ class FacetBar extends React.Component {
           }}
           expandIcon={<ExpandMoreIcon />}
           IconButtonProps={{ onClick: this.handleExpandButtonOnClick(facetID) }}
-          aria-controls='panel1a-content'
-          id='panel1a-header'
+          aria-controls={`${facetID}-content`}
+          id={`${facetID}-header`}
         >
           <FacetHeader
             facetID={facetID}

src/client/components/facet_bar/FacetHeader.js

@@ -374,7 +374,7 @@ class FacetHeader extends React.Component {
           title={facetDescription}
           enterDelay={300}
         >
-          <IconButton>
+          <IconButton aria-label='description'>
             <InfoIcon />
           </IconButton>
         </Tooltip>

src/client/components/facet_bar/FacetInfo.js

@@ -22,6 +22,11 @@ const styles = theme => ({
   },
   button: {
     margin: theme.spacing(1)
+  },
+  infoText: {
+    [theme.breakpoints.down('xl')]: {
+      fontWeight: 'bold'
+    }
   }
 })
 
@@ -53,7 +58,7 @@ class FacetInfo extends React.Component {
     const { screenSize } = this.props
     let variant = 'h6'
     if (screenSize === 'xs' || screenSize === 'sm' || screenSize === 'md' || screenSize === 'lg') {
-      variant = 'subtitle2'
+      variant = 'body1'
     }
     return variant
   }
@@ -99,7 +104,7 @@ class FacetInfo extends React.Component {
       <div className={classes.root}>
         {this.props.fetchingResultCount
           ? <CircularProgress style={{ color: purple[500] }} thickness={5} size={26} />
-          : <Typography variant={this.getTypographyVariant()}>{intl.get('facetBar.results')}: {resultCount} {intl.get(`perspectives.${resultClass}.facetResultsType`)}</Typography>}
+          : <Typography className={classes.infoText} variant={this.getTypographyVariant()}>{intl.get('facetBar.results')}: {resultCount} {intl.get(`perspectives.${resultClass}.facetResultsType`)}</Typography>}
         {!mobileMode && <Divider className={classes.facetInfoDivider} />}
         {(activeUriFilters ||
           activeSpatialFilters ||
@@ -137,7 +142,7 @@ class FacetInfo extends React.Component {
             </div>
             <Divider className={classes.facetInfoDivider} />
           </>}
-        {!mobileMode && <Typography variant={this.getTypographyVariant()}>{intl.get('facetBar.narrowDownBy')}:</Typography>}
+        {!mobileMode && <Typography className={classes.infoText} variant={this.getTypographyVariant()}>{intl.get('facetBar.narrowDownBy')}:</Typography>}
       </div>
     )
   }

src/client/components/facet_results/LeafletMap.js

@@ -274,7 +274,7 @@ class LeafletMap extends React.Component {
   initMap = () => {
     // Base layer(s)
     const mapboxBaseLayer = L.tileLayer(`https://api.mapbox.com/styles/v1/mapbox/${this.props.mapBoxStyle}/tiles/{z}/{x}/{y}?access_token=${this.props.mapBoxAccessToken}`, {
-      attribution: '&copy; <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> &copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
+      attribution: '&copy; <a href="https://www.mapbox.com/map-feedback/" target="_blank" rel="noopener">Mapbox</a> &copy; <a href="http://osm.org/copyright" target="_blank" rel="noopener">OpenStreetMap</a> contributors',
       tileSize: 512,
       zoomOffset: -1
     })

src/client/components/main_layout/InfoHeader.js

@@ -117,8 +117,8 @@ const InfoHeader = props => {
             content: classes.summaryContent
           }}
           expandIcon={<ExpandMoreIcon />}
-          aria-controls='panel1a-content'
-          id='panel1a-header'
+          aria-controls='infoheader-content'
+          id='infoheader-header'
           IconButtonProps={{ onClick: handleExpandButtonOnClick }}
         >
           <div className={classes.headingContainer}>
@@ -126,7 +126,7 @@ const InfoHeader = props => {
               {props.pageType === 'facetResults' && intl.get(`perspectives.${props.resultClass}.label`)}
               {props.pageType === 'instancePage' && intl.get(`perspectives.${props.resultClass}.instancePage.label`)}
             </Typography>
-            <IconButton className={classes.infoIconButton} onClick={handleExpandButtonOnClick}>
+            <IconButton aria-label='open instructions' className={classes.infoIconButton} onClick={handleExpandButtonOnClick}>
               <InfoIcon className={classes.infoIcon} />
             </IconButton>
           </div>

src/client/components/main_layout/PerspectiveTabs.js

@@ -74,7 +74,8 @@ class PerspectiveTabs extends React.Component {
             <Tab
               classes={{
                 root: classes.tabRoot,
-                labelIcon: classes.tabLabelIcon
+                labelIcon: classes.tabLabelIcon,
+                wrapper: classes.tabWrapper
               }}
               key={tab.id}
               icon={tab.icon}