From bd98864a7ff3ad6cac90ca4884390eef7d3be91e Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Wed, 20 Apr 2022 15:33:29 +0100 Subject: [PATCH 1/7] [EuiTimeline] Improve a11y (#5791) * Improve a11y * Add CL * CL number * Better aria-label for the 1st example * Changing ``to `` * renamed as -> component, moved default into function signature * Adding `role="list"` Co-authored-by: Chandler Prall --- src-docs/src/views/timeline/timeline.tsx | 4 +++- .../src/views/timeline/timeline_example.js | 23 +++++++++++++++---- src-docs/src/views/timeline/timeline_item.tsx | 2 +- .../views/timeline/timeline_item_event.tsx | 5 ++-- .../__snapshots__/timeline.test.tsx.snap | 13 ++++++----- .../__snapshots__/timeline_item.test.tsx.snap | 20 ++++++++-------- src/components/timeline/timeline.tsx | 7 +++--- src/components/timeline/timeline_item.tsx | 17 ++++++++++---- upcoming_changelogs/5791.md | 1 + 9 files changed, 60 insertions(+), 32 deletions(-) create mode 100644 upcoming_changelogs/5791.md diff --git a/src-docs/src/views/timeline/timeline.tsx b/src-docs/src/views/timeline/timeline.tsx index 8a9f46ed7b5..5d18813c0c0 100644 --- a/src-docs/src/views/timeline/timeline.tsx +++ b/src-docs/src/views/timeline/timeline.tsx @@ -39,4 +39,6 @@ const items: EuiTimelineProps['items'] = [ }, ]; -export default () => ; +export default () => ( + +); diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js index ca86fa87de9..9674d3018b7 100644 --- a/src-docs/src/views/timeline/timeline_example.js +++ b/src-docs/src/views/timeline/timeline_example.js @@ -6,6 +6,7 @@ import { EuiCode, EuiTimeline, EuiTimelineItem, + EuiCallOut, } from '../../../../src/components'; import timelineItemConfig from './playground'; @@ -82,6 +83,19 @@ export const TimelineExample = { actions that either a user or a system has performed. + + + For accessibility, it is highly recommended to provide a + descriptive aria-label, or a text node ID of + an external label to the aria-labelledby prop + of the EuiTimeline. + + } + /> ), props: { EuiTimeline, EuiTimelineItem }, @@ -136,11 +150,10 @@ export const TimelineExample = { <>

You can create a timeline thread by rendering multiple{' '} - EuiTimelineItem components. Wrapping these with an{' '} - EuiTimeline is not required, but we recommend - having all the EuiTimelineItems nested in the same - container. This way, we ensure that timeline styles are applied - correctly. + EuiTimelineItem components in a{' '} + EuiTimeline. Following this structure ensures that + timeline styles are applied correctly and appropriate semantic + elements are used to assist with screen readers.

When passing an icon and{' '} diff --git a/src-docs/src/views/timeline/timeline_item.tsx b/src-docs/src/views/timeline/timeline_item.tsx index e4c9162dcfe..ba9870c6a27 100644 --- a/src-docs/src/views/timeline/timeline_item.tsx +++ b/src-docs/src/views/timeline/timeline_item.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { EuiTimelineItem, EuiText, EuiCode } from '../../../../src/components'; export default () => ( - +

I'm the children and you can find the{' '} diff --git a/src-docs/src/views/timeline/timeline_item_event.tsx b/src-docs/src/views/timeline/timeline_item_event.tsx index e5274e98216..1be20e290e7 100644 --- a/src-docs/src/views/timeline/timeline_item_event.tsx +++ b/src-docs/src/views/timeline/timeline_item_event.tsx @@ -14,6 +14,7 @@ import { EuiSplitPanel, EuiPanel, EuiHorizontalRule, + EuiTimeline, } from '../../../../src/components'; import { @@ -107,7 +108,7 @@ export default () => { ); return ( -

+ { {phase('Cold phase', checked2, onChange2, colorBlindBehindText[2])} {phase('Frozen phase', checked3, onChange3, colorBlindBehindText[3])} -
+ ); }; diff --git a/src/components/timeline/__snapshots__/timeline.test.tsx.snap b/src/components/timeline/__snapshots__/timeline.test.tsx.snap index 06c59dd6eda..bc6fcfc1e36 100644 --- a/src/components/timeline/__snapshots__/timeline.test.tsx.snap +++ b/src/components/timeline/__snapshots__/timeline.test.tsx.snap @@ -1,10 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiTimeline is rendered with items 1`] = ` -
-
-
-
+
  • -
    • -
    + + `; diff --git a/src/components/timeline/__snapshots__/timeline_item.test.tsx.snap b/src/components/timeline/__snapshots__/timeline_item.test.tsx.snap index 5d60f1d07cf..f43db14ca1c 100644 --- a/src/components/timeline/__snapshots__/timeline_item.test.tsx.snap +++ b/src/components/timeline/__snapshots__/timeline_item.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiTimelineItem is rendered 1`] = ` -
    -
    + `; exports[`EuiTimelineItem props EuiAvatar is passed as an icon 1`] = ` -
    -
    + `; exports[`EuiTimelineItem props iconAriaLabel is rendered 1`] = ` -
    -
    + `; exports[`EuiTimelineItem props verticalAlign center is rendered 1`] = ` -
    -
    + `; exports[`EuiTimelineItem props verticalAlign top is rendered 1`] = ` -
    -
    + `; diff --git a/src/components/timeline/timeline.tsx b/src/components/timeline/timeline.tsx index 8d6e1b87c78..6b58d67bac6 100644 --- a/src/components/timeline/timeline.tsx +++ b/src/components/timeline/timeline.tsx @@ -12,7 +12,7 @@ import classNames from 'classnames'; import { EuiTimelineItem, EuiTimelineItemProps } from './timeline_item'; export interface EuiTimelineProps - extends HTMLAttributes, + extends HTMLAttributes, CommonProps { /** * List of timeline items to render. See #EuiTimelineItem @@ -29,11 +29,12 @@ export const EuiTimeline: FunctionComponent = ({ const classes = classNames('euiTimeline', className); return ( -
    + // eslint-disable-next-line jsx-a11y/no-redundant-roles +
      {items.map((item, index) => ( ))} {children} -
    + ); }; diff --git a/src/components/timeline/timeline_item.tsx b/src/components/timeline/timeline_item.tsx index 0aaf1a7caa3..33db6219525 100644 --- a/src/components/timeline/timeline_item.tsx +++ b/src/components/timeline/timeline_item.tsx @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import React, { FunctionComponent, HTMLAttributes } from 'react'; +import React, { FunctionComponent, HTMLAttributes, ElementType } from 'react'; import { CommonProps } from '../common'; import { useEuiTheme } from '../../services'; @@ -24,7 +24,7 @@ export const VERTICAL_ALIGN = ['top', 'center'] as const; export type EuiTimelineItemVerticalAlign = typeof VERTICAL_ALIGN[number]; export interface EuiTimelineItemProps - extends Omit, 'children'>, + extends Omit, 'children'>, CommonProps, Omit, Omit { @@ -32,6 +32,12 @@ export interface EuiTimelineItemProps * Vertical alignment of the event with the icon */ verticalAlign?: EuiTimelineItemVerticalAlign; + /** + * Sets the HTML element for `EuiTimelineItem`. + * By default, the element renders as a `
  • `. + * Only change the HTML element when it is not wrapped in a `EuiTimeline` that renders as a `
      `. + */ + component?: ElementType; } export const EuiTimelineItem: FunctionComponent = ({ @@ -40,6 +46,7 @@ export const EuiTimelineItem: FunctionComponent = ({ icon, iconAriaLabel, className, + component = 'li', ...rest }) => { const euiTheme = useEuiTheme(); @@ -47,8 +54,10 @@ export const EuiTimelineItem: FunctionComponent = ({ const cssStyles = [styles.euiTimelineItem]; + const Element = component; + return ( -
      + = ({ {children} -
      + ); }; diff --git a/upcoming_changelogs/5791.md b/upcoming_changelogs/5791.md new file mode 100644 index 00000000000..60b95e06936 --- /dev/null +++ b/upcoming_changelogs/5791.md @@ -0,0 +1 @@ +- Improved `EuiTimeline` a11y by using better semantic elements From fcf023efb1006f8ce23f9ace4a43bbe12fc92a97 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 20 Apr 2022 09:44:53 -0500 Subject: [PATCH 2/7] Update dependency @elastic/charts to v46 (#5796) * Update dependency @elastic/charts to v46 * add domain to Goal charts Co-authored-by: Renovate Bot Co-authored-by: Greg Thompson --- package.json | 2 +- src-docs/src/views/elastic_charts/accessibility_bullet.js | 1 + .../src/views/elastic_charts/accessibility_example.js | 1 + src-docs/src/views/elastic_charts/goal.js | 1 + yarn.lock | 8 ++++---- 5 files changed, 8 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index a237655ff78..ea520259136 100644 --- a/package.json +++ b/package.json @@ -115,7 +115,7 @@ "@cypress/code-coverage": "^3.9.12", "@cypress/react": "^5.10.3", "@cypress/webpack-dev-server": "^1.7.0", - "@elastic/charts": "^45.1.1", + "@elastic/charts": "^46.0.0", "@elastic/datemath": "^5.0.3", "@elastic/eslint-config-kibana": "^0.15.0", "@emotion/babel-preset-css-prop": "^11.2.0", diff --git a/src-docs/src/views/elastic_charts/accessibility_bullet.js b/src-docs/src/views/elastic_charts/accessibility_bullet.js index 4f7fb3041a4..5339fb50c66 100644 --- a/src-docs/src/views/elastic_charts/accessibility_bullet.js +++ b/src-docs/src/views/elastic_charts/accessibility_bullet.js @@ -63,6 +63,7 @@ export const AccessibilityBullet = () => { actual={280} bands={bands} ticks={[0, 50, 100, 150, 200, 250, 300]} + domain={{ min: 0, max: 300 }} tickValueFormatter={({ value }) => String(value)} bandFillColor={({ value }) => bandFillColor(value)} labelMajor="Revenue 2020 YTD " diff --git a/src-docs/src/views/elastic_charts/accessibility_example.js b/src-docs/src/views/elastic_charts/accessibility_example.js index 8ef88979634..16b988acb72 100644 --- a/src-docs/src/views/elastic_charts/accessibility_example.js +++ b/src-docs/src/views/elastic_charts/accessibility_example.js @@ -334,6 +334,7 @@ export const ElasticChartsAccessibilityExample = { snippet: ` { actual={12} bands={bands} ticks={[-10, 0, 10, 20, 30, 40]} + domain={{ min: -10, max: 40 }} tickValueFormatter={({ value }) => String(value)} bandFillColor={({ value }) => bandFillColor(value)} labelMajor="Temperature" diff --git a/yarn.lock b/yarn.lock index ec86752edc3..6c942761616 100755 --- a/yarn.lock +++ b/yarn.lock @@ -2400,10 +2400,10 @@ debug "^3.1.0" lodash.once "^4.1.1" -"@elastic/charts@^45.1.1": - version "45.1.1" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-45.1.1.tgz#d65b51ee296138a7e6b3d954fcf9fa41ba379492" - integrity sha512-gVk8ZbCBh8fUKxM6Rd61qwhSCgt1zU0wt3y3ZMUe+MdaTFG9I+0SceYrltJR+bf0ycK0wb1yg+WEw0LoN8bEIg== +"@elastic/charts@^46.0.0": + version "46.0.0" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-46.0.0.tgz#1714ae3d0cbbaf2d7319170577a429bd1776a190" + integrity sha512-saWKUg+UNF47sLw3WFeGppcZwB58qm3hLJzX/dwfI9dxZmba/PsYGSTuQXiGWuDQeHoMPlRXLe1lA+hD1cETzw== dependencies: "@popperjs/core" "^2.4.0" chroma-js "^2.1.0" From ab41c3497dc06d559d3a5639b96283c2c0aebc82 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Wed, 20 Apr 2022 10:11:00 -0500 Subject: [PATCH 3/7] [EuiAccordion] Replace `translateZ` with `will-change` (#5806) * replace translateZ with will-change * CL --- src/components/accordion/_accordion.scss | 2 +- upcoming_changelogs/5806.md | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) create mode 100644 upcoming_changelogs/5806.md diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss index aad27ccd02b..ff01baff1e4 100644 --- a/src/components/accordion/_accordion.scss +++ b/src/components/accordion/_accordion.scss @@ -40,11 +40,11 @@ } .euiAccordion__childWrapper { + will-change: opacity, visibility, height; visibility: hidden; height: 0; opacity: 0; overflow: hidden; - transform: translatez(0); // sass-lint:disable-block indentation transition: height $euiAnimSpeedNormal $euiAnimSlightResistance, diff --git a/upcoming_changelogs/5806.md b/upcoming_changelogs/5806.md new file mode 100644 index 00000000000..f2d829082f4 --- /dev/null +++ b/upcoming_changelogs/5806.md @@ -0,0 +1,4 @@ +**Bug fixes** + +- Fixed layout bug in `EuiAccordion` children that use `position: fixed;` + From 657cc807b010d7b9fa1ed904e2a6fd936f4e2424 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Wed, 20 Apr 2022 11:24:11 -0400 Subject: [PATCH 4/7] [EuiAspectRatio] Remove sass and replace with inline styles (#5818) Converts `EuiApsectRatio` to use the new `aspect-ratio` css property https://caniuse.com/mdn-css_properties_aspect-ratio --- .../__snapshots__/aspect_ratio.test.tsx.snap | 44 ++++++++----------- .../aspect_ratio/_aspect_ratio.scss | 12 ----- src/components/aspect_ratio/_index.scss | 1 - src/components/aspect_ratio/aspect_ratio.tsx | 34 +++++++------- src/components/index.scss | 3 +- upcoming_changelogs/5818.md | 2 + 6 files changed, 41 insertions(+), 55 deletions(-) delete mode 100644 src/components/aspect_ratio/_aspect_ratio.scss delete mode 100644 src/components/aspect_ratio/_index.scss create mode 100644 upcoming_changelogs/5818.md diff --git a/src/components/aspect_ratio/__snapshots__/aspect_ratio.test.tsx.snap b/src/components/aspect_ratio/__snapshots__/aspect_ratio.test.tsx.snap index d392f34e5bb..beaad26b6d6 100644 --- a/src/components/aspect_ratio/__snapshots__/aspect_ratio.test.tsx.snap +++ b/src/components/aspect_ratio/__snapshots__/aspect_ratio.test.tsx.snap @@ -1,43 +1,37 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiAspectRatio is rendered 1`] = ` -
      +`; + +exports[`EuiAspectRatio props maxWidth is rendered 1`] = ` +