Added internationalized screen reader helpers to EuiMark. #5739

1Copenut · 2022-03-21T21:20:22Z

Summary

This issue adds screen reader helper text to denote the beginning and end of a highlighted passage of text. The screen reader text uses the i18n helper so they are translated properly.

This PR closes #3072

Checklist

* Added SR-only text using EuiScreenReaderOnly. * Adding i18n to the highlight start and end. * Updating tests and declaring React Fragment.

upcoming_changelogs/5739.md

Co-authored-by: Greg Thompson <[email protected]>

kibanamachine · 2022-03-21T22:36:13Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5739/

thompsongl · 2022-03-21T23:00:02Z

Raising this for discussion because I think I looked into this a couple years ago:

Now that we're committed to CSS-in-JS, we could use this approach: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark#accessibility_concerns

I think i18n may have been a blocker previously. Almost certain that there are tradeoffs here that I'm not aware of that perhaps makes your approach better.

cchaos · 2022-03-22T03:15:40Z

Thinking through how EuiHighlight is generally used, which is to show where strings are matching... Are we concerned about this repetition when we get into places like EuiComboBox that might have hundreds of matching items and as the user arrows through, they constantly have to hear this "highlight start/end" text on each option?

thompsongl · 2022-03-22T18:19:04Z

To clarify my previous comment:

Add this to the existing css block in mark.styles.ts:

&:before,
&:after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

In mark.tsx:

...

const highlightStart = useEuiI18n('euiMark.highlightStart', 'highlight start');
const highlightEnd = useEuiI18n('euiMark.highlightEnd', 'highlight end');

const pseudoStyles = css`
&:before {
  content: " [${highlightStart}] ";
}

&:after {
  content: " [${highlightEnd}] ";
}
`;

...


<mark css={[styles, pseudoStyles]} className={classes} {...rest}>
  {children}
</mark>

…to feature/tpierce-eui-3072

1Copenut · 2022-03-22T21:28:43Z

I've refactored the CSS to use Emotion. Thanks @thompsongl for the code snippet.

@cchaos I tested with VoiceOver, and it does repeat the :before and :after blocks in every combo box option listing. It was verbose, but not overwhelming. I'll ask Zuhair his opinion tomorrow.

src/components/mark/mark.tsx

src/components/mark/mark.styles.ts

kibanamachine · 2022-03-22T22:02:21Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5739/

1Copenut · 2022-03-23T21:01:23Z

Ready for re-test. Thanks team!

cchaos

The concept works! Just had some suggestions and found one issue with the TS

src/components/mark/mark.styles.ts

src/components/mark/mark.tsx

src/services/theme/hooks.tsx

src/components/mark/mark.styles.ts

kibanamachine · 2022-03-23T21:28:20Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5739/

1Copenut · 2022-03-24T15:37:34Z

Ready for next iteration review. I added the hasScreenReaderHelpText prop to the EuiHighlight component and updated unit test to account for the default and override behavior.

kibanamachine · 2022-03-24T16:11:41Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5739/

src/components/highlight/highlight.test.tsx

src/components/highlight/highlight.tsx

…-3072

…it test. * Picking EuiMark prop for cleaner EuiHighlight typing. * Updated EuiMark test to include Emotion output in snapshot.

1Copenut · 2022-04-05T16:31:10Z

jenkins test this

chandlerprall · 2022-04-05T19:06:59Z

jenkins test this

kibanamachine · 2022-04-05T20:33:56Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5739/

cchaos

LGTM, but I'll leave it to @thompsongl to do the eng review.

kibanamachine · 2022-04-06T21:52:38Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5739/

thompsongl

LGTM!

1Copenut · 2022-04-07T14:57:03Z

I talked with Zuhair today and affirmed this is working well in NVDA and JAWS. Shipping it. Thanks everyone.

Added internationalized screen reader helpers to EuiMark.

4fb9838

* Added SR-only text using EuiScreenReaderOnly. * Adding i18n to the highlight start and end. * Updating tests and declaring React Fragment.

1Copenut added accessibility accessibility - screen reader labels Mar 21, 2022

1Copenut requested review from cchaos and thompsongl March 21, 2022 21:20

1Copenut self-assigned this Mar 21, 2022

Adding a new changelog entry for 3072.

1c31c87

1Copenut marked this pull request as ready for review March 21, 2022 21:27

Uploading the correct CHANGELOG file number.

2a6453e

thompsongl suggested changes Mar 21, 2022

View reviewed changes

upcoming_changelogs/5739.md Outdated Show resolved Hide resolved

Update upcoming_changelogs/5739.md

077ca75

Co-authored-by: Greg Thompson <[email protected]>

1Copenut requested a review from thompsongl March 21, 2022 22:01

