title: tabIndex to focus on inner React component inside anchor tag
body: <p>I am trying to add a 'Skip to main content' accessibility button that receives focus on a page when a user hits tab. </p>
  
  <p>I would like to wrap already existing React components (Button, Card) in an anchor tag and then upon hitting tab, focus solely on the most inner component (Button) and navigate to the anchor tag href upon hitting 'Enter'.</p>
  
  <p>My code is as follows:</p>
  
  <pre><code>&lt;a href="/get-started" className="link link--list-item link--skip-link"&gt;
    &lt;Card className="card--skip-link"&gt;
      &lt;ButtonText Icon={IconArrowRight} iconPosition="right"&gt;
      Skip to main content
      &lt;/ButtonText&gt;
    &lt;/Card&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>As the code stands, the focus state is applied to the whole anchor tag. I would like to apply the focus state to ONLY the button (the button is smaller than the card that contains it). </p>
  
  <p>When I add <code>tabIndex="-1"</code> to the anchor tag and <code>tabIndex="0"</code> to the Card and/or Button, the elements are not selected at all when tabbing through. </p>
  
  <p>My CSS is:</p>
  
  <pre><code>.link {
    &amp;--skip-link {
      position: absolute;
      top: -10000px;
      left: -10000px;
      height: 1px;
      width: 1px;
      text-align: left;
      overflow: hidden;
  
      &amp;:active,
      &amp;:focus,
      &amp;:hover {
          top: 10%;
          left: 40%;
          width: auto;
          height: auto;
          overflow: visible;
          color: black;
      }
    }
  </code></pre>