gabrielb
4658d60ad0
- AccessibilityWidget: botão fixo bottom-right com painel de tamanho de texto (A/A+/A++) e toggle alto contraste, aplicados via classes no <html> - layout.scss: remove override global de min-height em botões/links; mantém apenas focus-visible, skip-link, reduced-motion e classes do widget a11y - HomeView: carrossel — botão de ação movido para abaixo do texto (não mais ao lado) para evitar compressão do texto no mobile Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
103 lines
4.3 KiB
Vue
103 lines
4.3 KiB
Vue
<script setup>
|
|
import { ref, watch } from 'vue'
|
|
|
|
const aberto = ref(false)
|
|
const nivelFonte = ref(0) // 0 = normal, 1 = grande, 2 = extra-grande
|
|
const altoContraste = ref(false)
|
|
|
|
const opcoesFonte = [
|
|
{ nivel: 0, label: 'A', title: 'Texto normal' },
|
|
{ nivel: 1, label: 'A+', title: 'Texto grande' },
|
|
{ nivel: 2, label: 'A++', title: 'Texto extra-grande' },
|
|
]
|
|
|
|
watch(nivelFonte, (val) => {
|
|
document.documentElement.classList.remove('a11y-font-lg', 'a11y-font-xl')
|
|
if (val === 1) document.documentElement.classList.add('a11y-font-lg')
|
|
if (val === 2) document.documentElement.classList.add('a11y-font-xl')
|
|
}, { immediate: true })
|
|
|
|
watch(altoContraste, (val) => {
|
|
document.documentElement.classList.toggle('a11y-contrast', val)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="fixed bottom-6 right-6 z-50 flex flex-col items-end gap-3">
|
|
|
|
<!-- Painel -->
|
|
<Transition
|
|
enter-active-class="transition-all duration-200 ease-out"
|
|
enter-from-class="opacity-0 translate-y-2 scale-95"
|
|
enter-to-class="opacity-100 translate-y-0 scale-100"
|
|
leave-active-class="transition-all duration-150 ease-in"
|
|
leave-from-class="opacity-100 translate-y-0 scale-100"
|
|
leave-to-class="opacity-0 translate-y-2 scale-95"
|
|
>
|
|
<div
|
|
v-if="aberto"
|
|
id="a11y-panel"
|
|
role="dialog"
|
|
aria-label="Opções de acessibilidade"
|
|
class="bg-white rounded-2xl shadow-2xl border border-slate-200 p-5 w-64 origin-bottom-right"
|
|
>
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<i class="pi pi-eye text-primary text-sm" aria-hidden="true" />
|
|
<p class="text-xs font-bold text-slate-600 uppercase tracking-wide">Acessibilidade</p>
|
|
</div>
|
|
|
|
<!-- Tamanho do texto -->
|
|
<div class="mb-5">
|
|
<p class="text-sm font-semibold text-slate-700 mb-2">Tamanho do texto</p>
|
|
<div class="flex gap-2" role="group" aria-label="Escolha o tamanho do texto">
|
|
<button
|
|
v-for="op in opcoesFonte"
|
|
:key="op.nivel"
|
|
:title="op.title"
|
|
:aria-pressed="nivelFonte === op.nivel"
|
|
:class="[
|
|
'flex-1 py-2 rounded-lg border text-sm font-bold transition-colors',
|
|
nivelFonte === op.nivel
|
|
? 'bg-primary text-white border-primary'
|
|
: 'bg-white text-slate-600 border-slate-200 hover:border-primary/40 hover:text-primary'
|
|
]"
|
|
@click="nivelFonte = op.nivel"
|
|
>
|
|
{{ op.label }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alto contraste -->
|
|
<div class="flex items-center justify-between pt-4 border-t border-slate-100">
|
|
<div>
|
|
<p class="text-sm font-semibold text-slate-700">Alto contraste</p>
|
|
<p class="text-xs text-slate-400 mt-0.5">Melhora a legibilidade</p>
|
|
</div>
|
|
<ToggleSwitch
|
|
v-model="altoContraste"
|
|
:aria-label="altoContraste ? 'Desativar alto contraste' : 'Ativar alto contraste'"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
|
|
<!-- Botão flutuante -->
|
|
<button
|
|
:class="[
|
|
'w-12 h-12 rounded-full shadow-lg border flex items-center justify-center transition-all hover:scale-105',
|
|
aberto
|
|
? 'bg-primary text-white border-primary shadow-primary/30'
|
|
: 'bg-white text-slate-600 border-slate-200 hover:border-slate-300 hover:shadow-xl'
|
|
]"
|
|
:aria-label="aberto ? 'Fechar painel de acessibilidade' : 'Abrir painel de acessibilidade'"
|
|
:aria-expanded="aberto"
|
|
aria-controls="a11y-panel"
|
|
@click="aberto = !aberto"
|
|
>
|
|
<i class="pi pi-eye text-lg" aria-hidden="true" />
|
|
</button>
|
|
|
|
</div>
|
|
</template>
|