Merge pull request #324 into main

Author: manupawickramasinghe

.jules/palette.md

@@ -7,3 +7,7 @@
 ## 2024-06-25 - Focus and hover colors for Glass widgets
 **Learning:** Glassmorphism UI elements using `Colors.white.withValues(alpha: opacity)` for their background can mask default `InkWell` keyboard focus and mouse hover states.
 **Action:** Always explicitly define `focusColor` and `hoverColor` (e.g. `Colors.white.withValues(alpha: 0.1)`) on `InkWell` components used within glassmorphism widgets to maintain accessibility for keyboard and mouse users.
+
+## 2024-09-02 - Add Semantic Button traits to custom filter pills
+**Learning:** Filter chips built with AnimatedContainer and GestureDetector lack standard button semantics and keyboard focus states, making them inaccessible.
+**Action:** Replace GestureDetector with InkWell inside a Semantics(button: true) wrapper to explicitly add button traits, and define hoverColor/focusColor to ensure keyboard accessibility.

lib/views/explore/explore_view.dart

@@ -193,43 +193,53 @@ class _ExploreViewState extends State<ExploreView> {
                         final isSelected = category == _selectedCategory;
                         return Padding(
                           padding: const EdgeInsets.only(right: 8),
-                          child: GestureDetector(
-                            onTap: () {
-                              setState(() => _selectedCategory = category);
-                              _filterContent();
-                            },
-                            child: AnimatedContainer(
-                              duration: const Duration(milliseconds: 200),
-                              padding: const EdgeInsets.symmetric(
-                                horizontal: 18,
-                                vertical: 8,
-                              ),
-                              decoration: BoxDecoration(
-                                gradient: isSelected
-                                    ? AppTheme.primaryGradient
-                                    : null,
-                                color: isSelected
-                                    ? null
-                                    : Colors.white.withValues(alpha: 0.08),
+                          child: Semantics(
+                            button: true,
+                            enabled: true,
+                            child: Material(
+                              color: Colors.transparent,
+                              child: InkWell(
+                                focusColor: Colors.white.withValues(alpha: 0.1),
+                                hoverColor: Colors.white.withValues(alpha: 0.1),
                                 borderRadius: BorderRadius.circular(20),
-                                border: isSelected
-                                    ? null
-                                    : Border.all(
-                                        color: Colors.white.withValues(
-                                          alpha: 0.1,
-                                        ),
-                                      ),
-                              ),
-                              child: Text(
-                                category,
-                                style: TextStyle(
-                                  color: isSelected
-                                      ? Colors.white
-                                      : AppTheme.textSecondary,
-                                  fontWeight: isSelected
-                                      ? FontWeight.w600
-                                      : FontWeight.w500,
-                                  fontSize: 14,
+                                onTap: () {
+                                  setState(() => _selectedCategory = category);
+                                  _filterContent();
+                                },
+                                child: AnimatedContainer(
+                                  duration: const Duration(milliseconds: 200),
+                                  padding: const EdgeInsets.symmetric(
+                                    horizontal: 18,
+                                    vertical: 8,
+                                  ),
+                                  decoration: BoxDecoration(
+                                    gradient: isSelected
+                                        ? AppTheme.primaryGradient
+                                        : null,
+                                    color: isSelected
+                                        ? null
+                                        : Colors.white.withValues(alpha: 0.08),
+                                    borderRadius: BorderRadius.circular(20),
+                                    border: isSelected
+                                        ? null
+                                        : Border.all(
+                                            color: Colors.white.withValues(
+                                              alpha: 0.1,
+                                            ),
+                                          ),
+                                  ),
+                                  child: Text(
+                                    category,
+                                    style: TextStyle(
+                                      color: isSelected
+                                          ? Colors.white
+                                          : AppTheme.textSecondary,
+                                      fontWeight: isSelected
+                                          ? FontWeight.w600
+                                          : FontWeight.w500,
+                                      fontSize: 14,
+                                    ),
+                                  ),
                                 ),
                               ),
                             ),