Skip to content

refactor: Enhance accessibility and improve store initialization in components #430

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
marcelorodrigo merged 2 commits into from
Jan 1, 2026
Merged

refactor: Enhance accessibility and improve store initialization in components #430

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a881527
refacotr: Enhance accessibility and improve store initialization in c…
marcelorodrigo Jan 1, 2026
951a2f0
refactor: Remove unnecessary aria-label from AmountInput component
marcelorodrigo Jan 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 13 additions & 11 deletions app/components/investment/AmountInput.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,23 @@
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
<input
id="amount-input"
v-model.number='amount'
type='number'
min='1'
class="block w-full pl-10 pr-16 py-2 border-b-2 border-gray-300 focus:border-blue-500 focus:outline-none transition-colors"
:class="{ 'border-red-500': !isValid }"
/>
<input
id="amount-input"
v-model.number='amount'
type='number'
min='1'
class="block w-full pl-10 pr-16 py-2 border-b-2 border-gray-300 focus:border-blue-500 focus:outline-none transition-colors"
:class="{ 'border-red-500': !isValid }"

:aria-describedby="!isValid && amount !== null ? 'amount-error' : null"
/>
<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
<span class="text-gray-500 text-sm">R$ ,00</span>
</div>
</div>
<p v-if="!isValid && amount !== null" class="mt-1 text-sm text-red-600">
{{ errorMessage }}
</p>
<p v-if="!isValid && amount !== null" class="mt-1 text-sm text-red-600" id="amount-error" aria-live="polite">
{{ errorMessage }}
</p>
</div>
</template>

Expand Down
6 changes: 3 additions & 3 deletions app/layouts/default.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@
class="w-12 h-12"
/>
</NuxtLink>
<h1 class="ml-3 text-xl font-semibold text-gray-900 hidden sm:block whitespace-nowrap">
Calculadora Renda Fixa
</h1>
<h1 class="ml-3 text-xl font-semibold text-gray-900 hidden sm:block whitespace-nowrap">
Calculadora Renda Fixa
</h1>
</div>
<NavigationBar />
</div>
Expand Down
5 changes: 4 additions & 1 deletion app/pages/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,10 @@ useSeoMeta({
description: 'Calculadora de investimentos Renda Fixa para simulação de rentabilidade em CDB, RDB, LC, LCI, LCA, Poupança e Tesouro Direto'
})
import { useInvestmentStore } from '~/store/investment'
import { onMounted } from 'vue'
const store = useInvestmentStore()
store.initializeStore()
onMounted(() => {
store.initializeStore()
})

</script>