Skip to content

Update _screen-reader.scss#22154

Merged
mdo merged 5 commits into
twbs:v4-devfrom
ffoodd:patch-1
Mar 19, 2017
Merged

Update _screen-reader.scss#22154
mdo merged 5 commits into
twbs:v4-devfrom
ffoodd:patch-1

Conversation

@ffoodd

@ffoodd ffoodd commented Mar 10, 2017

Copy link
Copy Markdown
Contributor

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!
Comment thread scss/mixins/_screen-reader.scss Outdated
height: auto;
margin: 0;
overflow: visible;
white-space: normal;

Copy link
Copy Markdown

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…
Comment thread scss/mixins/_screen-reader.scss Outdated
height: auto;
margin: 0;
overflow: visible;
overflow: visible;

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Line contains trailing whitespace

Comment thread scss/mixins/_screen-reader.scss Outdated
padding: 0;
margin: -1px;
overflow: hidden;
overflow: hidden;

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Line contains trailing whitespace

Comment thread scss/mixins/_screen-reader.scss Outdated
height: auto;
margin: 0;
overflow: visible;
overflow: visible;

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Line contains trailing whitespace

Comment thread scss/mixins/_screen-reader.scss Outdated
@@ -10,6 +11,8 @@
margin: -1px;

Copy link
Copy Markdown
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

ffoodd commented Mar 19, 2017

Copy link
Copy Markdown
Contributor Author

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