fix(a11y): restore focus after popover close with color picker #1272
Conversation
rshen91
added
:accessibility
|
Working on mocking up a non eui color picker to see if the focus() is able to work. |
There was a problem hiding this comment.
I don't think this in the right solution here because the EuiPopover is expected to be passed a child (aka button) to be rendered and clicked to open the popover. See the empty <div> below in the list of legend items.
The EuiWrappingPopover is different in that it latches onto a given button element. This is intentional on the charts side to control what people are able to render as legend items.
I know you tried a million things to get it to work with the EuiWrappingPopover, do you think there is some change that eui could make to allow this to work as is?
|
Thanks for all your help! I reverted the changes I made in 12b52dc to have the story use the euiWrappingPopover instead and opened issue elastic/eui#5015 for the focus management of the Done button issue. |
|
Will reopen when above linked issue is resolved |
|
Checked in safari to see what's up. It looks like the same functionality is working in below video. keycastr.in.safari.mp4 |
# [35.0.0](v34.2.1...v35.0.0) (2021-09-13) ### Bug Fixes * **a11y:** restore focus after popover close with color picker ([#1272](#1272)) ([0c6f945](0c6f945)), closes [#1266](#1266) [#935](#935) * **build:** fix license in package.json ([#1362](#1362)) ([d524fdf](d524fdf)) * **deps:** update dependency @elastic/eui to ^37.5.0 ([#1341](#1341)) ([fb05c98](fb05c98)) * **deps:** update dependency @elastic/eui to ^37.6.1 ([#1359](#1359)) ([2ae90ce](2ae90ce)) * **deps:** update dependency @elastic/eui to ^37.7.0 ([#1373](#1373)) ([553b6b0](553b6b0)) * **heatmap:** filter out tooltip picked shapes in x-axis area ([#1351](#1351)) ([174047d](174047d)), closes [#1215](#1215) * **heatmap:** remove values when brushing only over axes ([#1364](#1364)) ([77ff8d3](77ff8d3)) ### Features * **annotations:** add onClickHandler for annotations ([#1293](#1293)) ([48198be](48198be)), closes [#1211](#1211) * **heatmap:** add text color contrast to heatmap cells ([#1342](#1342)) ([f9a26ef](f9a26ef)), closes [#1296](#1296) * **heatmap:** reduce font size to fit label within cells ([#1352](#1352)) ([16b5546](16b5546)) * **xy:** mutilayer time axis step 1 ([#1326](#1326)) ([867b1f5](867b1f5)) ### BREAKING CHANGES * **xy:** - feat: removes the axis deduplication feature - fix: `showDuplicatedTicks` causes a duplication check on the actual axis tick label (possibly yielded by `Axis.tickLabel` rather than the more general `tickFormat`) * **heatmap:** the `config.label.fontSize` prop is replaced by `config.label.minFontSize` and `config.label.maxFontSize`. You can specify the same value for both properties to have a fixed font size. The `config.label.align` and `config.label.baseline` props are removed from the `HeatmapConfig` object.
|
🎉 This PR is included in version 35.0.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Summary
If navigating through a chart with a legend and color picker, when closing the color picker, focus will be returned to the color of the legend item.
TODO
Details
This is a bug fix for accessibility focus management. The old color picker included an EuiWrappingPopover and was changed to EuiPopover. The EuiPopover element from eui returns focus back to the anchor
Issues
Fixes #1266 and #935