diff --git a/src/components/SearchHit.js b/src/components/SearchHit.js index 9258e3480325ee2cba4fba9c516530c74f4a6ae6..59d21c9faf5d7ef7c3f51d7252a3973a5751cb7c 100644 --- a/src/components/SearchHit.js +++ b/src/components/SearchHit.js @@ -36,6 +36,7 @@ export class SearchHit extends Component { annotationLabel, canvasLabel, classes, + companionWindowId, containerRef, hit, focused, @@ -49,6 +50,7 @@ export class SearchHit extends Component { const truncatedHit = focused ? hit : hit && new TruncatedHit(hit); const truncated = hit && truncatedHit.before !== hit.before && truncatedHit.after !== hit.after; + const canvasLabelHtmlId = `${companionWindowId}-${index}`; return ( <ScrollTo @@ -73,7 +75,9 @@ export class SearchHit extends Component { <ListItemText primaryTypographyProps={{ variant: 'body1' }}> <Typography variant="subtitle2" className={classes.subtitle}> <Chip component="span" label={index + 1} className={classes.hitCounter} /> - {canvasLabel} + <span id={canvasLabelHtmlId}> + {canvasLabel} + </span> </Typography> {annotationLabel && ( <Typography variant="subtitle2">{annotationLabel}</Typography> @@ -89,7 +93,7 @@ export class SearchHit extends Component { <SanitizedHtml ruleSet="iiif" htmlString={truncatedHit.after} /> {' '} { truncated && !focused && ( - <Button className={classes.inlineButton} onClick={showDetails} color="secondary" size="small"> + <Button className={classes.inlineButton} onClick={showDetails} color="secondary" size="small" aria-describedby={canvasLabelHtmlId}> {t('more')} </Button> )} @@ -112,6 +116,7 @@ SearchHit.propTypes = { annotationLabel: PropTypes.string, canvasLabel: PropTypes.string, classes: PropTypes.objectOf(PropTypes.string), + companionWindowId: PropTypes.string, containerRef: PropTypes.oneOfType([ PropTypes.func, PropTypes.shape({ current: PropTypes.instanceOf(Element) }), @@ -137,6 +142,7 @@ SearchHit.defaultProps = { annotationLabel: undefined, canvasLabel: undefined, classes: {}, + companionWindowId: undefined, containerRef: undefined, focused: false, hit: undefined, diff --git a/src/containers/SearchHit.js b/src/containers/SearchHit.js index 397d8a395b3b44b0ef34ed4cd748e4684f5253d1..0acc6e019e62dc73a3092aaf03e515aae83eb8e7 100644 --- a/src/containers/SearchHit.js +++ b/src/containers/SearchHit.js @@ -59,9 +59,11 @@ const styles = theme => ({ verticalAlign: 'inherit', }, inlineButton: { + '& span': { + lineHeight: '1.5em', + }, margin: 0, padding: 0, - textDecoration: 'underline', textTransform: 'none', }, listItem: { diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 99345d681b8bf049c1372cc59a1cedfe769d325b..47596f6107b2f7d7baae7c2c0289d7b1e62643eb 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -70,7 +70,7 @@ "mirador": "Mirador", "miradorResources": "Mirador resources", "miradorViewer": "Mirador viewer", - "more": "More...", + "more": "more...", "moreResults": "More results", "mosaic": "Mosaic", "mosaicDescription": "Move and size windows in relation to each other, within the visible frame.",