Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(code_block): allow for a custom copy button aria-label #8176

Conversation

weronikaolejniczak
Copy link
Contributor

@weronikaolejniczak weronikaolejniczak commented Nov 22, 2024

Summary

We want to allow consumers to pass a custom Copy button aria-label. I added an optional copyAriaLabel prop. The PR doesn't introduce breaking changes. I added a snapshot test.

Screenshot 2024-11-22 at 11 03 57

closes #8004

QA

General checklist

  • Browser QA
    • Checked in both light and dark modes (not applicable)
    • Checked in mobile (not applicable)
    • Checked in Chrome, Safari, Edge, and Firefox
    • Checked for accessibility including keyboard-only and screenreader modes
  • Docs site QA
  • Code quality checklist
  • Release checklist
    • A changelog entry exists and is marked appropriately.
    • If applicable, added the breaking change issue label (and filled out the breaking change checklist) (not applicable)
  • Designer checklist
    • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request) (not applicable)

@weronikaolejniczak weronikaolejniczak force-pushed the feat/8004-eui-code-block-aria-label branch 2 times, most recently from d70fba6 to cfe6e8f Compare November 22, 2024 10:02
@weronikaolejniczak weronikaolejniczak marked this pull request as ready for review November 22, 2024 10:19
@weronikaolejniczak weronikaolejniczak requested a review from a team as a code owner November 22, 2024 10:19
@weronikaolejniczak weronikaolejniczak force-pushed the feat/8004-eui-code-block-aria-label branch from cfe6e8f to 6d47dcf Compare November 22, 2024 10:21
@weronikaolejniczak weronikaolejniczak changed the title feat(code-block): allow for a custom copy button aria-label feat(code_block): allow for a custom copy button aria-label Nov 22, 2024
@weronikaolejniczak weronikaolejniczak force-pushed the feat/8004-eui-code-block-aria-label branch 2 times, most recently from 1e572eb to 5c7e110 Compare November 22, 2024 11:40
@weronikaolejniczak weronikaolejniczak force-pushed the feat/8004-eui-code-block-aria-label branch from b553261 to dbeb3be Compare November 22, 2024 18:17
@weronikaolejniczak
Copy link
Contributor Author

Thanks for the awesome review, @cee-chen! 🙌🏻 I updated the PR with your suggestions. Let me know if there's anything else 😄

Copy link
Contributor

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One last set of comments around unit testing best practices that I'd like to see us slowly adopt more consistently in EUI! I had great dreams of improving/overhauling all our EUI tests back when I started, but tech debt is never sexy and hard to prioritize time-wise so it never happened 🥲 Ah well, incremental improvement still counts

packages/eui/src/components/code/code_block.test.tsx Outdated Show resolved Hide resolved
packages/eui/src/components/code/code_block.test.tsx Outdated Show resolved Hide resolved
- remove the wrapping describe,
- update the assertion to toHaveAttribute
@kibanamachine
Copy link

Preview staging links for this PR:

@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

History

Copy link
Contributor

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM - thanks so much for the speedy changes and follow-up PR Weronika!

@weronikaolejniczak weronikaolejniczak merged commit 90f7d5c into elastic:main Nov 25, 2024
5 checks passed
mgadewoll added a commit to elastic/kibana that referenced this pull request Jan 8, 2025
>[!IMPORTANT]
This PR introduces the Borealis enabled EUI package to `8.x`.
The intention is to support new features being developed that need to
live in `main` as well as `8.x`.


>[!IMPORTANT]
All `8.x` versions should continue to use the current Amsterdam theme.
To ensure this even with upcoming changes to the default theme for EUI,
we're adding `euiThemeAmsterdam` on `EuiProvider` usages manually.

## Description

This PR introduces all previous Borealis related PR changes but excludes
the specific changes to support `@elastic/eui-theme-borealis` as only
Amsterdam is supported as theme in `8.x`.

Previous PRs

- #199993
- #201049
- #202073

---

`v97.3.1`⏩`v98.2.1-borealis.1`

