From c45691c4a63e94f4f58d4f5488a814b352adee5b Mon Sep 17 00:00:00 2001 From: Lucas Nascimento Date: Thu, 16 Oct 2025 16:56:12 -0300 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20cria=20composable=20para=20resolu?= =?UTF-8?q?=C3=A7=C3=A3o=20de=20aria-label?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/composables/useAriaLabel.ts | 53 +++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 src/utils/composables/useAriaLabel.ts diff --git a/src/utils/composables/useAriaLabel.ts b/src/utils/composables/useAriaLabel.ts new file mode 100644 index 000000000..70783469a --- /dev/null +++ b/src/utils/composables/useAriaLabel.ts @@ -0,0 +1,53 @@ +import { computed, type Ref, type ComputedRef } from 'vue'; + +interface AriaLabelArgs { + text: Ref | string; + loading: Ref | boolean; + disabled: Ref | boolean; + loadingText?: string; + disabledText?: string; +} + +/** + * Composable genérico para gerar aria-label acessível + * Funciona com qualquer componente que necessite de labels acessíveis + * + * @param args - Objeto contendo todos os parâmetros + * @param args.text - Texto principal do componente + * @param args.loading - Indica se o componente está em estado de carregamento + * @param args.disabled - Indica se o componente está desabilitado + * @param args.loadingText - Texto customizável para estado de carregamento + * @param args.disabledText - Texto customizável para estado desabilitado + * @returns aria-label reativo + */ +export function useAriaLabel(args: AriaLabelArgs): ComputedRef { + const { + text, + loading, + disabled, + loadingText = 'carregando', + disabledText = 'desabilitado', + } = args; + + return computed(() => { + const baseText = typeof text === 'object' && text.value !== undefined ? text.value : text; + const isLoading = typeof loading === 'object' && loading.value !== undefined ? loading.value : loading; + const isDisabled = typeof disabled === 'object' && disabled.value !== undefined ? disabled.value : disabled; + + if (!baseText) { + return ''; + } + + const parts: any[] = [baseText]; + + if (isLoading) { + parts.push(loadingText); + } + + if (isDisabled) { + parts.push(disabledText); + } + + return parts.join(', '); + }); +} \ No newline at end of file From 2d35a5482515a9aa0ec8f5ec810bc3098d54630e Mon Sep 17 00:00:00 2001 From: Lucas Nascimento Date: Thu, 16 Oct 2025 16:56:25 -0300 Subject: [PATCH 2/5] refactor: altera componente para composition api --- src/components/Button.vue | 302 +++++++++++++++++++------------------- 1 file changed, 154 insertions(+), 148 deletions(-) diff --git a/src/components/Button.vue b/src/components/Button.vue index dcff23193..b67f46d16 100644 --- a/src/components/Button.vue +++ b/src/components/Button.vue @@ -4,6 +4,9 @@ v-cdstip="tooltipDisabled" class="button__container" :class="computedStyle" + :disabled="disabled" + :aria-busy="loading" + :aria-label="ariaLabel" @click.stop="clickHandler" >