fix(accessibility): improve screen reader feedback for playback controls (#763)

- Added semantic labels for play, pause, next, previous, shuffle, and repeat buttons.
- Implemented semanticFormatterCallback in PositionSlider for time-based feedback.
- Added tooltips to playback controls for better TalkBack navigation.
- Increased tap target size for PlaybackIconButton to improve touch accessibility.

Author: elias001011

lib/localization/app_en.arb

@@ -122,6 +122,7 @@
   "lyricsNotAvailable": "Lyrics not available",
   "makeOffline": "Make available offline",
   "minutes": "Minutes",
+  "moreOptions": "More options",
   "mostPlayed": "Most played",
   "moveToFolder": "Move to folder",
   "name": "Name",
@@ -138,8 +139,11 @@
   "offlinePlaylists": "Offline playlists",
   "offlineSongs": "Offline songs",
   "others": "Others",
+  "pause": "Pause",
   "pickImageFromDevice": "Pick image from device",
+  "play": "Play",
   "playNext": "Play next",
+  "playbackProgress": "Playback progress",
   "playlist": "Playlist",
   "playlistAlreadyDownloaded": "Playlist already downloaded",
   "playlistAlreadyExists": "Playlist already exists",
@@ -170,6 +174,7 @@
   "removeSearchQueryQuestion": "Are you sure you want to remove this search query?",
   "removedFromLikedSongs": "Removed from liked songs",
   "renameSong": "Rename song",
+  "repeat": "Repeat",
   "restoreError": "Error restoring data",
   "restoreUserData": "Restore user data",
   "restoredSuccess": "Data restored successfully",
@@ -180,6 +185,9 @@
   "setTimer": "Set timer",
   "settingChangedMsg": "Settings updated successfully",
   "settings": "Settings",
+  "shuffle": "Shuffle",
+  "skipToNext": "Skip to next",
+  "skipToPrevious": "Skip to previous",
   "sleepTimerCancelled": "Sleep timer cancelled",
   "sleepTimerSet": "Sleep timer set",
   "songAdded": "Song added",

lib/widgets/now_playing/now_playing_controls.dart

@@ -22,6 +22,7 @@
 import 'package:audio_service/audio_service.dart';
 import 'package:fluentui_system_icons/fluentui_system_icons.dart';
 import 'package:flutter/material.dart';
+import 'package:musify/extensions/l10n.dart';
 import 'package:musify/main.dart';
 import 'package:musify/services/settings_manager.dart';
 import 'package:musify/utilities/utils.dart';
@@ -205,6 +206,7 @@ class PlayerControlButtons extends StatelessWidget {
           child: Row(
             children: <Widget>[
               _buildShuffleButton(
+                context,
                 colorScheme,
                 miniControlSize,
                 buttonConstraints,
@@ -233,6 +235,7 @@ class PlayerControlButtons extends StatelessWidget {
                                             alpha: 0.3,
                                           ),
                                   ),
+                                  tooltip: context.l10n!.skipToPrevious,
                                   constraints: buttonConstraints,
                                   iconSize: controlIconSize * 0.65,
                                   onPressed: audioHandler.hasPrevious
@@ -270,6 +273,7 @@ class PlayerControlButtons extends StatelessWidget {
                                             alpha: 0.3,
                                           ),
                                   ),
+                                  tooltip: context.l10n!.skipToNext,
                                   constraints: buttonConstraints,
                                   iconSize: controlIconSize * 0.65,
                                   onPressed: () =>
@@ -303,6 +307,7 @@ class PlayerControlButtons extends StatelessWidget {
               ),
               SizedBox(width: buttonSpacing),
               _buildRepeatButton(
+                context,
                 colorScheme,
                 miniControlSize,
                 buttonConstraints,
@@ -316,6 +321,7 @@ class PlayerControlButtons extends StatelessWidget {
   }
 
   Widget _buildShuffleButton(
+    BuildContext context,
     ColorScheme colorScheme,
     double size,
     BoxConstraints buttonConstraints,
@@ -331,6 +337,7 @@ class PlayerControlButtons extends StatelessWidget {
                 : FluentIcons.arrow_shuffle_off_24_filled,
             color: value ? colorScheme.onPrimary : colorScheme.onSurfaceVariant,
           ),
+          tooltip: context.l10n!.shuffle,
           iconSize: size,
           constraints: buttonConstraints,
           padding: buttonPadding,
@@ -355,6 +362,7 @@ class PlayerControlButtons extends StatelessWidget {
   }
 
   Widget _buildRepeatButton(
+    BuildContext context,
     ColorScheme colorScheme,
     double size,
     BoxConstraints buttonConstraints,
@@ -380,6 +388,7 @@ class PlayerControlButtons extends StatelessWidget {
                     ? colorScheme.onPrimary
                     : colorScheme.onSurfaceVariant,
               ),
+              tooltip: context.l10n!.repeat,
               iconSize: size,
               constraints: buttonConstraints,
               padding: buttonPadding,

lib/widgets/playback_icon_button.dart

@@ -22,6 +22,7 @@
 import 'package:audio_service/audio_service.dart';
 import 'package:fluentui_system_icons/fluentui_system_icons.dart';
 import 'package:flutter/material.dart';
+import 'package:musify/extensions/l10n.dart';
 import 'package:musify/main.dart';
 
 Widget buildPlaybackIconButton(
@@ -43,6 +44,7 @@ Widget buildPlaybackIconButton(
 
       Widget iconWidget;
       VoidCallback? onPressed;
+      String? semanticLabel;
 
       if (processingState == AudioProcessingState.loading ||
           processingState == AudioProcessingState.buffering) {
@@ -62,13 +64,15 @@ Widget buildPlaybackIconButton(
           size: iconSize,
         );
         onPressed = () => audioHandler.seek(Duration.zero);
+        semanticLabel = context.l10n!.play;
       } else {
         iconWidget = Icon(
           isPlaying ? FluentIcons.pause_24_filled : FluentIcons.play_24_filled,
           color: iconColor,
           size: iconSize,
         );
         onPressed = isPlaying ? audioHandler.pause : audioHandler.play;
+        semanticLabel = isPlaying ? context.l10n!.pause : context.l10n!.play;
       }
 
       return RawMaterialButton(
@@ -78,7 +82,16 @@ Widget buildPlaybackIconButton(
         splashColor: Colors.transparent,
         padding: padding ?? EdgeInsets.all(iconSize * 0.35),
         shape: const CircleBorder(),
-        child: iconWidget,
+        constraints: BoxConstraints.tightFor(
+          width: iconSize * 2,
+          height: iconSize * 2,
+        ),
+        materialTapTargetSize: MaterialTapTargetSize.padded,
+        child: Semantics(
+          label: semanticLabel,
+          button: true,
+          child: iconWidget,
+        ),
       );
     },
   );

lib/widgets/position_slider.dart

@@ -20,6 +20,7 @@
  */
 
 import 'package:flutter/material.dart';
+import 'package:musify/extensions/l10n.dart';
 import 'package:musify/main.dart';
 import 'package:musify/models/position_data.dart';
 import 'package:musify/utilities/formatter.dart';
@@ -77,6 +78,9 @@ class _PositionSliderState extends State<PositionSlider> {
                     }
                   : null,
               max: maxDuration,
+              label: formatDuration(currentValue.toInt()),
+              semanticFormatterCallback: (value) =>
+                  formatDuration(value.toInt()),
             ),
             _buildPositionRow(context, primaryColor, positionData),
           ],