Alert with Actions

<!--
  An alert that asks for something back. The additions over a plain inline alert
  are all about the buttons:

  - aria-labelledby/aria-describedby wire the region to its own title and body,
    so the alert is announced as one unit rather than as three loose strings
    followed by two buttons with no context.
  - The buttons live INSIDE the labelled region. Hoisting them out is the usual
    mistake: "Upgrade plan" alone tells a screen-reader user nothing about why.
  - role="status", not "alert" - a quota warning is not an interruption; the
    user gets to finish the sentence they're reading.
-->
<div class="alert-actions" role="status" aria-labelledby="quota-title" aria-describedby="quota-body">
  <svg class="alert-actions__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
    <path d="M8.3 3.1a2 2 0 0 1 3.4 0l6 10A2 2 0 0 1 16 16H4a2 2 0 0 1-1.7-3l6-9.9ZM10 7a1 1 0 0 0-1 1v3a1 1 0 1 0 2 0V8a1 1 0 0 0-1-1Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" />
  </svg>

  <div class="alert-actions__body">
    <p class="alert-actions__title" id="quota-title">You're near your API limit</p>
    <p class="alert-actions__text" id="quota-body">
      You've used 94% of this month's 50,000 requests. Further calls will be rejected once you hit the cap.
    </p>

    <div class="alert-actions__row">
      <button class="alert-actions__cta" type="button">Upgrade plan</button>
      <button class="alert-actions__ghost" type="button">View usage</button>
    </div>
  </div>
</div>