padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update MarketPage styles for active filters summary

Browse source 
- Changed background and text colors in the active filters summary to improve visual consistency and accessibility.
- Updated ARIA attributes to enhance screen reader support for better usability.

These changes refine the user interface and accessibility of the category filtering features in the MarketPage.
This commit is contained in:
padreug 2025-09-25 23:56:43 +02:00
parent 03ca7525af
commit 4d3962e941
1 changed files with 4 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/modules/market/views/MarketPage.vue
View file

@ -136,15 +136,15 @@
<!-- Active Filters Summary -->
<div
v-if="selectedCategoriesCount > 0"
class="mt-4 p-3 bg-blue-50 rounded-lg border border-blue-200"
class="mt-4 p-3 bg-accent/50 rounded-lg border border-border"
role="region"
aria-label="Active category filters"
aria-live="polite"
>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<Filter class="w-4 h-4 text-blue-600" aria-hidden="true" />
<span class="text-sm font-medium text-blue-800">
<Filter class="w-4 h-4 text-accent-foreground/80" aria-hidden="true" />
<span class="text-sm font-medium text-accent-foreground">
Active Filters:
</span>
<div class="flex gap-1" role="list" aria-label="Selected category filters">
@ -159,7 +159,7 @@
</Badge>
</div>
</div>
<div class="text-sm text-blue-600" aria-live="polite">
<div class="text-sm text-muted-foreground" aria-live="polite">
{{ productsToDisplay.length }} products found
</div>
</div>