Rewrite skip-link component inline with our CSS standards

Only found this line break at the end of :

.skip-link.visually-hidden.focusable:hover,
.skip-link.visually-hidden.focusable:focus,
.skip-link.visually-hidden.focusable:active

Think it works like this?

skip-link rule might be a bit crowded but the file looks more clean.

Hello,

Here is the patch. Maybe on the @file tag there should be a more intuitive explanation about what the skiplink is? Thanks for your patience;)

Hello,

Here is a new patch with a better info on the @file tag.

Added a missing full stop in the end of the comment.

@joaoagarin Thanks for working on this! It's looking much cleaner already :)

1. +++ b/core/themes/seven/css/components/skip-link.css
   @@ -1,6 +1,8 @@
      margin-top: 0;
   

   The skip-link has no margin-top by default, so this attribute can be removed.

2. +++ b/core/themes/seven/css/components/skip-link.css
   @@ -8,35 +10,24 @@
      display: inline-block;
   

   An element that has position: absolute is always treated as display: block;, so this attribute can be removed.

3. +++ b/core/themes/seven/css/components/skip-link.css
   @@ -8,35 +10,24 @@
      padding: 1px 10px 2px 10px; /* LTR */
   

   This padding looks identical on LTR and RTL, so the RTL styling and the /* LTR */ comment can be removed.

4. +++ b/core/themes/seven/css/components/skip-link.css
   @@ -8,35 +10,24 @@
      outline: 0;
   

   The outline: 0; is already inherited by a:focus { outline: 0; }, so this can be removed as well.

5. In the Bartik equivalent of this cleanup, we replaced the positioning of the skip-link with a transform: translateX(-50%); since the margin-left only makes an approximation. This approach has identical results on LTR and RTL, so all related RTL styling can be removed as well.

Hello,

Thanks for the info. I will provide another patch as soon as possible. Probably tonight or so!I haven't forgotten this;P

Hello I am putting up a patch with these changes. I haven't yet tried the approach with CSS transform. I will try it out later in the night if I get some time on it.

Just providing a screenshot how it looks now.

@joaogarin Thanks for working on this! I did a manual test and found a few more things that should be fixed before this can be committed:

1. +++ b/core/themes/seven/css/components/skip-link.css
   @@ -1,42 +1,29 @@
   + * Skip link - Allows keyboard users to quickly skip to the main content of the page.
   

   A line in a comment should be no longer than 80 characters.

2. +++ b/core/themes/seven/css/components/skip-link.css
   @@ -1,42 +1,29 @@
      position: absolute;
   

   This attribute is inherited from .visually-hidden, so it can be removed safely from this selector.

3. +++ b/core/themes/seven/css/components/skip-link.css
   @@ -1,42 +1,29 @@
      margin-left: -5.25em; /* LTR */
   

   Let's replace the negative margin with a transform: translateX(-50%) like the similar issue in Bartik: #2409069: Clean up the "skip-link" component in Bartik. This approach has identical results on LTR and RTL, so all related RTL styling and comments can be removed as well.

4. +++ b/core/themes/seven/css/components/skip-link.css
   @@ -1,42 +1,29 @@
      width: auto;
   

   This is the default value for width, so this attribute can be removed.

5. +++ b/core/themes/seven/css/components/skip-link.css
   @@ -1,42 +1,29 @@
   +  padding: 1px 10px 2px 10px;
   

   The last 10px is inferred, so this can be written as shorthand, eg. padding: 1px 10px 2px;

6. +++ b/core/themes/seven/css/components/skip-link.css
   @@ -1,42 +1,29 @@
    .skip-link.visually-hidden.focusable:hover,
    .skip-link.visually-hidden.focusable:focus,
   -.skip-link.visually-hidden.focusable:active
   -{
   +.skip-link.visually-hidden.focusable:active {
   

   This :focus state is the only applicable state, so the selectors for :hover and :active can be removed.

I'll grab this

I updated the lines @idebr mentioned

Deleted one more reference to RTL

Updated
The description is now on a different line.

+1, thanks @pjbaert!

Something is broken here - if I have toolbar enabled and I tab through the focusable elements on the page the skip link does not appear.

I'm unable to reproduce the issue reported by @alexpott:

Windows Google Chrome:

Windows Firefox:

Windows IE11:

+1
I did have another look at it but I can't seem to reproduce the bug @alexpott suggests.

Same thing:

Windows Google Chrome:

Windows Firefox:

Windows IE11:

Found out why! If you turn off javascript then the "skip to main content" does not appear in chrome (os x). Regardless of javascript being on I can not get it to appear in Firefox (os x). But this is due to:

In Firefox, type "about:config" in the URL bar. There is no accessibility.tabfocus preference on the mac, so you'll have to make one. Right click in the window, create a new "integer" pref, and set it to 7.

see https://stackoverflow.com/questions/11704828/how-to-allow-keyboard-focus...

So I think we should get a follow up to fix the fact that with toolbar and no javascript the skip to main content tab is hidden.

CSS is not frozen in beta. Committed 5cd98c4 and pushed to 8.0.x. Thanks!

Thanks @aloxpott! I had that option enabled for so long I had forgotten it existed at all.

I created a followup for the skip-link being invisible with the toolbar enabled but without javascript at #2449539: Skip link not visible without javascript