_[Questions? Please see our Kibana upgrade
FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_

---

# `@elastic/eui`

## [`v98.2.1`](https://github.com/elastic/eui/releases/v98.2.1)

- Updated the EUI theme color values to use a full 6 char hex code
format ([#8244](elastic/eui#8244))

## [`v98.2.0`](https://github.com/elastic/eui/releases/v98.2.0)

- Added two new icons: `contrast` and `contrastHigh`
([#8216](elastic/eui#8216))
- Updated `EuiDataGrid` content to have a transparent background.
([#8220](elastic/eui#8220))

**Accessibility**

- When the tooltips components (`EuiTooltip`, `EuiIconTip`) are used
inside components that handle the Escape key (like `EuiFlyout` or
`EuiModal`), pressing the Escape key will now only close the tooltip and
not the entire wrapping component.
([#8140](elastic/eui#8140))
- Improved the accessibility of `EuiCodeBlock`s by
([#8195](elastic/eui#8195))
  - adding screen reader only labels
  - adding `role="dialog"` on in fullscreen mode
  - ensuring focus is returned on closing fullscreen mode
  
# Borealis updates
  
- [Visual Refresh] Update color token mappings
([#8211](elastic/eui#8211))
- [Visual Refresh] Introduce shared popover arrow styles to Borealis
([#8212](elastic/eui#8212))
- [Visual Refresh] Add forms.maxWidth token
([#8221](elastic/eui#8221))
- [Visual Refresh] Set darker shade for subdued text
([#8224](elastic/eui#8224))
- [Visual Refresh] Remove support for accentSecondary badges
([#8224](elastic/eui#8227))
- [Visual Refresh] Add severity vis colors
([#8247](elastic/eui#8247))

---

# `@elastic/eui`

## [`v98.1.0`](https://github.com/elastic/eui/releases/v98.1.0)

- Updated `EuiBetaBadge` with a new `warning` color variant
([#8177](elastic/eui#8177))

**Accessibility**

- Ensures `autoFocus` on `EuiSelectableList` triggers initial focus
([#8091](elastic/eui#8091))
- Improved the accessibility of `EuiSearchBarFilters` by:
([#8091](elastic/eui#8091))
  - adding a more descriptive `aria-label` to selection filter buttons
- ensuring the selection listbox is initially focused when opening a
selection popover
- Improved the accessibility experience of tabs (EuiTab, EuiTabs): tab
group is a tab stop and tabs can be traversed with arrow keys.
([#8116](elastic/eui#8116))
- Updated `EuiCodeBlock` with a new `copyAriaLabel` prop, which allows
setting a custom screen reader label on the copy button.
([#8176](elastic/eui#8176))

**CSS-in-JS conversions**

- Removed the following global Sass variables:
([#8169](elastic/eui#8169))
  - `$euiButtonMinWidth`
  - `$euiDatePickerCalendarWidth`
- Removed the following Sass animations:
([#8169](elastic/eui#8169))
  - `euiAnimFadeIn`
  - `euiGrow`
  - `focusRingAnimate`
  - `focusRingAnimateLarge`
  - `euiButtonActive`
- Removed the following Sass mixins:
([#8169](elastic/eui#8169))
  - `euiFullHeight`
  - `euiSlightShadowHover`
  - `datePickerArrow`

# Borealis updates

- [Visual Refresh] Fix euiColorFullShade Sass variable mapping
(elastic/eui#8178)

---

# `@elastic/eui`

## [`v98.0.0`](https://github.com/elastic/eui/releases/v98.0.0)

**Bug fixes**

- Fixed an `EuiDataGrid` bug where column actions where not clickable
when `EuiDataGrid` with `columnVisibility.canDragAndDropColumns` was
used inside a modal ([#8135](elastic/eui#8135))

**Breaking changes**

- Removed `EuiFormRow`'s deprecated `columnCompressedSwitch` display
prop. Use `columnCompressed` instead
([#8113](elastic/eui#8113))

# Borealis updates

**Bug fixes**

- Fixed computed border token mapping
(elastic/eui#8170)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[EuiCodeBlock] set custom aria-label for Copy button
4 participants