@@ -356,14 +356,18 @@ class _AddPetScreenState extends ConsumerState<AddPetScreen>
356356 ],
357357 ),
358358 const SizedBox (height: 8 ),
359- ClipRRect (
360- borderRadius: BorderRadius .circular (4 ),
361- child: LinearProgressIndicator (
362- value: (_currentStep + 1 ) / 3 ,
363- minHeight: 4 ,
364- backgroundColor: Theme .of (context).colorScheme.surfaceContainerHighest,
365- valueColor:
366- AlwaysStoppedAnimation <Color >(Theme .of (context).colorScheme.primary),
359+ Semantics (
360+ label: 'Step ${_currentStep + 1 } of 3: ${_stepTitle ()}' ,
361+ value: '${((_currentStep + 1 ) / 3 * 100 ).round ()} percent complete' ,
362+ child: ClipRRect (
363+ borderRadius: BorderRadius .circular (4 ),
364+ child: LinearProgressIndicator (
365+ value: (_currentStep + 1 ) / 3 ,
366+ minHeight: 4 ,
367+ backgroundColor: Theme .of (context).colorScheme.surfaceContainerHighest,
368+ valueColor:
369+ AlwaysStoppedAnimation <Color >(Theme .of (context).colorScheme.primary),
370+ ),
367371 ),
368372 ),
369373 ],
@@ -435,50 +439,58 @@ class _AddPetScreenState extends ConsumerState<AddPetScreen>
435439 final option = _animalOptions[index];
436440 final isSelected = _selectedAnimalType == option.label;
437441 final optionColor = Theme .of (context).colorScheme.primary;
438- return GestureDetector (
442+ return Semantics (
443+ button: true ,
444+ selected: isSelected,
445+ label: option.label,
439446 onTap: () => setState (() => _selectedAnimalType = option.label),
440- child: AnimatedContainer (
441- duration: const Duration (milliseconds: 250 ),
442- curve: Curves .easeOut,
443- decoration: BoxDecoration (
444- color: isSelected
445- ? optionColor.withAlpha (26 )
446- : Theme .of (context).colorScheme.surfaceContainerHigh,
447- borderRadius: BorderRadius .circular (20 ),
448- border: Border .all (
449- color: isSelected ? optionColor : Theme .of (context).colorScheme.onSurfaceVariant,
450- width: isSelected ? 2.5 : 1 ,
451- ),
452- boxShadow: isSelected
453- ? [
454- BoxShadow (
455- color: optionColor.withAlpha (51 ),
456- blurRadius: 12 ,
457- offset: const Offset (0 , 4 ),
458- )
459- ]
460- : [],
461- ),
462- child: Column (
463- mainAxisAlignment: MainAxisAlignment .center,
464- children: [
465- Icon (
466- option.icon,
467- size: 36 ,
468- color: isSelected ? optionColor : Theme .of (context).colorScheme.onSurfaceVariant,
469- ),
470- const SizedBox (height: 8 ),
471- Text (
472- option.label,
473- style: TextStyle (
474- fontSize: 15 ,
475- fontWeight:
476- isSelected ? FontWeight .bold : FontWeight .w500,
477- color:
478- isSelected ? optionColor : Theme .of (context).colorScheme.onSurfaceVariant,
447+ child: ExcludeSemantics (
448+ child: GestureDetector (
449+ onTap: () => setState (() => _selectedAnimalType = option.label),
450+ child: AnimatedContainer (
451+ duration: const Duration (milliseconds: 250 ),
452+ curve: Curves .easeOut,
453+ decoration: BoxDecoration (
454+ color: isSelected
455+ ? optionColor.withAlpha (26 )
456+ : Theme .of (context).colorScheme.surfaceContainerHigh,
457+ borderRadius: BorderRadius .circular (20 ),
458+ border: Border .all (
459+ color: isSelected ? optionColor : Theme .of (context).colorScheme.onSurfaceVariant,
460+ width: isSelected ? 2.5 : 1 ,
479461 ),
462+ boxShadow: isSelected
463+ ? [
464+ BoxShadow (
465+ color: optionColor.withAlpha (51 ),
466+ blurRadius: 12 ,
467+ offset: const Offset (0 , 4 ),
468+ )
469+ ]
470+ : [],
480471 ),
481- ],
472+ child: Column (
473+ mainAxisAlignment: MainAxisAlignment .center,
474+ children: [
475+ Icon (
476+ option.icon,
477+ size: 36 ,
478+ color: isSelected ? optionColor : Theme .of (context).colorScheme.onSurfaceVariant,
479+ ),
480+ const SizedBox (height: 8 ),
481+ Text (
482+ option.label,
483+ style: TextStyle (
484+ fontSize: 15 ,
485+ fontWeight:
486+ isSelected ? FontWeight .bold : FontWeight .w500,
487+ color:
488+ isSelected ? optionColor : Theme .of (context).colorScheme.onSurfaceVariant,
489+ ),
490+ ),
491+ ],
492+ ),
493+ ),
482494 ),
483495 ),
484496 );
0 commit comments