FEAT: Update AudioTrack functionality on mobile/tablet

[Yura33-dev]

Description

Button in AudioTrack component turn ON/OFF music when you press entire area of component at mobile and tablets. Functionality of component at desktop has not been changed.

Changes Made

• Added additional styles for playToggle element in AudioTrack.module.css to make entire area clickable for tablets and mobile devices
• Provided playToggle element with aria-label to improve accessibility
• Ensured playToggle element is accessible with a keyboard

[netlify[bot]]

✅ Deploy Preview for one-fall ready!

Name	Link
🔨 Latest commit	52259f2ead015a23c71c4d9fa2d20aa891024a12
🔍 Latest deploy log	https://app.netlify.com/sites/one-fall/deploys/6670e3123622910007e89625
😎 Deploy Preview	https://deploy-preview-7--one-fall.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[naumch1k]

@Yura33-dev 👋 Thank you for improving keyboard accessibility by removing display: none; from the play toggle, which now allows our users to start and pause audio playback with the keyboard.

While testing of your changes, I found an issue where the :focus-within behavior was conflicting with hover effects. Specifically, after clicking to play an audio track and moving the cursor away, the AudioTrack element remained in focus, preventing the equalizer from appearing until clicking elsewhere to remove focus.

https://github.com/naumch1k/one-fall/assets/76534205/8a4cfd94-eb56-4d3d-b49d-1a81424476f5

To resolve this, I adjusted how we target the AudioTrack element when dealing with focus. Rather than targeting the root element itself, I selected the root element that has a play toggle with focus as a child. This allowed me to replace :focus-within instead of :focus-visible, ensuring our elements behave as intended.

.root:has(.playToggle:focus-visible) .number {
  ...
}

Would you please test my changes to see if I didn't miss anything? If all is well and you are OK with my changes, I believe we are ready to merge 🚀

[Yura33-dev]

@naumch1k Yes, totally agree with yours changes. Now it looks pretty good. Let`s merge it!)

[naumch1k]

@Yura33-dev Done!