From 06fe0237110ff28a4d23aa729be012b1714823a6 Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Mon, 2 Mar 2020 18:12:15 -0600 Subject: [PATCH] adds showOnFocus prop --- .../accessibility/accessibility_example.js | 9 +-- .../accessibility/keyboard_accessible.js | 60 +++++++++++-------- src-docs/src/views/accessibility/props.tsx | 6 ++ .../src/views/accessibility/screen_reader.tsx | 40 +++++++++++-- .../accessibility/_screen_reader.scss | 8 +++ .../accessibility/screen_reader.tsx | 11 +++- 6 files changed, 95 insertions(+), 39 deletions(-) create mode 100644 src-docs/src/views/accessibility/props.tsx diff --git a/src-docs/src/views/accessibility/accessibility_example.js b/src-docs/src/views/accessibility/accessibility_example.js index 140c87e7237b..642a2c2f7391 100644 --- a/src-docs/src/views/accessibility/accessibility_example.js +++ b/src-docs/src/views/accessibility/accessibility_example.js @@ -8,7 +8,6 @@ import { EuiCode, EuiLink, EuiKeyboardAccessible, - EuiScreenReaderOnly, } from '../../../../src/components'; import KeyboardAccessible from './keyboard_accessible'; @@ -20,6 +19,8 @@ const keyboardAccessibleHtml = renderToHtml(KeyboardAccessible); const screenReaderOnlyHtml = renderToHtml(ScreenReaderOnly); const screenReaderOnlySource = require('!!raw-loader!./screen_reader'); +import { ScreenReaderOnlyDocsComponent } from './props'; + export const AccessibilityExample = { title: 'Accessibility', sections: [ @@ -71,13 +72,9 @@ export const AccessibilityExample = { }{' '} for more information.

-

- Use a screenreader to verify that there is a second paragraph in - this example: -

), - props: { EuiScreenReaderOnly }, + props: { EuiScreenReaderOnly: ScreenReaderOnlyDocsComponent }, demo: , }, ], diff --git a/src-docs/src/views/accessibility/keyboard_accessible.js b/src-docs/src/views/accessibility/keyboard_accessible.js index 3f68055265e5..3d08c0ac5984 100644 --- a/src-docs/src/views/accessibility/keyboard_accessible.js +++ b/src-docs/src/views/accessibility/keyboard_accessible.js @@ -1,6 +1,7 @@ import React from 'react'; import { EuiKeyboardAccessible } from '../../../../src/components'; +import { EuiText } from '../../../../src/components/text'; // For custom components, we just need to make sure they delegate props to their rendered root // element, e.g. onClick, tabIndex, and role. @@ -10,33 +11,42 @@ const CustomComponent = ({ children, ...rest }) => ( export default () => (
- -
window.alert('Div clicked')}>Click this div
- + + +
window.alert('Div clicked')}>Click this div
+ - - window.alert('Anchor tag clicked')}> - Click this anchor tag - - + + window.alert('Anchor tag clicked')}> + Click this anchor tag + + - - window.alert('Custom component clicked')}> - Click this custom component - - + + window.alert('Custom component clicked')}> + Click this custom component + + - -
window.alert('Outer EuiKeyboardAccessible clicked')}> - This EuiKeyboardAccessible contains another EuiKeyboardAccessible  - - window.alert('Inner EuiKeyboardAccessible clicked')}> - Clicking this inner one should call both onClick handlers - - -
- + +
window.alert('Outer EuiKeyboardAccessible clicked')}> + This EuiKeyboardAccessible contains another + EuiKeyboardAccessible  + + + window.alert('Inner EuiKeyboardAccessible clicked') + }> + Clicking this inner one should call both onClick handlers + + +
+ +
); diff --git a/src-docs/src/views/accessibility/props.tsx b/src-docs/src/views/accessibility/props.tsx new file mode 100644 index 000000000000..29e44b11cc84 --- /dev/null +++ b/src-docs/src/views/accessibility/props.tsx @@ -0,0 +1,6 @@ +import React, { FunctionComponent } from 'react'; +import { EuiScreenReaderOnlyProps } from '../../../../src/components/accessibility/screen_reader'; + +export const ScreenReaderOnlyDocsComponent: FunctionComponent< + EuiScreenReaderOnlyProps +> = () =>
; diff --git a/src-docs/src/views/accessibility/screen_reader.tsx b/src-docs/src/views/accessibility/screen_reader.tsx index c5d74bc5b316..e8ce8dc3281b 100644 --- a/src-docs/src/views/accessibility/screen_reader.tsx +++ b/src-docs/src/views/accessibility/screen_reader.tsx @@ -1,16 +1,44 @@ import React from 'react'; import { EuiScreenReaderOnly } from '../../../../src/components/accessibility/screen_reader'; +import { EuiCode } from '../../../../src/components/code'; +import { EuiText } from '../../../../src/components/text'; +import { EuiTitle } from '../../../../src/components/title'; export default () => (
-

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. + + Use a screenreader to verify that there is a second paragraph in this + example: +

- -

This is the third paragraph. It is visible to all.

+

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.

+ +

Show on focus

+ +

+ + In certain cases, such as a Skip to content link, you + can use the showOnFocus prop to display + screenreader content upon focus. For example, tabbing to this section + with your keyboard will display a link. + +

+

+ This link is visible to all on focus:{' '} + + Skip content + +

+
); diff --git a/src/components/accessibility/_screen_reader.scss b/src/components/accessibility/_screen_reader.scss index 398beafda858..7bf97c3678a5 100644 --- a/src/components/accessibility/_screen_reader.scss +++ b/src/components/accessibility/_screen_reader.scss @@ -1,3 +1,11 @@ .euiScreenReaderOnly { @include euiScreenReaderOnly; } + +.euiScreenReaderOnly--showOnFocus:focus { + position: static; + left: auto; + width: auto; + height: auto; + overflow: visible; +} diff --git a/src/components/accessibility/screen_reader.tsx b/src/components/accessibility/screen_reader.tsx index 437d8d5a5a0e..48f55cd5ba86 100644 --- a/src/components/accessibility/screen_reader.tsx +++ b/src/components/accessibility/screen_reader.tsx @@ -3,12 +3,19 @@ import classNames from 'classnames'; export interface EuiScreenReaderOnlyProps { children: ReactElement; + + /** + * For keyboard navigaiton, force content to display visually upon focus. + */ + showOnFocus?: boolean; } export const EuiScreenReaderOnly: FunctionComponent< EuiScreenReaderOnlyProps -> = ({ children }) => { - const classes = classNames('euiScreenReaderOnly', children.props.className); +> = ({ children, showOnFocus }) => { + const classes = classNames('euiScreenReaderOnly', children.props.className, { + 'euiScreenReaderOnly--showOnFocus': showOnFocus, + }); const props = { ...children.props,