Skip to content

Commit

Permalink
refactor: improves expanded code block accessibility
Browse files Browse the repository at this point in the history
  • Loading branch information
@mgadewoll
mgadewoll committed Nov 28, 2024
1 parent efcafc8 commit d1c2c19
Show file tree
Hide file tree
Showing 3 changed files with 177 additions and 22 deletions.
118 changes: 104 additions & 14 deletions packages/eui/src/components/code/__snapshots__/code_block.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,11 @@ exports[`EuiCodeBlock dynamic content updates DOM when input changes 1`] = `
class="euiCodeBlock__pre emotion-euiCodeBlock__pre-preWrap-padding"
tabindex="-1"
>
<div
class="emotion-euiScreenReaderOnly"
>
javascript code block:
</div>
<code
class="euiCodeBlock__code emotion-euiCodeBlock__code"
data-code-language="javascript"
Expand Down Expand Up @@ -49,6 +54,11 @@ exports[`EuiCodeBlock dynamic content updates DOM when input changes 2`] = `
class="euiCodeBlock__pre emotion-euiCodeBlock__pre-preWrap-padding"
tabindex="-1"
>
<div
class="emotion-euiScreenReaderOnly"
>
javascript code block:
</div>
<code
class="euiCodeBlock__code emotion-euiCodeBlock__code"
data-code-language="javascript"
Expand Down Expand Up @@ -82,12 +92,20 @@ exports[`EuiCodeBlock dynamic content updates DOM when input changes 2`] = `

exports[`EuiCodeBlock fullscreen displays content in fullscreen mode 1`] = `
<div
aria-label="Expanded code block"
aria-modal="true"
class="euiCodeBlockFullScreen emotion-euiCodeBlock-l-isFullScreen"
role="dialog"
>
<pre
class="euiCodeBlock__pre emotion-euiCodeBlock__pre-preWrap-padding-controlsOffset"
tabindex="0"
>
<div
class="emotion-euiScreenReaderOnly"
>
javascript code block:
</div>
<code
aria-label="aria-label"
class="euiCodeBlock__code emotion-euiCodeBlock__code"
Expand Down Expand Up @@ -119,20 +137,7 @@ exports[`EuiCodeBlock fullscreen displays content in fullscreen mode 1`] = `
</pre>
<div
class="euiCodeBlock__controls emotion-euiCodeBlock__controls-l"
>
<button
aria-label="Collapse"
class="euiButtonIcon euiCodeBlock__fullScreenButton emotion-euiButtonIcon-xs-empty-text"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="fullScreenExit"
/>
</button>
</div>
/>
</div>
`;

