{# macros/a11y.html — reusable accessibility helpers.

   v0.62 CSS refactor: sr-only renamed to .visually-hidden (defined
   in utilities.css); skip_link styled via .dz-skip-link in
   components/fragments.css; loading_spinner uses .dz-loading-spinner
   wrapper + .dz-loading-spinner-icon. #}

{# Screen-reader-only text #}
{% macro sr_only(text) %}
<span class="visually-hidden">{{ text }}</span>
{% endmacro %}

{# Visually hidden but focusable skip link #}
{% macro skip_link(target="#main-content", text="Skip to main content") %}
<a href="{{ target }}" class="dz-skip-link">{{ text }}</a>
{% endmacro %}

{# Icon with accessible label — decorative by default #}
{% macro icon(svg, label=None) %}
{% if label %}
<span role="img" aria-label="{{ label }}">{{ svg | safe }}</span>
{% else %}
<span aria-hidden="true">{{ svg | safe }}</span>
{% endif %}
{% endmacro %}

{# Loading spinner with live announcement #}
{% macro loading_spinner(label="Loading", id=None) %}
<div {% if id %}id="{{ id }}"{% endif %}
     class="htmx-indicator dz-loading-spinner"
     role="status" aria-label="{{ label }}">
  <span class="dz-loading-spinner-icon" aria-hidden="true"></span>
  <span class="visually-hidden">{{ label }}</span>
</div>
{% endmacro %}