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 all 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
1 change: 0 additions & 1 deletion src/components/accessibility/_index.scss
View file
Open in desktop

This file was deleted.

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="emotion-euiScreenReaderOnly"
>
<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="emotion-euiScreenReaderOnly"
>
<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="emotion-euiScreenReaderOnly"
>
<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="emotion-euiScreenReaderOnly"
>
<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="emotion-euiScreenReaderOnly"
>
<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="emotion-euiScreenReaderOnly"
>
<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="foo bar emotion-euiScreenReaderOnly"
>
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="emotion-euiScreenReaderOnly"
>
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="emotion-euiScreenReaderOnly"
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.

16 changes: 16 additions & 0 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 @@ -6,6 +6,8 @@
* Side Public License, v 1.
*/

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

/*
* Mixin that hides elements offscreen to only be read by screen reader
* See https://github.com/elastic/eui/pull/5130 and https://github.com/elastic/eui/pull/5152 for more info
Expand All @@ -28,3 +30,17 @@ export const euiScreenReaderOnly = () => `
// Chrome requires the negative margin to not cause overflows of parent containers
margin: -1px;
`;

/*
* Styles
*/
export const euiScreenReaderOnlyStyles = (showOnFocus?: boolean) => ({
euiScreenReaderOnly: showOnFocus
? css`
// The :active selector is necessary for Safari which removes :focus when a button is pressed
&:not(:focus):not(:active) {
${euiScreenReaderOnly()}
}
`
: css(euiScreenReaderOnly()),
});
26 changes: 14 additions & 12 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,39 @@
* 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,
}) => {
const classes = classNames(
{
euiScreenReaderOnly: !showOnFocus,
'euiScreenReaderOnly--showOnFocus': showOnFocus,
},
children.props.className
);
const classes = classNames(className, children.props.className);

const styles = euiScreenReaderOnlyStyles(showOnFocus);
const cssStyles = [styles.euiScreenReaderOnly];

const props = {
...children.props,
className: classes,
className: classes.length ? classes : undefined,
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 emotion-euiSkipLink"
class="euiButton euiButton--primary euiButton--small euiButton--fill euiSkipLink testClass1 testClass2 emotion-euiSkipLink-euiScreenReaderOnly"
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 emotion-euiSkipLink"
class="euiButton euiButton--primary euiButton--small euiButton--fill euiSkipLink emotion-euiSkipLink-euiScreenReaderOnly"
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 emotion-euiSkipLink-absolute"
class="euiButton euiButton--primary euiButton--small euiButton--fill euiSkipLink emotion-euiSkipLink-absolute-euiScreenReaderOnly"
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 emotion-euiSkipLink-fixed"
class="euiButton euiButton--primary euiButton--small euiButton--fill euiSkipLink emotion-euiSkipLink-fixed-euiScreenReaderOnly"
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 emotion-euiSkipLink"
class="euiButton euiButton--primary euiButton--small euiButton--fill euiSkipLink emotion-euiSkipLink-euiScreenReaderOnly"
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 emotion-euiSkipLink"
class="euiButton euiButton--primary euiButton--small euiButton--fill euiSkipLink emotion-euiSkipLink-euiScreenReaderOnly"
href="#somewhere"
rel="noreferrer"
tabindex="-1"
Expand Down
Loading