From 65edf59d1796a37a70a1bf9209823c4474a38e8c Mon Sep 17 00:00:00 2001
From: kKaskak <117831817+kKaskak@users.noreply.github.com>
Date: Mon, 25 Mar 2024 20:29:04 +0200
Subject: [PATCH 1/2] fix: remaining time tabindex

---
 src/common/Button/Button.js                     | 5 +++--
 src/routes/Player/ControlBar/SeekBar/SeekBar.js | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/common/Button/Button.js b/src/common/Button/Button.js
index 9d5ef7c1e..eca34883d 100644
--- a/src/common/Button/Button.js
+++ b/src/common/Button/Button.js
@@ -6,7 +6,7 @@ const classnames = require('classnames');
 const styles = require('./styles');
 const { useLongPress } = require('use-long-press');
 
-const Button = React.forwardRef(({ className, href, disabled, children, onLongPress, ...props }, ref) => {
+const Button = React.forwardRef(({ className, href, disabled, children, onLongPress, tabIndex, ...props }, ref) => {
     const longPress = useLongPress(onLongPress, { detect: 'pointer' });
     const onKeyDown = React.useCallback((event) => {
         if (typeof props.onKeyDown === 'function') {
@@ -35,7 +35,7 @@ const Button = React.forwardRef(({ className, href, disabled, children, onLongPr
     return React.createElement(
         typeof href === 'string' && href.length > 0 ? 'a' : 'div',
         {
-            tabIndex: 0,
+            tabIndex: tabIndex ?? 0,
             ...props,
             ref,
             className: classnames(className, styles['button-container'], { 'disabled': disabled }),
@@ -53,6 +53,7 @@ Button.displayName = 'Button';
 Button.propTypes = {
     className: PropTypes.string,
     href: PropTypes.string,
+    tabIndex: PropTypes.number,
     disabled: PropTypes.bool,
     children: PropTypes.node,
     onKeyDown: PropTypes.func,
diff --git a/src/routes/Player/ControlBar/SeekBar/SeekBar.js b/src/routes/Player/ControlBar/SeekBar/SeekBar.js
index 0fcb7423e..7a58aa0a2 100644
--- a/src/routes/Player/ControlBar/SeekBar/SeekBar.js
+++ b/src/routes/Player/ControlBar/SeekBar/SeekBar.js
@@ -58,7 +58,7 @@ const SeekBar = ({ className, time, duration, buffered, onSeekRequested }) => {
                 onSlide={onSlide}
                 onComplete={onComplete}
             />
-            <Button onClick={toggleRemainingTimeMode}>
+            <Button onClick={toggleRemainingTimeMode} tabIndex={-1}>
                 <div className={styles['label']}>
                     {remainingTimeMode && duration !== null && !isNaN(duration)
                         ? formatTime(duration - time, '-')

From 2ce0eea2221863c17ca34727d8c7c034e0473520 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Thu, 28 Mar 2024 05:39:50 +0100
Subject: [PATCH 2/2] refactor(Button): revert tabIndex changes

---
 src/common/Button/Button.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/common/Button/Button.js b/src/common/Button/Button.js
index eca34883d..9d5ef7c1e 100644
--- a/src/common/Button/Button.js
+++ b/src/common/Button/Button.js
@@ -6,7 +6,7 @@ const classnames = require('classnames');
 const styles = require('./styles');
 const { useLongPress } = require('use-long-press');
 
-const Button = React.forwardRef(({ className, href, disabled, children, onLongPress, tabIndex, ...props }, ref) => {
+const Button = React.forwardRef(({ className, href, disabled, children, onLongPress, ...props }, ref) => {
     const longPress = useLongPress(onLongPress, { detect: 'pointer' });
     const onKeyDown = React.useCallback((event) => {
         if (typeof props.onKeyDown === 'function') {
@@ -35,7 +35,7 @@ const Button = React.forwardRef(({ className, href, disabled, children, onLongPr
     return React.createElement(
         typeof href === 'string' && href.length > 0 ? 'a' : 'div',
         {
-            tabIndex: tabIndex ?? 0,
+            tabIndex: 0,
             ...props,
             ref,
             className: classnames(className, styles['button-container'], { 'disabled': disabled }),
@@ -53,7 +53,6 @@ Button.displayName = 'Button';
 Button.propTypes = {
     className: PropTypes.string,
     href: PropTypes.string,
-    tabIndex: PropTypes.number,
     disabled: PropTypes.bool,
     children: PropTypes.node,
     onKeyDown: PropTypes.func,