diff --git a/ui_framework/components/accessibility/__snapshots__/screen_reader.test.js.snap b/ui_framework/components/accessibility/__snapshots__/screen_reader.test.js.snap new file mode 100644 index 000000000000..b1f99be5c72b --- /dev/null +++ b/ui_framework/components/accessibility/__snapshots__/screen_reader.test.js.snap @@ -0,0 +1,17 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`KuiScreenReaderOnly adds an accessibility class to a child element and combines other classNames (foo, bar) given as props on the child 1`] = ` +
+`; + +exports[`KuiScreenReaderOnly adds an accessibility class to a child element when used with no props 1`] = ` ++ This paragraph is not visibile to sighted users but will be read by screenreaders. +
+`; diff --git a/ui_framework/components/accessibility/_index.scss b/ui_framework/components/accessibility/_index.scss new file mode 100644 index 000000000000..37ec009af1e9 --- /dev/null +++ b/ui_framework/components/accessibility/_index.scss @@ -0,0 +1 @@ +@import "./_screen_reader"; diff --git a/ui_framework/components/accessibility/_screen_reader.scss b/ui_framework/components/accessibility/_screen_reader.scss new file mode 100644 index 000000000000..1d846635e21b --- /dev/null +++ b/ui_framework/components/accessibility/_screen_reader.scss @@ -0,0 +1,8 @@ +.kuiScreenReaderOnly { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; +} diff --git a/ui_framework/components/accessibility/index.js b/ui_framework/components/accessibility/index.js index 5b0bcc6eab80..d847a370d0d9 100644 --- a/ui_framework/components/accessibility/index.js +++ b/ui_framework/components/accessibility/index.js @@ -1 +1,2 @@ export { KuiKeyboardAccessible } from './keyboard_accessible'; +export { KuiScreenReaderOnly } from './screen_reader'; diff --git a/ui_framework/components/accessibility/screen_reader.js b/ui_framework/components/accessibility/screen_reader.js new file mode 100644 index 000000000000..53f40e28c353 --- /dev/null +++ b/ui_framework/components/accessibility/screen_reader.js @@ -0,0 +1,20 @@ +import { + cloneElement, + PropTypes, +} from 'react'; +import classNames from 'classnames'; + + +export const KuiScreenReaderOnly = ({ children }) => { + const classes = classNames('kuiScreenReaderOnly', children.props.className); + + const props = Object.assign({}, children.props, { + className: classes + }); + + return cloneElement(children, props); +}; + +KuiScreenReaderOnly.propTypes = { + children: PropTypes.node +}; diff --git a/ui_framework/components/accessibility/screen_reader.test.js b/ui_framework/components/accessibility/screen_reader.test.js new file mode 100644 index 000000000000..f22e2f4079e1 --- /dev/null +++ b/ui_framework/components/accessibility/screen_reader.test.js @@ -0,0 +1,35 @@ +import React from 'react'; +import { render } from 'enzyme'; + +import { KuiScreenReaderOnly } from './screen_reader'; + +describe('KuiScreenReaderOnly', () => { + describe('adds an accessibility class to a child element', () => { + test('when used with no props', () => { + const $paragraph = render( ++ This paragraph is not visibile to sighted users but will be read by + screenreaders. +
++ This paragraph is not visibile to sighted users but will be read by + screenreaders. +
++ This is the first paragraph. It is visible to all. +
++ This is the second paragraph. It is hidden for sighted users but visible to screen readers. +
++ This is the third paragraph. It is visible to all. +
+