"Skip to transcript" button takes up space when hidden, lacks bottom margin

[swashbuck]

Subject of the issue

Issue 1

The hidden "Skip to Transcript" button is taking up vertical space. This appears directly underneath the instruction text.

If we change the button to display: block, the space is removed.

Issue 2

There is no bottom margin on the "Skip to Transcript" button when it has focus. Therefore, it sits flush on top of the media widget.

Suggested fix

  .media__skip-to-transcript {
    margin-bottom: @item-margin;

    &:not(:focus-visible) {
      display: block;
    }
  }

Your environment

• Media 6.7.4