turniere
/
turniere-frontend
mirror of https://github.com/turniere/turniere-frontend.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Button only focussable with keyboard

This commit is contained in:
Daniel Schädler 2025-03-17 15:34:03 +01:00
parent e23c73594a
commit dfd7525eec
2 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/components/GroupStage.js
View File

@ -4,7 +4,7 @@ import React, {Component} from 'react';
import {getGroup} from '../redux/tournamentApi'; import {getGroup} from '../redux/tournamentApi';
import {notify} from 'react-notify-toast'; import {notify} from 'react-notify-toast';
import {sortMatchesByPositionAscending} from '../utils/sorting'; import {sortMatchesByPositionAscending} from '../utils/sorting';
import {FaChevronDown, FaChevronUp} from 'react-icons/fa6'; import {FaChevronDown} from 'react-icons/fa6';
export default class GroupStage extends Component { export default class GroupStage extends Component {
constructor(props) { constructor(props) {
@ -42,7 +42,7 @@ function ShowMatchesToggleChevron(props) {
<Button <Button
color='link' color='link'
onClick={props.toggle} 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}`} /> <FaChevronDown className={`my-chevron ${toggleClass}`} />
</Button> </Button>

6
public/static/css/tournament.css
View File

@ -59,7 +59,13 @@
.my-chevron { .my-chevron {
transition: transform 0.3s ease; transition: transform 0.3s ease;
color: gray;
} }
.my-chevron.rotate { .my-chevron.rotate {
transform: rotate(180deg); transform: rotate(180deg);
} }
.button-no-focus:focus:not(:focus-visible),
.button-no-focus:active {
outline: none !important;
box-shadow: none !important;
}