.sr-only & .sr-only-focusable tweaks
#28720
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Using I think that the CC: @patrickhlauke |
XhmikosR
force-pushed
the
master-mc-sr-only
branch
from
8fd87c4 to
2f7a7f5
Compare
|
@MartijnCuppens: rebased. Please make any further changes if needed. |
XhmikosR
reviewed
May 4, 2019
patrickhlauke
requested changes
May 4, 2019
There was a problem hiding this comment.
Conceptually, i like it - and prefer the fact that you don't have to double up/combine the sr-only and sr-only-focusable classes anymore, but just pick one. Not had time to test, but trust that if it does what it says on the tin, the approach is sound (modulo that thing about :not(:active)
MartijnCuppens
force-pushed
the
master-mc-sr-only
branch
from
2f7a7f5 to
8b48876
Compare
ysds
approved these changes
May 5, 2019
MartijnCuppens
force-pushed
the
master-mc-sr-only
branch
from
66b6c02 to
bc08373
Compare
|
I've also added a notice in the migration guide. @patrickhlauke, could you have a look if everything is ok now? |
|
Ping @patrickhlauke |
XhmikosR
force-pushed
the
master-mc-sr-only
branch
from
7cff7d4 to
9b6c882
Compare
patrickhlauke
previously requested changes
May 20, 2019
patrickhlauke
approved these changes
May 20, 2019
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Analysis of the
.sr-onlyproperties:position: absolute: needed to prevent the element from taking up space in the documentwidth: 1px: prevents the element from becoming too wide and therefor creating scrollbarsheight: 1px: prevents the element from becoming too tall and therefor creating scrollbarspadding: 0: padding could increase the width or height even when those are set to1pxoverflow: hidden: prevent the text inside from breaking out the boxclip: rect(0, 0, 0, 0): make the element invisiblewhite-space: nowrap: see #22154border: 0: border could increase the width or height even when those are set to1pxSo yeah, we all need them.
We had this problem: #28691, which could be fixed by adding
!importantto all properties, but that would just make this problem bigger: https://codepen.io/MartijnCuppens/pen/Pgrpwe.And than I remembered a technique I used before (#25806), just make use of the
:not()selector. This would solve #28691 without introducing padding issues.This would also not require the
.sr-onlyclass on elements with.sr-only-focusable. I've changed the docs a bit to make this clear.I added @Jakobud as co author for the
!importantcommit since he already fixed that in #28701.Fixes #28691
Closes #28701