Fix: "Skip to transcript" button spacing (fixes #312)

[swashbuck]

Fix #312

Fix

1. Ensure "Skip to transcript" button does not take up space until in focus
2. Add bottom margin to button when visible

Testing

1. Using keyboard navigation, tab until you come to a "Skip to transcript" button.

[cahirodoherty-learningpool]

👀

[kirsty-hames]

Works as expected thanks @swashbuck. Please see query regarding the use of .visually-hidden.

[kirsty-hames]

There's an open Core PR that relates to this. Going by the issue discussion the intention is to update 'Skip to...' buttons to use the .visually-hidden mixin. I can't see any issues have been raised to update the other plugins as of yet but do we want to include in this PR?

[swashbuck]

Thanks, @kirsty-hames . Since that PR is still open, I think it would be better to update it separately so as to not hold up this fix? That PR would just change .u-display-none to .visually-hidden, right?

[kirsty-hames]

The PR as is works as expected so happy to proceed 👍

When the Core #606 PR is merged this can be revisited. We'd still need .u-display-none but would replace the :focus-visible styles with .visually-hidden-focusable.

  // Skip to transcript button
  &__skip-to-transcript {
    margin-bottom: @item-margin;
    
    html:not(.has-accessibility) & {
      .u-display-none;
    }

    .visually-hidden-focusable;
  }

[github-actions]

🎉 This PR is included in version 6.8.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