Need explanation how Clear input button accessibility works

I've a text input with a clear button (looks like "x"). When clicked, this button will remove all the text from the input:

The markup for this looks like:

  <label for="first-name">First name</label>

  <div class="input-and-buttons">

    <button role="button" aria-label="Clear" tabindex="0">
      X
    </button>

    <input id="first-name" tabindex="1"></input>

  </div>

How to best describe meaning of this button and its relationship to the input for users who use screen readers (like NVDA or VoiceOver)?