{{--
    Barra de acessibilidade (e-MAG/WCAG). Só **tokens** mudam (ADR-016):
    o CSS em `@layer a11y` aplica as preferências sem tocar na marcação.
--}}
<nav class="a11y-bar" aria-label="{{ __('layout::a11y.bar_label') }}">
    <ul class="a11y-bar__group" role="list">
        <li>
            <button type="button" class="a11y-bar__button" data-a11y-toggle="contrast"
                    aria-pressed="{{ $a11y->contrast ? 'true' : 'false' }}">
                <x-ui::icon name="contrast" class="a11y-bar__icon" />
                <span>{{ __('layout::a11y.contrast') }}</span>
            </button>
        </li>
        <li>
            <button type="button" class="a11y-bar__button" data-a11y-toggle="grayscale"
                    aria-pressed="{{ $a11y->grayscale ? 'true' : 'false' }}">
                <x-ui::icon name="image" class="a11y-bar__icon" />
                <span>{{ __('layout::a11y.grayscale') }}</span>
            </button>
        </li>
        <li>
            <button type="button" class="a11y-bar__button" data-a11y-toggle="spacing"
                    aria-pressed="{{ $a11y->spacing ? 'true' : 'false' }}">
                <x-ui::icon name="layers" class="a11y-bar__icon" />
                <span>{{ __('layout::a11y.spacing') }}</span>
            </button>
        </li>
        <li>
            <button type="button" class="a11y-bar__button" data-a11y-toggle="dyslexia"
                    aria-pressed="{{ $a11y->dyslexia ? 'true' : 'false' }}">
                <x-ui::icon name="file-text" class="a11y-bar__icon" />
                <span>{{ __('layout::a11y.dyslexia') }}</span>
            </button>
        </li>
        <li>
            <button type="button" class="a11y-bar__button" data-a11y-toggle="motion"
                    aria-pressed="{{ $a11y->reducedMotion ? 'true' : 'false' }}">
                <x-ui::icon name="eye-off" class="a11y-bar__icon" />
                <span>{{ __('layout::a11y.motion') }}</span>
            </button>
        </li>
    </ul>

    <div class="a11y-bar__group" role="group" aria-label="{{ __('layout::a11y.font_label') }}">
        <button type="button" class="a11y-bar__button" data-a11y-font-scale="smaller">
            <span aria-hidden="true">A-</span>
            <span class="sr-only">{{ __('layout::a11y.font_smaller') }}</span>
        </button>
        <button type="button" class="a11y-bar__button" data-a11y-font-scale="reset">
            <span aria-hidden="true">A</span>
            <span class="sr-only">{{ __('layout::a11y.font_reset') }}</span>
        </button>
        <button type="button" class="a11y-bar__button" data-a11y-font-scale="larger">
            <span aria-hidden="true">A+</span>
            <span class="sr-only">{{ __('layout::a11y.font_larger') }}</span>
        </button>
    </div>

    <button type="button" class="a11y-bar__button" data-a11y-vlibras aria-pressed="false">
        <x-ui::icon name="ear" class="a11y-bar__icon" />
        <span>{{ __('layout::a11y.vlibras') }}</span>
    </button>
</nav>