LinkedIn's accessible modal X close button svg icon markup

close.html

<button type="button" name="cancel" class="send-invite__cancel-btn" data-ember-action="" data-ember-action-3746="3746">
  <span class="svg-icon-wrap">
    <span class="visually-hidden">Close</span>
    <li-icon aria-hidden="true" type="cancel-icon">
      <svg viewBox="0 0 24 24" width="24px" height="24px" x="0" y="0" preserveAspectRatio="xMinYMin meet" class="artdeco-icon">
        <g class="large-icon" style="fill: currentColor">
          <path d="M20,5.32L13.32,12,20,18.68,18.66,20,12,13.33,5.34,20,4,18.68,10.68,12,4,5.32,5.32,4,12,10.69,18.68,4Z"></path>
        </g>
      </svg>
    </li-icon>
  </span>
</button>

dismiss.html

<button class="artdeco-dismiss">
  <li-icon aria-hidden="true" type="cancel-icon">
    <svg viewBox="0 0 24 24" width="24px" height="24px" x="0" y="0" preserveAspectRatio="xMinYMin meet" class="artdeco-icon">
      <g class="large-icon" style="fill: currentColor">
        <path d="M20,5.32L13.32,12,20,18.68,18.66,20,12,13.33,5.34,20,4,18.68,10.68,12,4,5.32,5.32,4,12,10.69,18.68,4Z"></path>
      </g>
    </svg>
  </li-icon>
  <span class="a11y-text">Dismiss</span>
</button>

why.md

<button>

<button> provides perfect semantics.

span wrap

.svg-icon-wrap provides a hook used for styling as inline-block

span text

.visually-hidden provides accessible text for voice

custom element

[aria-hidden="true"]

<svg>

fill