[EuiResizableButton] Export as generic component; Add alignIndicator prop#7087
[EuiResizableButton] Export as generic component; Add alignIndicator prop#7087cee-chen merged 15 commits intoelastic:mainfrom
alignIndicator prop#7087Conversation
+ comment out code to be moved to the controlled component
+ fix display of `EuiResizableButton` when not used within a flex `EuiResizableContainer` by setting height/width to 100%
…initial handle indicator
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_7087/ |
- I browse Firefox at a 1.25x magnification, so this is particularly noticeable for me 🙈
a01b3ef to
e20fc16
Compare
- Safari treats focus differently that both Chrome and Firefox do
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_7087/ |
1Copenut
left a comment
There was a problem hiding this comment.
I looked through the commits one at a time and ran through manual QA as advised. I took the new component for a drive with screen readers, and found one what looks like a bug, and an improvement opportunity for SR-only help text.
- The custom resize button kept losing the screen reader cursor when I pressed
left_arroworright_arrowwhen browsing with Safari + VO. None of the other screen readers or Firefox + VO did this, just Safari. Best way to verify the issue is turn on Safari, turn on VO, and navigate to the drag handle. Then press left or right arrow a few times and it should start announcing the "Demo TS", one letter at a time. This doesn't appear to be happening with existing resizable container handles. - The resizable button helper text say to press left or right, up or down. We've been migrating other helper text to be more explicit and say left arrow or right arrow. Small detail and maybe an improvement ticket.
- NVDA and JAWS require users to enter Focus Mode and Forms Mode respectively to use the arrow keys to resize a container. In NVDA, this switch to Focus Mode "chirped" as I expected it because I had to toggle it manually. JAWS also required a manual toggle to Forms Mode, but didn't "chirp" like it normally does when entering Forms Mode. I'm not sure there's an action to take here, but something to keep in mind that we might want to further expand helper text to allude to Forms/Focus mode.
|
@1Copenut Thanks for the awesome screen reader testing! Just to clarify, can you confirm whether those issues are also the case in the other EDIT: 🤦 Sorry, just read the last sentence in your |
|
|
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_7087/ |
Yes, I think we can skip these for now. NVDA and JAWS have a visual browse mode for traversing pages using arrow keys. When they encounter forms, they drop into Focus (NVDA) or Forms (JAWS) mode that modifies how the arrow keys behave. When you're in Focus/Forms mode, you can use arrows to traverse through a radio group, select options, etc. Typically screen readers do a good job picking up on what should be in Focus/Forms mode, but sometimes we have controls like these resizable handles that need interacted with in that mode, so users have to manually opt in. It's a typical use pattern, so we can move ahead as we are and if users ask for more clarification, we can extend the help text. I love Leonie Watson's article Understanding screen reader interaction modes for comparing the modes and refer back to it often. |
alignHandle propalignIndicator prop
f77733c to
957008b
Compare
|
buildkite test this |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_7087/ |
💚 Build Succeeded
History
|
`87.1.0` ➡️ `87.2.0` ## [`87.2.0`](https://github.com/elastic/eui/tree/v87.2.0) - `EuiResizableButton` is now available as a generic top-level export ([#7087](elastic/eui#7087)) - Added new `alignIndicator` prop to `EuiResizableButton`. Defaults to `center`, and can now additionally be configured to `start` and `end` ([#7087](elastic/eui#7087)) - Updated `useGeneratedHtmlId` hook to use `React.useId` as the source of unique identifiers when available ([#7095](elastic/eui#7095)) **CSS-in-JS conversions** - Converted `EuiResizableButton` to Emotion; Removed `$euiResizableButtonTransitionSpeed` and `$euiResizableButtonSize` ([#7081](elastic/eui#7081)) - Converted `EuiResizableCollapseButton` to Emotion ([#7091](elastic/eui#7091)) --------- Co-authored-by: Cee Chen <constance.chen@elastic.co>
Summary
Exports a generic
EuiResizableButtonwith no context or references to the registry/resizers fromEuiResizableContainer, and sets up a new internalEuiResizableButtonControlledcomponent for the container parent to useEuiResizableButtonindicator #5787Creates a new
alignIndicatorprop that determines the position/alignment of the resize indicatorAs always, I recommend following along by commit.
QA
Docs
Storybook
gh pr checkout 7087yarn compile-scss && yarn storybookyarn compile-scssstep is important/required ever since we changed Storybook to import our distributed CSS, the old Sass will linger/override Emotion otherwiseisHorizontalandalignIndicatorprops and confirm they work as expectedGeneral checklist
@defaultif default values are missing)and playground togglesAdded orupdated jestand cypress tests