From dcee01c8bf9de5c3aa4ba71b0bbd60a5e0b194af Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Fri, 20 Sep 2019 17:14:29 +0530 Subject: [PATCH] add a11y docs --- CHANGELOG.md | 2 + src-docs/src/routes.js | 6 + .../form_compressed_example.js | 2 +- .../src/views/guidelines/accessibility.js | 606 ++++++++++++++++++ 4 files changed, 615 insertions(+), 1 deletion(-) create mode 100644 src-docs/src/views/guidelines/accessibility.js diff --git a/CHANGELOG.md b/CHANGELOG.md index a44f76102b5f..330521912669 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,7 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +- Adds guidelines on accessibility ([#2357](https://github.com/elastic/eui/pull/2357)) + **Bug fixes** - Fixed default z-index of `EuiPopover` ([#2341](https://github.com/elastic/eui/pull/2341)) diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index 3b0f5e54e9b9..7aa29efb6b87 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -9,6 +9,8 @@ import { EuiErrorBoundary } from '../../src/components'; // Guidelines +import AccessibilityGuidelines from './views/guidelines/accessibility'; + import ButtonGuidelines from './views/guidelines/button'; import ColorGuidelines from './views/guidelines/colors'; @@ -248,6 +250,10 @@ const navigation = [ { name: 'Guidelines', items: [ + { + name: 'Accessibility', + component: AccessibilityGuidelines, + }, { name: 'Buttons', component: ButtonGuidelines, diff --git a/src-docs/src/views/form_compressed/form_compressed_example.js b/src-docs/src/views/form_compressed/form_compressed_example.js index f01395f123ec..5262f3c28a97 100644 --- a/src-docs/src/views/form_compressed/form_compressed_example.js +++ b/src-docs/src/views/form_compressed/form_compressed_example.js @@ -198,7 +198,7 @@ export const FormCompressedExample = { This is an example of how to combine compressed form controls with from rows, labels, prepend and appends in a column layout.

- +

Pay close attention to the patterns of using{' '} htmlFor and aria-label. For diff --git a/src-docs/src/views/guidelines/accessibility.js b/src-docs/src/views/guidelines/accessibility.js new file mode 100644 index 000000000000..53596bfffa4d --- /dev/null +++ b/src-docs/src/views/guidelines/accessibility.js @@ -0,0 +1,606 @@ +import React from 'react'; + +import { + GuidePage, + // GuideRule, + GuideRuleTitle, + // GuideRuleExample, +} from '../../components'; + +import { + EuiText, + EuiLink, + EuiSpacer, + EuiCode, + EuiCodeBlock, +} from '../../../../src/components'; + +export default () => ( + + +

+ Though EUI strives to provide accessible components for apps to use, + accessibility cannot be created in a vacuum. Building experiences using + EUI components might be a strong start but how we stitch together those + components and the page structure overall plays a large role in the + accessibility of a page. The same way we fret about code quality, visual + design, and performance- accessibility is something that's never + “done” and is easiest to implement for the get-go rather + than retrofitted after the fact. +

+

+ Additionally, not only do we have a responsibility to our users and + customers to not put up barriers from completing their tasks, we also + have legal obligations around the world to uphold. Both, governments + around the world and Elastic, strive to meet the success criteria laid + out by WCAG 2.1. +

+

+ For an intro to accessibility and how to plan for it in your projects, + watch this talk: +

+