14364159136

Committed 09 Apr 2025 06:15PM UTC coverage: 75.582% (+0.002%) from 75.58%

Build # 14364159136

Build Type

push

github

Committed by

web-flow

Commit Message

fix(a11y): scroll position jumping for transcribed lines popups (#6791)

A couple of small accessibility fixes for the consensus lines and subtask popups:
- cancel click events that close each popup, so that they don't pass focus to the `ZoomEventLayer` or subject image.
- remember the initial scroll position when the consensus lines popup opens. Scroll back to that position after the popup closes.

Co-authored-by: Mark Bouslog <mcbouslog@gmail.com>

Run Details

11099 of 16948 branches covered (65.49%)

Branch coverage included in aggregate %.

14 of 14 new or added lines in 2 files covered. (100.0%)

1 existing line in 1 file now uncovered.

17273 of 20590 relevant lines covered (83.89%)

386.11 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

89.09

/packages/lib-react-components/src/Media/components/Text/Text.js

import { Box } from 'grommet'
import styled, { css, useTheme } from 'styled-components'

import { propTypes, defaultProps } from '../../helpers/mediaPropTypes'
import { useTextData } from '../../../hooks'

const StyledBox = styled(Box)`
  ${props => props.maxHeight && css`max-height: ${props.maxHeight}px;`}
  ${props => props.maxWidth && css`max-width: ${props.maxWidth}px;`}
`

const StyledPre = styled.pre`
  white-space: pre-wrap;
  color: ${props => props.theme.dark ? 'white' : 'black'};
  font-family: 'Anonymous Pro', monospace;
  font-weight: 400;
  @font-face {
    font-family: 'Anonymous Pro';
    font-style: normal;
    font-weight: 400;
    src:
      local('Anonymous Pro'),
      local('Anonymous Pro-Regular'),
      url(https://fonts.gstatic.com/s/anonymouspro/v21/rP2Bp2a15UIB7Un-bOeISG3pHls29QP-4Ks.woff2) 
      format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  overflow-y: scroll;
`

export default function Text({
  alt = defaultProps.alt,
  controls = defaultProps.controls,
  flex = defaultProps.flex,
  height = '200',
  src = defaultProps.src,
  width = defaultProps.width,
  ...rest
}) {
  const theme = useTheme()
  const { data, error, loading } = useTextData(src)
  let content = null

  if (loading) {
    content = null
  }

  if (error) {
    content = <p>{error.message}</p>
  }

  if (data) {
    content = data
  }

  return (
    <StyledBox
      a11yTitle={alt}
      flex={flex}
      forwardedAs='section'
      height='100%'
      maxWidth={width}
      maxHeight={height}
      pad={{ horizontal: 'xsmall', top: 'xsmall', bottom: 'medium' }}
      width='100%'
      {...rest}
    >
      <StyledPre
        tabIndex='0'
        theme={theme}
      >
        {content}
      </StyledPre>
    </StyledBox>
  )
}

Text.propTypes = {
  ...propTypes
}

1	import { Box } from 'grommet'	1✔
2	import styled, { css, useTheme } from 'styled-components'	1✔
3
4	import { propTypes, defaultProps } from '../../helpers/mediaPropTypes'	1✔
5	import { useTextData } from '../../../hooks'	421✔
6
7	const StyledBox = styled(Box)`	1✔
8	${props => props.maxHeight && css`max-height: ${props.maxHeight}px;`}	7✔
9	${props => props.maxWidth && css`max-width: ${props.maxWidth}px;`}	7✔
10	`
11
12	const StyledPre = styled.pre`	1✔
13	white-space: pre-wrap;
14	color: ${props => props.theme.dark ? 'white' : 'black'};	7!
15	font-family: 'Anonymous Pro', monospace;
16	font-weight: 400;
17	@font-face {
18	font-family: 'Anonymous Pro';
19	font-style: normal;
20	font-weight: 400;
21	src:
22	local('Anonymous Pro'),
23	local('Anonymous Pro-Regular'),
24	url(https://fonts.gstatic.com/s/anonymouspro/v21/rP2Bp2a15UIB7Un-bOeISG3pHls29QP-4Ks.woff2)
25	format('woff2');
26	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
27	}
28	overflow-y: scroll;
29	`
30
31	export default function Text({
32	alt = defaultProps.alt,	7✔
33	controls = defaultProps.controls,	7✔
34	flex = defaultProps.flex,	7✔
35	height = '200',	7✔
36	src = defaultProps.src,	7!
37	width = defaultProps.width,	7✔
38	...rest	7✔
39	}) {	7✔
40	const theme = useTheme()	7✔
41	const { data, error, loading } = useTextData(src)	7✔
42	let content = null	7✔
43
44	if (loading) {	7✔
45	content = null	7✔
46	}
47
48	if (error) {	7!
49	content = <p>{error.message}</p>	×
50	}
51
52	if (data) {	7!
UNCOV 53	content = data	×
54	}
55
56	return (	7✔
57	<StyledBox
58	a11yTitle={alt}
59	flex={flex}
60	forwardedAs='section'
61	height='100%'
62	maxWidth={width}
63	maxHeight={height}
64	pad={{ horizontal: 'xsmall', top: 'xsmall', bottom: 'medium' }}
65	width='100%'
66	{...rest}
67	>
68	<StyledPre
69	tabIndex='0'
70	theme={theme}
71	>
72	{content}
73	</StyledPre>
74	</StyledBox>
75	)
76	}
77
78	Text.propTypes = {	1✔
79	...propTypes
80	}

zooniverse / front-end-monorepo / 14364159136

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous