Skip to content

[EuiSkeleton] Add new props that allow for more screen reader control#6752

Merged
cee-chen merged 3 commits intoelastic:mainfrom
cee-chen:skeleton-sr-announcements
May 4, 2023
Merged

[EuiSkeleton] Add new props that allow for more screen reader control#6752
cee-chen merged 3 commits intoelastic:mainfrom
cee-chen:skeleton-sr-announcements

Conversation

@cee-chen
Copy link
Copy Markdown
Contributor

@cee-chen cee-chen commented May 3, 2023 •
edited
Loading

Summary

screencap

When using EuiSkeletonRectangle in the new EuiInlineEdit component, I realized we need more customization around when loading/loaded announcements were made. These new props (hopefully) solve that issue:

  • announceLoadingStatus (defaults to false)
  • announceLoadedStatus (defaults to true)
  • ariaLiveProps (escape hatch props passthrough to the underlying aria-live region - allows setting role, or conditionally turning off the aria-live, etc)

I'm aiming to ship these new props alongside the deprecation/removal of EuiLoadingContent to smooth over the transition.

QA

General checklist

  • Props have proper autodocs (using @default if default values are missing) and playground toggles
  • Added documentation
  • Checked Code Sandbox works for any docs examples
  • Added or updated jest and cypress tests
  • Checked for accessibility including keyboard-only and screenreader modes
  • A changelog entry exists and is marked appropriately

- [ ] Checked in both light and dark modes
- [ ] Checked in mobile
- [ ] Checked in Chrome, Safari, Edge, and Firefox
- [ ] Checked for breaking changes and labeled appropriately
- [ ] Updated the Figma library counterpart

cee-chen added 3 commits May 3, 2023 09:30
@cee-chen
[EuiSkeleton] Give consumers more SR live control
bdca74a 
- add 3 new props for enabling loading vs loaded announcements (previously was always only announcing loaded)

- give consumers more prop control over the underlying `EuiScreenReaderLive` region
@cee-chen
Add documentation for new live props
514319f
@cee-chen
changelog
969f634
@cee-chen cee-chen marked this pull request as ready for review May 3, 2023 18:04
@cee-chen cee-chen requested a review from 1Copenut May 3, 2023 18:04
@cee-chen cee-chen mentioned this pull request May 3, 2023
Merged
7 tasks
@kibanamachine
Copy link
Copy Markdown

kibanamachine commented May 3, 2023

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

1Copenut
1Copenut approved these changes May 4, 2023
View reviewed changes
Copy link
Copy Markdown
Contributor

@1Copenut 1Copenut left a comment

Choose a reason for hiding this comment

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

👍 LGTM! I checked this out with VoiceOver and NVDA (Chrome, FF) and it drove really well.

I started noodling with focus management after the onSubmit() event, but that felt out of scope for this change. If there's a future opportunity to document or illustrate that behavior, it might be a nice follow on.

@cee-chen cee-chen merged commit 59b0e94 into elastic:main May 4, 2023
@cee-chen cee-chen deleted the skeleton-sr-announcements branch May 4, 2023 21:13
@cee-chen cee-chen mentioned this pull request May 9, 2023
Merged
jbudz pushed a commit to elastic/kibana that referenced this pull request May 15, 2023
@cee-chen @kibanamachine
Upgrade EUI to v79.0.1 (#156925)
b9ea4ce 
## Summary

`eui@77.2.2` ⏩ `eui@79.0.1`

🦴 The primary changes in this upgrade are around the deprecated
`EuiLoadingContent` being removed in favor of `EuiSkeletonText`.
- Most instances have been a [direct swap of
usage](327626a),
but [some replacements were a bit more
opinionated](e6ceb36)
as I saw them as potential to take advantage of `EuiSkeletonText`'s
syntactical sugar and screen reader announcements for when state
switches to loaded.

---

## [`79.0.1`](https://github.com/elastic/eui/tree/v79.0.1)

**Bug fixes**

- Fixed broken push `EuiFlyout` behavior
([#6764](elastic/eui#6764))


## [`79.0.0`](https://github.com/elastic/eui/tree/v79.0.0)

- Updated all `EuiSkeleton` components with new props that allow for
more control over screen reader live announcements:
`announceLoadingStatus`, `announceLoadedStatus`, and `ariaLiveProps`
([#6752](elastic/eui#6752))
- Improved keyboard accessibility in `EuiPageHeader` by ensuring the
right side menu items come into focus from left to right.
([#6753](elastic/eui#6753))

**Breaking changes**

- Removed deprecated `EuiLoadingContent`. Use the `EuiSkeleton`
components instead. ([#6754](elastic/eui#6754))


## [`78.0.0`](https://github.com/elastic/eui/tree/v78.0.0)

- Improved the contrast ratio of `EuiCheckbox`, `EuiRadio`, and
`EuiSwitch` in their unchecked states to meet WCAG AA guidelines.
([#6729](elastic/eui#6729))
- Added React Testing Library `*ByTestSubject` custom commands to
`within()`. RTL utilities can be imported from
`@elastic/eui/lib/test/rtl`.
([#6737](elastic/eui#6737))
- Updated `EuiAvatar` to support a new letter `casing` prop that allow
customizing text capitalization
([#6739](elastic/eui#6739))
- Updated `EuiFocusTrap` to support the `gapMode` prop configuration
(now defaults to `padding`)
([#6744](elastic/eui#6744))

**Bug fixes**

- Fixed inconsistency in `EuiSearchBar`'s AND/OR semantics between DSL
and query string generation
([#6717](elastic/eui#6717))
- Fixed `EuiFieldNumber`'s native browser validity detection causing
extra unnecessary rerenders
([#6741](elastic/eui#6741))
- Fixed the `scrollLock` property on `EuiFocusTrap` (and other
components using `EuiFocusTrap`, such as `EuiFlyout` and `EuiModal`) to
no longer block scrolling on nested portalled content, such as combobox
dropdowns ([#6744](elastic/eui#6744))

**Breaking changes**

- `EuiAvatar`s with the default `user` type will now default to
capitalizing all initials in uppercase
([#6739](elastic/eui#6739))

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
jasonrhodes pushed a commit to elastic/kibana that referenced this pull request May 17, 2023
@cee-chen @kibanamachine @jasonrhodes
Upgrade EUI to v79.0.1 (#156925)
14c8acc 
## Summary

`eui@77.2.2` ⏩ `eui@79.0.1`

🦴 The primary changes in this upgrade are around the deprecated
`EuiLoadingContent` being removed in favor of `EuiSkeletonText`.
- Most instances have been a [direct swap of
usage](327626a),
but [some replacements were a bit more
opinionated](e6ceb36)
as I saw them as potential to take advantage of `EuiSkeletonText`'s
syntactical sugar and screen reader announcements for when state
switches to loaded.

---

## [`79.0.1`](https://github.com/elastic/eui/tree/v79.0.1)

**Bug fixes**

- Fixed broken push `EuiFlyout` behavior
([#6764](elastic/eui#6764))


## [`79.0.0`](https://github.com/elastic/eui/tree/v79.0.0)

- Updated all `EuiSkeleton` components with new props that allow for
more control over screen reader live announcements:
`announceLoadingStatus`, `announceLoadedStatus`, and `ariaLiveProps`
([#6752](elastic/eui#6752))
- Improved keyboard accessibility in `EuiPageHeader` by ensuring the
right side menu items come into focus from left to right.
([#6753](elastic/eui#6753))

**Breaking changes**

- Removed deprecated `EuiLoadingContent`. Use the `EuiSkeleton`
components instead. ([#6754](elastic/eui#6754))


## [`78.0.0`](https://github.com/elastic/eui/tree/v78.0.0)

- Improved the contrast ratio of `EuiCheckbox`, `EuiRadio`, and
`EuiSwitch` in their unchecked states to meet WCAG AA guidelines.
([#6729](elastic/eui#6729))
- Added React Testing Library `*ByTestSubject` custom commands to
`within()`. RTL utilities can be imported from
`@elastic/eui/lib/test/rtl`.
([#6737](elastic/eui#6737))
- Updated `EuiAvatar` to support a new letter `casing` prop that allow
customizing text capitalization
([#6739](elastic/eui#6739))
- Updated `EuiFocusTrap` to support the `gapMode` prop configuration
(now defaults to `padding`)
([#6744](elastic/eui#6744))

**Bug fixes**

- Fixed inconsistency in `EuiSearchBar`'s AND/OR semantics between DSL
and query string generation
([#6717](elastic/eui#6717))
- Fixed `EuiFieldNumber`'s native browser validity detection causing
extra unnecessary rerenders
([#6741](elastic/eui#6741))
- Fixed the `scrollLock` property on `EuiFocusTrap` (and other
components using `EuiFocusTrap`, such as `EuiFlyout` and `EuiModal`) to
no longer block scrolling on nested portalled content, such as combobox
dropdowns ([#6744](elastic/eui#6744))

**Breaking changes**

- `EuiAvatar`s with the default `user` type will now default to
capitalizing all initials in uppercase
([#6739](elastic/eui#6739))

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@1Copenut 1Copenut 1Copenut approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

accessibility

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@cee-chen @kibanamachine @1Copenut @JasonStoltz