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

Update _screen-reader.scss #22154

Merged
merged 5 commits into from
Mar 19, 2017
Merged

Update _screen-reader.scss #22154

merged 5 commits into from
Mar 19, 2017

Conversation

ffoodd
Copy link
Member

@ffoodd ffoodd commented Mar 10, 2017

Small improvements that could be important:

See the detailed post on Hugo Giraudel's blog.

Also kinda related to issue #20732 :)

Please let me know if you find any trouble with this technique. Thanks a lot!

Small improvements that could be important:
* `clip` [is deprecated](https://www.w3.org/TR/css-masking-1/#clip-property). Adding `clip-path` as progressive enhancement; the shorter notation came from @ryuran 's [suggestion](https://twitter.com/ryuran78/status/778943389819604992);
* [J. Renée Beach warned about single pixel with interfering with screen readers vocalisation](https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe#.vcd5xlpgg) solved with `white-space`.

See [the detailed post on Hugo Giraudel's blog](http://hugogiraudel.com/2016/10/13/css-hide-and-seek/).

Also kinda related to issue #20732 :)

Please let me know if you find any trouble with this technique. Thanks a lot!
@@ -27,6 +30,8 @@
height: auto;
margin: 0;
overflow: visible;
white-space: normal;

Choose a reason for hiding this comment

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

Properties should be ordered position, width, height, margin, overflow, clip, white-space, clip-path

To pass Hound.
Didn't think `clip` and `clip-path` would be considered as unrelated…
@@ -26,7 +29,9 @@
width: auto;
height: auto;
margin: 0;
overflow: visible;
overflow: visible;

Choose a reason for hiding this comment

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

Line contains trailing whitespace


@mixin sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
overflow: hidden;

Choose a reason for hiding this comment

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

Line contains trailing whitespace

@@ -26,7 +29,9 @@
width: auto;
height: auto;
margin: 0;
overflow: visible;
overflow: visible;

Choose a reason for hiding this comment

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

Line contains trailing whitespace

@@ -10,6 +11,8 @@
margin: -1px;
Copy link
Member

Choose a reason for hiding this comment

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

Can we drop the margin: -1px? I don't see it in Hugo's post and I know we had an issue with it on GitHub causing a horizontal scrollbar with that.

@ffoodd
Copy link
Member Author

ffoodd commented Mar 19, 2017

Just removed the negative margin, which I forgot to remove before requesting pull (been testing multiple versions of this helper).

I can't find any issue related to this but I'd be interested (I'll comment again if I find it).

Thanks for reviewing!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants