diff --git a/src/client/components/facet_bar/FacetBar.js b/src/client/components/facet_bar/FacetBar.js index 9415c70a8086f0a399f29d90c529172ccffdf51a..897a1a071d9076ab23abb3ae5f2bbc18b17a8536 100644 --- a/src/client/components/facet_bar/FacetBar.js +++ b/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} diff --git a/src/client/components/facet_bar/FacetHeader.js b/src/client/components/facet_bar/FacetHeader.js index 65a561791ad32a1d9d07b83e60d7c0bd3312fbc2..cd2516cd519e58c43acc2d20478b4a5e542c4c3f 100644 --- a/src/client/components/facet_bar/FacetHeader.js +++ b/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> diff --git a/src/client/components/facet_bar/FacetInfo.js b/src/client/components/facet_bar/FacetInfo.js index 711b20339cfb483705ed776e333f7703e946d53a..0a92d224e727903005dbe1d2d2081fed5763be0e 100644 --- a/src/client/components/facet_bar/FacetInfo.js +++ b/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> ) } diff --git a/src/client/components/facet_results/LeafletMap.js b/src/client/components/facet_results/LeafletMap.js index 1cd2d21223d4a5eea228c12f77e905a760038ae0..9c0bda4bb9c45c1491ee510b1b8b9949d8481c2e 100644 --- a/src/client/components/facet_results/LeafletMap.js +++ b/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: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> © <a href="http://osm.org/copyright">OpenStreetMap</a> contributors', + attribution: '© <a href="https://www.mapbox.com/map-feedback/" target="_blank" rel="noopener">Mapbox</a> © <a href="http://osm.org/copyright" target="_blank" rel="noopener">OpenStreetMap</a> contributors', tileSize: 512, zoomOffset: -1 }) diff --git a/src/client/components/main_layout/InfoHeader.js b/src/client/components/main_layout/InfoHeader.js index 22828722398995f889475a9e21ea487345529770..331bf6dc503b7302f78ea98f45b6391f546cd016 100644 --- a/src/client/components/main_layout/InfoHeader.js +++ b/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> diff --git a/src/client/components/main_layout/PerspectiveTabs.js b/src/client/components/main_layout/PerspectiveTabs.js index ab0327cc76b448c83143e855e9b2c7bb0ed8a809..87b214df6bd6f8cd1f3fadd95bb1adbcca7aceea 100644 --- a/src/client/components/main_layout/PerspectiveTabs.js +++ b/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}