1Copenut added 2 commits March 22, 2022 16:25

Refactoring to use CSS-in-JS.

0ebbd3f

Merge branch 'feature/tpierce-eui-3072' of github.com:1Copenut/eui in…

33665f3

…to feature/tpierce-eui-3072

cchaos reviewed Mar 22, 2022

View reviewed changes

src/components/mark/mark.tsx Outdated Show resolved Hide resolved

src/components/mark/mark.styles.ts Outdated Show resolved Hide resolved

Refactoring to toggle helper text.

4f7bd00

1Copenut requested a review from cchaos March 23, 2022 21:01

cchaos suggested changes Mar 23, 2022

View reviewed changes

src/components/mark/mark.styles.ts Outdated Show resolved Hide resolved

src/components/mark/mark.tsx Outdated Show resolved Hide resolved

src/services/theme/hooks.tsx Outdated Show resolved Hide resolved

src/components/mark/mark.styles.ts Outdated Show resolved Hide resolved

1Copenut added 3 commits March 24, 2022 09:02

Extending euiMarkStyles method locally instead of globally.

0104abb

Adding hasScreenReaderHelpText prop to Highlight component.

b00a075

Merging upstream main branch for conflict resolution.

79464e4

1Copenut requested a review from cchaos March 24, 2022 15:36

cchaos reviewed Mar 29, 2022

View reviewed changes

src/components/highlight/highlight.test.tsx Show resolved Hide resolved

src/components/highlight/highlight.tsx Outdated Show resolved Hide resolved

1Copenut added 2 commits April 5, 2022 09:15

Merge remote-tracking branch 'upstream/main' into feature/tpierce-eui…

72287ce

…-3072

Simplifying the highlight type checks and adding Emotion output to un…

70e118b

…it test. * Picking EuiMark prop for cleaner EuiHighlight typing. * Updated EuiMark test to include Emotion output in snapshot.

1Copenut requested a review from cchaos April 5, 2022 15:27

Fixing lint errors.

8296b61

Renaming a test for better context.

ea7ad75

cchaos approved these changes Apr 6, 2022

View reviewed changes

thompsongl approved these changes Apr 7, 2022

View reviewed changes

1Copenut merged commit 6912640 into elastic:main Apr 7, 2022

1Copenut mentioned this pull request Apr 7, 2022

Reducing the snapshot output of EuiMark unit tests. #5772

Merged

11 tasks

thompsongl mentioned this pull request Apr 19, 2022

Upgrade EUI to v55.0.1 elastic/kibana#130593

Merged

1Copenut deleted the feature/tpierce-eui-3072 branch May 10, 2023 19:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added internationalized screen reader helpers to EuiMark. #5739

Added internationalized screen reader helpers to EuiMark. #5739

1Copenut commented Mar 21, 2022 •

edited

Loading

kibanamachine commented Mar 21, 2022

thompsongl commented Mar 21, 2022

cchaos commented Mar 22, 2022

thompsongl commented Mar 22, 2022

1Copenut commented Mar 22, 2022

kibanamachine commented Mar 22, 2022

1Copenut commented Mar 23, 2022

cchaos left a comment

kibanamachine commented Mar 23, 2022

1Copenut commented Mar 24, 2022

kibanamachine commented Mar 24, 2022

1Copenut commented Apr 5, 2022 •

edited

Loading

chandlerprall commented Apr 5, 2022

kibanamachine commented Apr 5, 2022

cchaos left a comment

kibanamachine commented Apr 6, 2022

thompsongl left a comment

1Copenut commented Apr 7, 2022

Added internationalized screen reader helpers to EuiMark. #5739

Added internationalized screen reader helpers to EuiMark. #5739

Conversation

1Copenut commented Mar 21, 2022 • edited Loading

Summary

Checklist

kibanamachine commented Mar 21, 2022

thompsongl commented Mar 21, 2022

cchaos commented Mar 22, 2022

thompsongl commented Mar 22, 2022

1Copenut commented Mar 22, 2022

kibanamachine commented Mar 22, 2022

1Copenut commented Mar 23, 2022

cchaos left a comment

Choose a reason for hiding this comment

kibanamachine commented Mar 23, 2022

1Copenut commented Mar 24, 2022

kibanamachine commented Mar 24, 2022

1Copenut commented Apr 5, 2022 • edited Loading

chandlerprall commented Apr 5, 2022

kibanamachine commented Apr 5, 2022

cchaos left a comment

Choose a reason for hiding this comment

kibanamachine commented Apr 6, 2022

thompsongl left a comment

Choose a reason for hiding this comment

1Copenut commented Apr 7, 2022

1Copenut commented Mar 21, 2022 •

edited

Loading

1Copenut commented Apr 5, 2022 •

edited

Loading