Skip to content

Commit

Permalink
Merge branch 'master' into default
Browse files Browse the repository at this point in the history
  • Loading branch information
anishagg17 authored Mar 6, 2020
2 parents 5fb9e9a + 7bf3a99 commit ce6368d
Show file tree
Hide file tree
Showing 143 changed files with 3,780 additions and 1,594 deletions.
13 changes: 13 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,23 @@
## [`master`](https://github.com/elastic/eui/tree/master)

- Added `EuiDataGrid`'s default sort order property ([#2987](https://github.com/elastic/eui/pull/2987))
- Added `showOnFocus` prop to `EuiScreenReaderOnly` to force display on keyboard focus ([#2976](https://github.com/elastic/eui/pull/2976))
- Added `EuiSkipLink` component ([#2976](https://github.com/elastic/eui/pull/2976))
- Created `EuiBadgeGroup` component ([#2921](https://github.com/elastic/eui/pull/2921))
- Added `sections` and `position` props to `EuiHeader` ([#2928](https://github.com/elastic/eui/pull/2928))
- Added `gutterSize` prop to `EuiListGroup` ([#2980](https://github.com/elastic/eui/pull/2980))
- Added `color` prop to `EuiListGroupItem` and updated size style ([#2980](https://github.com/elastic/eui/pull/2980))

**Bug Fixes**

- Fixed `EuiDataGrid`'s sort popover to behave properly on mobile screens ([#2979](https://github.com/elastic/eui/pull/2979))
- Fixed `EuiButton` and other textual components' disabled contrast ([#2874](https://github.com/elastic/eui/pull/2874))
- Fixed z-index conflict with cell popovers in `EuiDataGrid` while in full screen mode ([#2959](https://github.com/elastic/eui/pull/2959))
- Adjusted the header on `EuiDataGrid` to fix to the top within constrained containers and full screen mode ([#2959](https://github.com/elastic/eui/pull/2959))

**Breaking changes**

- Updated `@types/react` and `@types/react-dom` to utilize React.RefCallback type instead of custom implementation ([#2929](https://github.com/elastic/eui/pull/2929))

**Theme: Amsterdam**

Expand All @@ -26,6 +38,7 @@
- Added `notification` and `notificationColor` props to `EuiHeaderSectionItemButton` ([#2914](https://github.com/elastic/eui/pull/2914))
- Added `folderCheck`, `folderExclamation`, `push`, `quote`, `reporter` and `users` icons ([#2935](https://github.com/elastic/eui/pull/2935))
- Updated `folderClosed` and `folderOpen` to match new additions and sit better on the pixel grid ([#2935](https://github.com/elastic/eui/pull/2935))
- Converted `EuiSearchBar` to Typescript ([#2909](https://github.com/elastic/eui/pull/2909))

**Bug fixes**

Expand Down
19 changes: 12 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"sideEffects": false,
"scripts": {
"start": "cross-env BABEL_MODULES=false webpack-dev-server --port 8030 --inline --hot --config=src-docs/webpack.config.js",
"test-docker": "docker pull $npm_package_docker_image && docker run --rm -i -e GIT_COMMITTER_NAME=test -e GIT_COMMITTER_EMAIL=test --user=$(id -u):$(id -g) -e HOME=/tmp -v $(pwd):/app -w /app $npm_package_docker_image bash -c 'npm config set spin false && /opt/yarn*/bin/yarn && npm run test && npm run build'",
"test-docker": "node ./scripts/test-docker.js",
"sync-docs": "node ./scripts/docs-sync.js",
"build-docs": "cross-env BABEL_MODULES=false cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 webpack --config=src-docs/webpack.config.js",
"build": "yarn extract-i18n-strings && node ./scripts/compile-clean.js && node ./scripts/compile-eui.js && node ./scripts/compile-scss.js $npm_package_name",
Expand All @@ -24,13 +24,15 @@
"lint-sass-fix": "sass-lint-auto-fix -c ./.sass-lint-fix.yml",
"test": "yarn lint && yarn test-unit",
"test-unit": "cross-env NODE_ENV=test jest --config ./scripts/jest/config.json",
"test-a11y": "node ./scripts/a11y-testing",
"test-staged": "yarn lint && node scripts/test-staged.js",
"start-test-server": "webpack-dev-server --config src-docs/webpack.config.js --port 9999",
"start-test-server": "BABEL_MODULES=false NODE_ENV=puppeteer webpack-dev-server --config src-docs/webpack.config.js --port 9999",
"test-visual": "wdio test/wdio.conf.js",
"yo-component": "yo ./generator-eui/app/component.js",
"test-visual-tests": "node ./scripts/run-visual-tests.js",
"update-token-changelog": "node ./scripts/update-token-changelog.js",
"start-test-server-and-visual-test": "start-server-and-test start-test-server http-get://localhost:9999 test-visual",
"start-test-server-and-a11y-test": "start-server-and-test start-test-server http-get://localhost:9999 test-a11y",
"yo-doc": "yo ./generator-eui/app/documentation.js",
"release": "node ./scripts/release.js",
"postinstall": "node ./scripts/postinstall.js",
Expand Down Expand Up @@ -88,15 +90,17 @@
"@types/classnames": "^2.2.6",
"@types/highlight.js": "^9.12.3",
"@types/jest": "^24.0.6",
"@types/react": "^16.9.11",
"@types/react-dom": "^16.9.4",
"@types/react": "^16.9.23",
"@types/react-dom": "^16.9.5",
"@types/react-is": "^16.7.1",
"@types/resize-observer-browser": "^0.1.1",
"@types/tabbable": "^3.1.0",
"@types/uuid": "^3.4.4",
"@typescript-eslint/eslint-plugin": "^1.13.0",
"@typescript-eslint/parser": "^1.13.0",
"autoprefixer": "^7.1.5",
"axe-core": "^3.3.2",
"axe-puppeteer": "^1.0.0",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.1.0",
Expand All @@ -112,7 +116,7 @@
"chai-webdriverio": "^0.4.3",
"chalk": "^2.4.1",
"chokidar": "^1.7.0",
"chromedriver": "2.37.0",
"chromedriver": "^77.0.0",
"circular-dependency-plugin": "^5.0.2",
"core-js": "^2.5.1",
"cross-env": "^5.2.0",
Expand Down Expand Up @@ -160,6 +164,7 @@
"prettier": "^1.17.0",
"prompt": "^1.0.0",
"prop-types": "^15.6.0",
"puppeteer": "^2.0.0",
"raw-loader": "^0.5.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
Expand Down Expand Up @@ -197,8 +202,8 @@
},
"peerDependencies": {
"@elastic/datemath": "^5.0.2",
"@types/react": "^16.9.11",
"@types/react-dom": "^16.9.4",
"@types/react": "^16.9.23",
"@types/react-dom": "^16.9.5",
"moment": "^2.13.0",
"prop-types": "^15.5.0",
"react": "^16.12",
Expand Down
94 changes: 94 additions & 0 deletions scripts/a11y-testing.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
const chalk = require('chalk');
const puppeteer = require('puppeteer');
const { AxePuppeteer } = require('axe-puppeteer');

const docsPages = async (root, page) => {
let links = [
root,
...(await page.$$eval('nav a', anchors => anchors.map(a => a.href))),
];

links = links.splice(0, 9);

return links;
};

const printResult = result =>
console.log(`[${result.id}]: ${result.description}
Help: ${chalk.blue(result.helpUrl)}
Elements:
- ${result.nodes.map(node => node.target).join('\n - ')}`);

(async () => {
let totalViolationsCount = 0;
let root = 'http://localhost:9999/';
let browser;
let page;

try {
browser = await puppeteer.launch({ args: ['--no-sandbox'] });
page = await browser.newPage();

await page.setBypassCSP(true);
} catch (e) {
console.log(chalk.red('Failed to setup puppeteer'));
console.log(e);
process.exit(1);
}

try {
await page.goto(root);
} catch (e) {
root = 'http://localhost:8030/';
try {
await page.goto(root);
} catch (e) {
console.log(
chalk.red(
'No local server found. Expecting localhost:9999 or localhost:8030 to resolve.'
)
);
process.exit(1);
}
}

const links = await docsPages(root, page);

for (const link of links) {
await page.goto(link);

const { violations } = await new AxePuppeteer(page)
.disableRules('color-contrast')
.exclude(['figure[role="figure"']) // excluding figure[role="figure"] the duplicatory role is there for ie11 support
.analyze();

if (violations.length > 0) {
totalViolationsCount += violations.length;

const pageName = link.length > 24 ? link.substr(2) : 'the home page';
console.log(chalk.red(`Errors on ${pageName}`));
}

violations.forEach(result => {
printResult(result);
});
}

await page.close();
await browser.close();

if (totalViolationsCount > 0) {
const errorsCount = chalk.red(
`${totalViolationsCount} accessibility errors`
);

console.log(`${errorsCount}
Install axe for Chrome or Firefox to debug:
Chrome: https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd
Firefox: https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/`);
process.exit(1);
} else {
console.log(chalk.green('axe found no accessibility errors!'));
}
})();
18 changes: 18 additions & 0 deletions scripts/test-docker.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
const { execSync } = require('child_process');

execSync('docker pull zenato/puppeteer', {
stdio: 'inherit',
});
/* eslint-disable-next-line no-multi-str */
execSync("docker run \
-i --rm --cap-add=SYS_ADMIN --volume=$(pwd):/app --workdir=/app \
-e GIT_COMMITTER_NAME=test -e GIT_COMMITTER_EMAIL=test -e HOME=/tmp \
--user=$(id -u):$(id -g) \
zenato/puppeteer \
bash -c 'npm config set spin false \
&& /opt/yarn*/bin/yarn \
&& npm run test \
&& npm run start-test-server-and-a11y-test \
&& npm run build'", {
stdio: 'inherit',
});
105 changes: 85 additions & 20 deletions src-docs/src/views/accessibility/accessibility_example.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,56 @@ import { renderToHtml } from '../../services';
import { GuideSectionTypes } from '../../components';

import {
EuiCallOut,
EuiCode,
EuiLink,
EuiKeyboardAccessible,
EuiScreenReaderOnly,
EuiSkipLink,
} from '../../../../src/components';

import KeyboardAccessible from './keyboard_accessible';
import ScreenReaderOnly from './screen_reader';
import SkipLink from './skip_link';

const keyboardAccessibleSource = require('!!raw-loader!./keyboard_accessible');
const keyboardAccessibleHtml = renderToHtml(KeyboardAccessible);
const keyboardAccessibleSnippet = `<EuiKeyboardAccessible>
<!-- interactive child element -->
</EuiKeyboardAccessible>`;

const screenReaderOnlyHtml = renderToHtml(ScreenReaderOnly);
const screenReaderOnlySource = require('!!raw-loader!./screen_reader');
const screenReaderOnlySnippet = [
`<EuiScreenReaderOnly>
<!-- visually hidden content -->
</EuiScreenReaderOnly>
`,
`<EuiScreenReaderOnly showOnFocus>
<!-- visually hidden content, displayed on focus -->
</EuiScreenReaderOnly>
`,
];

const skipLinkHtml = renderToHtml(SkipLink);
const skipLinkSource = require('!!raw-loader!./skip_link');
const skipLinkSnippet = [
`<EuiSkipLink destinationId="myAnchorId">
Skip to content
</EuiSkipLink>
`,
`<EuiSkipLink destinationId="myAnchorId" position="fixed">
Skip to main content
</EuiSkipLink>
`,
];

import { ScreenReaderOnlyDocsComponent } from './props';

export const AccessibilityExample = {
title: 'Accessibility',
sections: [
{
title: 'KeyboardAccessible',
title: 'Keyboard accessible',
source: [
{
type: GuideSectionTypes.JS,
Expand All @@ -37,17 +67,18 @@ export const AccessibilityExample = {
],
text: (
<p>
You can make interactive elements keyboard-accessible with this
component. This is necessary for non-button elements and{' '}
<EuiCode>a</EuiCode> tags without
You can make interactive elements keyboard-accessible with the{' '}
<EuiCode>EuiKeyboardAccessible</EuiCode> component. This is necessary
for non-button elements and <EuiCode>a</EuiCode> tags without{' '}
<EuiCode>href</EuiCode> attributes.
</p>
),
props: { EuiKeyboardAccessible },
snippet: keyboardAccessibleSnippet,
demo: <KeyboardAccessible />,
},
{
title: 'ScreenReaderOnly',
title: 'Screen reader only',
source: [
{
type: GuideSectionTypes.JS,
Expand All @@ -61,24 +92,58 @@ export const AccessibilityExample = {
text: (
<div>
<p>
This class can be useful to add accessibility to older designs that
are still in use, but it shouldn&rsquo;t be a permanent solution.
See{' '}
{
<EuiLink href="http://webaim.org/techniques/css/invisiblecontent/">
http://webaim.org/techniques/css/invisiblecontent/
</EuiLink>
}{' '}
for more information.
</p>
<p>
Use a screenreader to verify that there is a second paragraph in
this example:
Use the <EuiCode>EuiScreenReaderOnly</EuiCode> component to visually
hide elements while still allowing them to be read by screen
readers. In certain cases, you may want to use the{' '}
<EuiCode>showOnFocus</EuiCode> prop to display screen reader-only
content when in focus.
</p>
<EuiCallOut
color="warning"
iconType="accessibility"
title="WebAIM recommendation for screen reader-only content">
<p>
&quot;In most cases, if content (particularly content that
provides functionality or interactivity) is important enough to
provide to screen reader users, it should probably be made
available to all users.&quot;{' '}
<EuiLink
href="http://webaim.org/techniques/css/invisiblecontent/"
external>
Learn more about invisible content
</EuiLink>
</p>
</EuiCallOut>
</div>
),
props: { EuiScreenReaderOnly },
props: {
EuiScreenReaderOnly: ScreenReaderOnlyDocsComponent,
},
snippet: screenReaderOnlySnippet,
demo: <ScreenReaderOnly />,
},
{
title: 'Skip link',
source: [
{
type: GuideSectionTypes.JS,
code: skipLinkSource,
},
{
type: GuideSectionTypes.HTML,
code: skipLinkHtml,
},
],
text: (
<p>
The <EuiCode>EuiSkipLink</EuiCode> component allows users to bypass
navigation, or ornamental elements, and quickly reach the main content
of the page.
</p>
),
props: { EuiSkipLink },
snippet: skipLinkSnippet,
demo: <SkipLink />,
},
],
};
Loading

0 comments on commit ce6368d

Please sign in to comment.