Expand All @@ -144,6 +149,11 @@ exports[`EuiCodeBlock line numbers renders annotated line numbers 1`] = `
class="euiCodeBlock__pre emotion-euiCodeBlock__pre-preWrap-padding"
tabindex="-1"
>
<div
class="emotion-euiScreenReaderOnly"
>
text code block:
</div>
<code
aria-label="aria-label"
class="euiCodeBlock__code emotion-euiCodeBlock__code"
Expand Down Expand Up @@ -216,6 +226,11 @@ exports[`EuiCodeBlock line numbers renders highlighted line numbers 1`] = `
class="euiCodeBlock__pre emotion-euiCodeBlock__pre-preWrap-padding"
tabindex="-1"
>
<div
class="emotion-euiScreenReaderOnly"
>
text code block:
</div>
<code
aria-label="aria-label"
class="euiCodeBlock__code emotion-euiCodeBlock__code"
Expand Down Expand Up @@ -274,6 +289,11 @@ exports[`EuiCodeBlock line numbers renders line numbers 1`] = `
class="euiCodeBlock__pre emotion-euiCodeBlock__pre-preWrap-padding"
tabindex="-1"
>
<div
class="emotion-euiScreenReaderOnly"
>
text code block:
</div>
<code
aria-label="aria-label"
class="euiCodeBlock__code emotion-euiCodeBlock__code"
Expand Down Expand Up @@ -332,6 +352,11 @@ exports[`EuiCodeBlock line numbers renders line numbers with a start value 1`] =
class="euiCodeBlock__pre emotion-euiCodeBlock__pre-preWrap-padding"
tabindex="-1"
>
<div
class="emotion-euiScreenReaderOnly"
>
text code block:
</div>
<code
aria-label="aria-label"
class="euiCodeBlock__code emotion-euiCodeBlock__code"
Expand Down Expand Up @@ -390,6 +415,11 @@ exports[`EuiCodeBlock props fontSize l is rendered 1`] = `
class="euiCodeBlock__pre emotion-euiCodeBlock__pre-preWrap-padding"
tabindex="-1"
>
<div
class="emotion-euiScreenReaderOnly"
>
text code block:
</div>
<code
class="euiCodeBlock__code emotion-euiCodeBlock__code"
data-code-language="text"
Expand Down Expand Up @@ -418,6 +448,11 @@ exports[`EuiCodeBlock props fontSize m is rendered 1`] = `
class="euiCodeBlock__pre emotion-euiCodeBlock__pre-preWrap-padding"
tabindex="-1"
>
<div
class="emotion-euiScreenReaderOnly"
>
text code block:
</div>
<code
class="euiCodeBlock__code emotion-euiCodeBlock__code"
data-code-language="text"
Expand Down Expand Up @@ -446,6 +481,11 @@ exports[`EuiCodeBlock props fontSize s is rendered 1`] = `
class="euiCodeBlock__pre emotion-euiCodeBlock__pre-preWrap-padding"
tabindex="-1"
>
<div
class="emotion-euiScreenReaderOnly"
>
text code block:
</div>
<code
class="euiCodeBlock__code emotion-euiCodeBlock__code"
data-code-language="text"
Expand Down Expand Up @@ -474,6 +514,11 @@ exports[`EuiCodeBlock props isCopyable is rendered 1`] = `
class="euiCodeBlock__pre emotion-euiCodeBlock__pre-preWrap-padding-controlsOffset"
tabindex="-1"
>
<div
class="emotion-euiScreenReaderOnly"
>
text code block:
</div>
<code
class="euiCodeBlock__code emotion-euiCodeBlock__code"
data-code-language="text"
Expand Down Expand Up @@ -527,6 +572,11 @@ exports[`EuiCodeBlock props language is rendered 1`] = `
class="euiCodeBlock__pre emotion-euiCodeBlock__pre-preWrap-padding"
tabindex="-1"
>
<div
class="emotion-euiScreenReaderOnly"
>
html code block:
</div>
<code
class="euiCodeBlock__code emotion-euiCodeBlock__code"
data-code-language="html"
Expand Down Expand Up @@ -557,6 +607,11 @@ exports[`EuiCodeBlock props overflowHeight is rendered 1`] = `
style="max-block-size: 200px;"
tabindex="-1"
>
<div
class="emotion-euiScreenReaderOnly"
>
text code block:
</div>
<code
class="euiCodeBlock__code emotion-euiCodeBlock__code"
data-code-language="text"
Expand Down Expand Up @@ -601,6 +656,11 @@ exports[`EuiCodeBlock props paddingSize l is rendered 1`] = `
class="euiCodeBlock__pre emotion-euiCodeBlock__pre-preWrap-padding"
tabindex="-1"
>
<div
class="emotion-euiScreenReaderOnly"
>
text code block:
</div>
<code
class="euiCodeBlock__code emotion-euiCodeBlock__code"
data-code-language="text"
Expand Down Expand Up @@ -629,6 +689,11 @@ exports[`EuiCodeBlock props paddingSize m is rendered 1`] = `
class="euiCodeBlock__pre emotion-euiCodeBlock__pre-preWrap-padding"
tabindex="-1"
>
<div
class="emotion-euiScreenReaderOnly"
>
text code block:
</div>
<code
class="euiCodeBlock__code emotion-euiCodeBlock__code"
data-code-language="text"
Expand Down Expand Up @@ -657,6 +722,11 @@ exports[`EuiCodeBlock props paddingSize none is rendered 1`] = `
class="euiCodeBlock__pre emotion-euiCodeBlock__pre-preWrap-padding"
tabindex="-1"
>
<div
class="emotion-euiScreenReaderOnly"
>
text code block:
</div>
<code
class="euiCodeBlock__code emotion-euiCodeBlock__code"
data-code-language="text"
Expand Down Expand Up @@ -685,6 +755,11 @@ exports[`EuiCodeBlock props paddingSize s is rendered 1`] = `
class="euiCodeBlock__pre emotion-euiCodeBlock__pre-preWrap-padding"
tabindex="-1"
>
<div
class="emotion-euiScreenReaderOnly"
>
text code block:
</div>
<code
class="euiCodeBlock__code emotion-euiCodeBlock__code"
data-code-language="text"
Expand Down Expand Up @@ -713,6 +788,11 @@ exports[`EuiCodeBlock props transparentBackground is rendered 1`] = `
class="euiCodeBlock__pre emotion-euiCodeBlock__pre-preWrap-padding"
tabindex="-1"
>
<div
class="emotion-euiScreenReaderOnly"
>
text code block:
</div>
<code
class="euiCodeBlock__code emotion-euiCodeBlock__code"
data-code-language="text"
Expand Down Expand Up @@ -741,6 +821,11 @@ exports[`EuiCodeBlock props whiteSpace renders a pre block tag with a css class
class="euiCodeBlock__pre emotion-euiCodeBlock__pre-pre-padding"
tabindex="-1"
>
<div
class="emotion-euiScreenReaderOnly"
>
text code block:
</div>
<code
aria-label="aria-label"
class="euiCodeBlock__code emotion-euiCodeBlock__code"
Expand Down Expand Up @@ -771,6 +856,11 @@ exports[`EuiCodeBlock renders a code block 1`] = `
class="euiCodeBlock__pre emotion-euiCodeBlock__pre-preWrap-padding"
tabindex="-1"
>
<div
class="emotion-euiScreenReaderOnly"
>
text code block:
</div>
<code
aria-label="aria-label"
class="euiCodeBlock__code emotion-euiCodeBlock__code"
Expand Down
23 changes: 20 additions & 3 deletions packages/eui/src/components/code/code_block.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ import {
euiCodeBlockPreStyles,
euiCodeBlockCodeStyles,
} from './code_block.styles';
import { EuiScreenReaderOnly } from '../accessibility';
import { useEuiI18n } from '../i18n';

// Based on observed line height for non-virtualized code blocks
const fontSizeToRowHeightMap = {
Expand Down Expand Up @@ -235,7 +237,6 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
: preStyles.whiteSpace.preWrap.controlsOffset.xl),
],
tabIndex: 0,
onKeyDown,
};

