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.

Sign up for GitHub

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

[EuiScreenReaderOnly] Revert left positioning change #5215

Merged
merged 3 commits into from
Sep 27, 2021
Merged

[EuiScreenReaderOnly] Revert left positioning change #5215

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2755126
Revert left positioning change
cee-chen Sep 24, 2021
1f30b91
[optional] Preserve external link left: 0 behavior
cee-chen Sep 24, 2021
e506d3b
Add changelog entry
cee-chen Sep 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@

- Fixed logo icons with static SVG IDs causing accessibility errors when multiples of the same logo were present ([#5204](https://github.com/elastic/eui/pull/5204))

**Reverts**

- Reverted `EuiScreenReaderOnly` left positioning change due to Selenium issues ([#5215](https://github.com/elastic/eui/pull/5215))

## [`38.1.0`](https://github.com/elastic/eui/tree/v38.1.0)

- Fixed the `title` prop `EuiButtonGroup` to automatically display the `label` provided ([#5199](https://github.com/elastic/eui/pull/5199))
Expand Down
4 changes: 4 additions & 0 deletions src/components/link/_link.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@
&[target='_blank'] {
// Make the screen reader only text positioned relatively against the link itself
position: relative;

.euiScreenReaderOnly {
left: 0;
}
Comment on lines 4 to +10
Copy link
Contributor Author

@cee-chen cee-chen Sep 24, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

I'm 50/50 on keeping this in vs. just removing it entirely 🤷 I would be surprised if any Kibana functional tests were asserting on any external link text, so I think this is safe to keep in from that perspective - but I do also think it would be cleaner to require the external icon always for target="_blank" links and simply bake the (opens in a new tab or window) text into the icon aria-label itself (see cee-chen#2 (comment))

Copy link
Contributor

Choose a reason for hiding this comment

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

I'm on the fence about this change. If there's a clear benefit in the exception to the wider SR-only rule, let's keep it. Otherwise, I think it could be removed.

I've also been thinking on the benefits and risks of adding the parenthetical to the aria-label attribute. Don't have a good argument either way, so I'll trend toward leaving it as is for now.

}

.euiLink__externalIcon {
Expand Down
4 changes: 2 additions & 2 deletions src/global_styling/mixins/_helpers.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,8 +112,8 @@
position: absolute;
// Keep it vertically inline
top: auto;
// Chrome requires a left value
left: 0;
// Chrome requires a left value, and Selenium (used by Kibana's FTR) requires an off-screen position for its .getVisibleText() to not register SR-only text
Copy link
Contributor

Choose a reason for hiding this comment

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

The left: -10000px; rule will create a box that extends off the left of the screen in JAWS and VoiceOver, but does improve the situation with testing and is an existing behavior in EUI. I'd love to hear more about Chrome needing a left: 0; rule -- I hope I haven't been missing something important in the past.

Copy link
Contributor Author

@cee-chen cee-chen Sep 27, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

Sorry, to clarify, Chrome required a left property to be set for the scrolling issue that #5152 fixed, not for screen-reader-only behavior alone. There's a footnote in the PR description about it:

On the subject of browser-specific shenanigans: in FF, I was able to remove the top and left positioning properties totally and the fix worked. However, on Chromium/webkit, just clip alone didn't fix the scrolling issue: I needed left: -10000px too 😖 The only other place I could find where someone else had this issue was this filed bug, but they seemed to come to the conclusion the issue was with FontAwesome, not Chromium (which I sorta disagree with, but c'est la vie). Maybe someday someone will google around and come across this issue, and the cycle of the internet will be complete :)

left: -10000px;
// The element must have a size (for some screen readers)
width: 1px;
height: 1px;
Expand Down