Skip to content

[CSS-in-JS] Convert EuiScreenReaderOnly #5846

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 20 commits into from
Jun 23, 2022
Merged

[CSS-in-JS] Convert EuiScreenReaderOnly #5846

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
e81606f
convert euiscreenreaderonly to css-in-js styling
thompsongl Apr 26, 2022
2ce9c13
update snapshots
thompsongl Apr 26, 2022
e838173
CL
thompsongl Apr 26, 2022
f9bda5c
Merge branch 'main' into css-in-js/a11y
thompsongl Apr 28, 2022
814e84f
Merge branch 'main' into css-in-js/a11y
thompsongl May 2, 2022
e541132
Merge branch 'main' into css-in-js/a11y
thompsongl May 4, 2022
116cf65
mixin; exports
thompsongl May 4, 2022
ade5676
use the mixin
thompsongl May 4, 2022
002122c
Merge branch 'main' into css-in-js/a11y
thompsongl Jun 22, 2022
ed83a38
utility class
thompsongl Jun 22, 2022
c838bf1
remove unused classname
thompsongl Jun 22, 2022
6e56d76
Merge branch 'main' into css-in-js/a11y
thompsongl Jun 23, 2022
2416e3a
refactor utility classes
thompsongl Jun 23, 2022
b042bee
update generated className and snapshots
thompsongl Jun 23, 2022
51c3edc
remove styles export
thompsongl Jun 23, 2022
a79a6d8
Merge branch 'main' into css-in-js/a11y
thompsongl Jun 23, 2022
64ac8f3
snapshots
thompsongl Jun 23, 2022
c9d0db7
remove base className; snapshots
thompsongl Jun 23, 2022
f5c8235
update cypress selector
thompsongl Jun 23, 2022
16c70c7
prevent empty string className
thompsongl Jun 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src-docs/src/views/accessibility/styles_helpers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React from 'react';

import {
EuiCode,
euiScreenReaderOnlyStyles,
euiScreenReaderOnly,
EuiText,
useEuiFocusRing,
} from '../../../../src';
Expand Down Expand Up @@ -34,7 +34,7 @@ export default () => {
snippet={'<p className="euiScreenReaderOnly" />'}
/>
<ThemeExample
title={<code>euiScreenReaderOnlyStyles()</code>}
title={<code>euiScreenReaderOnly()</code>}
description={
<p>
This function allows you to apply the screen reader only CSS styles
Expand All @@ -44,12 +44,12 @@ export default () => {
example={
<EuiText size="s">
<p>The next paragraph is hidden except for screen readers.</p>
<p css={css(euiScreenReaderOnlyStyles())}>
<p css={css(euiScreenReaderOnly())}>
I am hidden except for screen readers
</p>
</EuiText>
}
snippet={'<p css={css(euiScreenReaderOnlyStyles())} />'}
snippet={'<p css={css(euiScreenReaderOnly())} />'}
/>
<ThemeExample
title={<code>useEuiFocusRing(offset?, color?)</code>}
Expand Down
1 change: 0 additions & 1 deletion src/components/accessibility/_index.scss
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions src/components/accessibility/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export { EuiScreenReaderLive } from './screen_reader_live';
export type { EuiScreenReaderLiveProps } from './screen_reader_live';
export {
EuiScreenReaderOnly,
euiScreenReaderOnly,
euiScreenReaderOnlyStyles,
} from './screen_reader_only';
export type { EuiScreenReaderOnlyProps } from './screen_reader_only';
Expand Down
116 changes: 50 additions & 66 deletions ...omponents/accessibility/screen_reader_live/__snapshots__/screen_reader_live.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`EuiScreenReaderLive with a static configuration accepts \`aria-live\` 1`] = `
<div
class="euiScreenReaderOnly"
class="euiScreenReaderOnly css-4l8ha9-euiScreenReaderOnlyStyles"
>
<div
aria-atomic="true"
Expand All @@ -23,7 +23,7 @@ exports[`EuiScreenReaderLive with a static configuration accepts \`aria-live\` 1

exports[`EuiScreenReaderLive with a static configuration accepts \`role\` 1`] = `
<div
class="euiScreenReaderOnly"
class="euiScreenReaderOnly css-4l8ha9-euiScreenReaderOnlyStyles"
>
<div
aria-atomic="true"
Expand All @@ -44,7 +44,7 @@ exports[`EuiScreenReaderLive with a static configuration accepts \`role\` 1`] =

exports[`EuiScreenReaderLive with a static configuration does not render screen reader content when inactive 1`] = `
<div
class="euiScreenReaderOnly"
class="euiScreenReaderOnly css-4l8ha9-euiScreenReaderOnlyStyles"
>
<div
aria-atomic="true"
Expand All @@ -61,7 +61,7 @@ exports[`EuiScreenReaderLive with a static configuration does not render screen