return [preProps, preFullscreenProps];
Expand All @@ -245,7 +246,6 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
isVirtualized,
hasControls,
paddingSize,
onKeyDown,
tabIndex,
]);

Expand All @@ -264,6 +264,21 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
};
}, [codeStyles, language, isVirtualized, rest]);

const codeBlockLabel = useEuiI18n(
'euiCodeBlock.label',
'{language} code block:',
{
language,
}
);
// pre tags don't accept aria-label without an
// appropriate role, we add a SR only text instead
const codeBlockLabelElement = (
<EuiScreenReaderOnly>
<div>{codeBlockLabel}</div>
</EuiScreenReaderOnly>
);

return (
<div
css={cssStyles}
Expand All @@ -280,6 +295,7 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
/>
) : (
<pre {...preProps} ref={combinedRef} style={overflowHeightStyles}>
{codeBlockLabelElement}
<code {...codeProps}>{content}</code>
</pre>
)}
Expand All @@ -289,7 +305,7 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
/>

{isFullScreen && (
<EuiCodeBlockFullScreenWrapper>
<EuiCodeBlockFullScreenWrapper onClose={onKeyDown}>
{isVirtualized ? (
<EuiCodeBlockVirtualized
data={data}
Expand All @@ -299,6 +315,7 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
/>
) : (
<pre {...preFullscreenProps}>
{codeBlockLabelElement}
<code {...codeProps}>{content}</code>
</pre>
)}
Expand Down
Loading

0 comments on commit d1c2c19

Please sign in to comment.