Added internationalized screen reader helpers to EuiMark.

[1Copenut]

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

• Checked in both light and dark modes
• Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
• Props have proper autodocs and playground toggles
• Added documentation
• Checked Code Sandbox works for any docs examples
• Added or updated jest and cypress tests
• Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• Updated the Figma library counterpart
• A changelog entry exists and is marked appropriately

[kibanamachine]

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

[thompsongl]

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]

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]

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>

[1Copenut]

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.

[kibanamachine]

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

[1Copenut]

Ready for re-test. Thanks team!

[cchaos]

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

[kibanamachine]

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

[1Copenut]

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]

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

[1Copenut]

jenkins test this

[chandlerprall]

jenkins test this

[kibanamachine]

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]

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

[thompsongl]

LGTM!

[1Copenut]

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