exports[`EuiScreenReaderLive with a static configuration renders screen reader content when active 1`] = `
<div
class="euiScreenReaderOnly"
class="euiScreenReaderOnly css-4l8ha9-euiScreenReaderOnlyStyles"
>
<div
aria-atomic="true"
Expand All @@ -81,73 +81,57 @@ exports[`EuiScreenReaderLive with a static configuration renders screen reader c
`;

exports[`EuiScreenReaderLive with dynamic properties alternates rendering screen reader content into the second live region when changed/toggled 1`] = `
<Component>
<div>
<button
data-test-subj="increment"
onClick={[Function]}
<div>
<button
data-test-subj="increment"
>
Increment
</button>
<div
class="euiScreenReaderOnly css-4l8ha9-euiScreenReaderOnlyStyles"
>
<div
aria-atomic="true"
aria-live="polite"
role="status"
/>
<div
aria-atomic="true"
aria-live="polite"
role="status"
>
Increment
</button>
<EuiScreenReaderLive>
<EuiScreenReaderOnly>
<div
className="euiScreenReaderOnly"
>
<div
aria-atomic="true"
aria-live="polite"
role="status"
/>
<div
aria-atomic="true"
aria-live="polite"
role="status"
>
<p>
Number of active options:
1
</p>
</div>
</div>
</EuiScreenReaderOnly>
</EuiScreenReaderLive>
<p>
Number of active options: 1
</p>
</div>
</div>
</Component>
</div>
`;

exports[`EuiScreenReaderLive with dynamic properties initially renders screen reader content in the first live region 1`] = `
<Component>
<div>
<button
data-test-subj="increment"
onClick={[Function]}
<div>
<button
data-test-subj="increment"
>
Increment
</button>
<div
class="euiScreenReaderOnly css-4l8ha9-euiScreenReaderOnlyStyles"
>
<div
aria-atomic="true"
aria-live="polite"
role="status"
/>
<div
aria-atomic="true"
aria-live="polite"
role="status"
>
Increment
</button>
<EuiScreenReaderLive>
<EuiScreenReaderOnly>
<div
className="euiScreenReaderOnly"
>
<div
aria-atomic="true"
aria-live="polite"
role="status"
>
<p>
Number of active options:
0
</p>
</div>
<div
aria-atomic="true"
aria-live="polite"
role="status"
/>
</div>
</EuiScreenReaderOnly>
</EuiScreenReaderLive>
<p>
Number of active options: 0
</p>
</div>
</div>
</Component>
</div>
`;
4 changes: 2 additions & 2 deletions src/components/accessibility/screen_reader_live/screen_reader_live.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ describe('EuiScreenReaderLive', () => {
};

it('initially renders screen reader content in the first live region', () => {
const component = mount(<Component />);
const component = render(<Component />);

expect(component).toMatchSnapshot();
});
Expand All @@ -87,7 +87,7 @@ describe('EuiScreenReaderLive', () => {

findTestSubject(component, 'increment').simulate('click');

expect(component).toMatchSnapshot();
expect(component.render()).toMatchSnapshot();
});
});
});
6 changes: 3 additions & 3 deletions ...omponents/accessibility/screen_reader_only/__snapshots__/screen_reader_only.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,23 @@

exports[`EuiScreenReaderOnly adds an accessibility class to a child element and combines other classNames (foo, bar) given as props on the child 1`] = `
<p
class="euiScreenReaderOnly foo bar"
class="euiScreenReaderOnly foo bar css-4l8ha9-euiScreenReaderOnlyStyles"
>
This paragraph is not visibile to sighted users but will be read by screenreaders.
</p>
`;

exports[`EuiScreenReaderOnly adds an accessibility class to a child element when used with no props 1`] = `
<p
class="euiScreenReaderOnly"
class="euiScreenReaderOnly css-4l8ha9-euiScreenReaderOnlyStyles"
>
This paragraph is not visibile to sighted users but will be read by screenreaders.
</p>
`;

exports[`EuiScreenReaderOnly will show on focus 1`] = `
<a
class="euiScreenReaderOnly--showOnFocus"
class="euiScreenReaderOnly--showOnFocus css-1tcxaj-euiScreenReaderOnlyStyles"
href="#"
>
Link
Expand Down
5 changes: 0 additions & 5 deletions src/components/accessibility/screen_reader_only/_screen_reader_only.scss
View file
Open in desktop

This file was deleted.

5 changes: 4 additions & 1 deletion src/components/accessibility/screen_reader_only/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,7 @@

