From dfd7525eeced02d68043478e3e5b7b70eaa3ca1c Mon Sep 17 00:00:00 2001
From: Malaber <git@schaedler.rocks>
Date: Mon, 17 Mar 2025 15:34:03 +0100
Subject: [PATCH]  Button only focussable with keyboard

---
 js/components/GroupStage.js      | 4 ++--
 public/static/css/tournament.css | 6 ++++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/js/components/GroupStage.js b/js/components/GroupStage.js
index 51c5614..26b37b5 100644
--- a/js/components/GroupStage.js
+++ b/js/components/GroupStage.js
@@ -4,7 +4,7 @@ import React, {Component} from 'react';
 import {getGroup} from '../redux/tournamentApi';
 import {notify} from 'react-notify-toast';
 import {sortMatchesByPositionAscending} from '../utils/sorting';
-import {FaChevronDown, FaChevronUp} from 'react-icons/fa6';
+import {FaChevronDown} from 'react-icons/fa6';
 
 export default class GroupStage extends Component {
     constructor(props) {
@@ -42,7 +42,7 @@ function ShowMatchesToggleChevron(props) {
         <Button
             color='link'
             onClick={props.toggle}
-            className='position-absolute top-0 end-0 m-2'
+            className='position-absolute top-0 end-0 m-2 button-no-focus'
         >
             <FaChevronDown className={`my-chevron ${toggleClass}`} />
         </Button>
diff --git a/public/static/css/tournament.css b/public/static/css/tournament.css
index b377cdc..b145445 100644
--- a/public/static/css/tournament.css
+++ b/public/static/css/tournament.css
@@ -59,7 +59,13 @@
 
 .my-chevron {
     transition: transform 0.3s ease;
+    color: gray;
 }
 .my-chevron.rotate {
     transform: rotate(180deg);
 }
+.button-no-focus:focus:not(:focus-visible),
+.button-no-focus:active {
+    outline: none !important;
+    box-shadow: none !important;
+}
\ No newline at end of file