export type { EuiScreenReaderOnlyProps } from './screen_reader_only';
export { EuiScreenReaderOnly } from './screen_reader_only';
export { euiScreenReaderOnlyStyles } from './screen_reader_only.styles';
export {
euiScreenReaderOnly,
euiScreenReaderOnlyStyles,
} from './screen_reader_only.styles';
20 changes: 18 additions & 2 deletions src/components/accessibility/screen_reader_only/screen_reader_only.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,29 @@

import { css } from '@emotion/react';

export const euiScreenReaderOnlyStyles = () => {
return css`
/*
* Mixin
*/
export const euiScreenReaderOnly = () => `
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
`;

/*
* Styles
*/
export const euiScreenReaderOnlyStyles = (showOnFocus?: boolean) => {
if (showOnFocus) {
return css`
// The :active selector is necessary for Safari which removes :focus when a button is pressed
&:not(:focus):not(:active) {
${euiScreenReaderOnly()}
}
`;
}
return css(euiScreenReaderOnly());
};
18 changes: 14 additions & 4 deletions src/components/accessibility/screen_reader_only/screen_reader_only.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,37 +6,47 @@
* Side Public License, v 1.
*/

import { cloneElement, ReactElement, FunctionComponent } from 'react';
import { ReactElement, FunctionComponent } from 'react';
import classNames from 'classnames';

import { cloneElementWithCss } from '../../../services/theme/clone_element';
import { euiScreenReaderOnlyStyles } from './screen_reader_only.styles';

export interface EuiScreenReaderOnlyProps {
/**
* ReactElement to render as this component's content
*/
children: ReactElement<any>;
children: ReactElement;

/**
* For keyboard navigation, force content to display visually upon focus.
*/
showOnFocus?: boolean;
className?: string;
}

export const EuiScreenReaderOnly: FunctionComponent<EuiScreenReaderOnlyProps> = ({
children,
className,
showOnFocus,
...rest
}) => {
const classes = classNames(
{
euiScreenReaderOnly: !showOnFocus,
'euiScreenReaderOnly--showOnFocus': showOnFocus,
},
className,
children.props.className
);

const cssStyles = [euiScreenReaderOnlyStyles(showOnFocus)];

const props = {
...children.props,
...rest,
className: classes,
css: cssStyles,
};

return cloneElement(children, props);
return cloneElementWithCss(children, props);
};
12 changes: 6 additions & 6 deletions src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`EuiSkipLink is rendered 1`] = `
<a
aria-label="aria-label"
class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink testClass1 testClass2 css-1methg-euiSkipLink"
class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink testClass1 testClass2 css-dj5nzp-euiSkipLink-euiScreenReaderOnlyStyles"
data-test-subj="test subject string"
href="#somewhere"
rel="noreferrer"
Expand All @@ -22,7 +22,7 @@ exports[`EuiSkipLink is rendered 1`] = `

exports[`EuiSkipLink props onClick is rendered 1`] = `
<a
class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink css-1methg-euiSkipLink"
class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink css-dj5nzp-euiSkipLink-euiScreenReaderOnlyStyles"
href="#somewhere"
rel="noreferrer"
>
Expand All @@ -38,7 +38,7 @@ exports[`EuiSkipLink props onClick is rendered 1`] = `

exports[`EuiSkipLink props position absolute is rendered 1`] = `
<a
class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink css-1gkoqp9-euiSkipLink-absolute"
class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink css-15xg1aq-euiSkipLink-absolute-euiScreenReaderOnlyStyles"
href="#somewhere"
rel="noreferrer"
>
Expand All @@ -54,7 +54,7 @@ exports[`EuiSkipLink props position absolute is rendered 1`] = `

exports[`EuiSkipLink props position fixed is rendered 1`] = `
<a
class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink css-o3tocm-euiSkipLink-fixed"
class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink css-zbnfad-euiSkipLink-fixed-euiScreenReaderOnlyStyles"
href="#somewhere"
rel="noreferrer"
tabindex="0"
Expand All @@ -71,7 +71,7 @@ exports[`EuiSkipLink props position fixed is rendered 1`] = `

exports[`EuiSkipLink props position static is rendered 1`] = `
<a
class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink css-1methg-euiSkipLink"
class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink css-dj5nzp-euiSkipLink-euiScreenReaderOnlyStyles"
href="#somewhere"
rel="noreferrer"
>
Expand All @@ -87,7 +87,7 @@ exports[`EuiSkipLink props position static is rendered 1`] = `

exports[`EuiSkipLink props tabIndex is rendered 1`] = `
<a
class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink css-1methg-euiSkipLink"
class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink css-dj5nzp-euiSkipLink-euiScreenReaderOnlyStyles"
href="#somewhere"
rel="noreferrer"
tabindex="-1"
Expand Down
Loading