granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix raid keyboard navigation

Browse source 
* We added a plain "raid" style that our keyboard navigation code can hook onto, so that you can navigate the RaidCombobox raid list with the up and down arrow keys
* Fixed the raid item background color when hovering or focused
* Removed unused code
This commit is contained in:
Justin Edmund 2023-07-02 02:35:53 -07:00
parent faf4eb9943
commit e4ad92d630
4 changed files with 6 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
components/raids/RaidCombobox/index.module.scss
View file

@ -214,21 +214,3 @@
.raid.light { .raid.light {
color: var(--light-text); color: var(--light-text);
} }
.SelectTrigger.Raid:not(.Highlighted) .Value.Empty {
color: var(--text-tertiary);
}
.Filters .SelectTrigger.Raid {
& > span {
overflow: hidden;
}
.Raid {
display: block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 100%;
}
}

8
components/raids/RaidCombobox/index.tsx
View file

@ -165,7 +165,7 @@ const RaidCombobox = (props: Props) => {
const handleArrowKeyPressed = useCallback( const handleArrowKeyPressed = useCallback(
(direction: 'Up' | 'Down') => { (direction: 'Up' | 'Down') => {
const current = listRef.current?.querySelector( const current = listRef.current?.querySelector(
'.Raid:focus' '.raid:focus'
) as HTMLElement | null ) as HTMLElement | null
if (current) { if (current) {
@ -174,11 +174,11 @@ const RaidCombobox = (props: Props) => {
if (direction === 'Down' && !current.nextElementSibling) { if (direction === 'Down' && !current.nextElementSibling) {
const nextParent = const nextParent =
current.parentElement?.parentElement?.nextElementSibling current.parentElement?.parentElement?.nextElementSibling
next = nextParent?.querySelector('.Raid') next = nextParent?.querySelector('.raid')
} else if (direction === 'Up' && !current.previousElementSibling) { } else if (direction === 'Up' && !current.previousElementSibling) {
const previousParent = const previousParent =
current.parentElement?.parentElement?.previousElementSibling current.parentElement?.parentElement?.previousElementSibling
next = previousParent?.querySelector('.Raid:last-child') next = previousParent?.querySelector('.raid:last-child')
} else { } else {
next = next =
direction === 'Up' direction === 'Up'
@ -259,7 +259,7 @@ const RaidCombobox = (props: Props) => {
else if (event.key === 'Enter') { else if (event.key === 'Enter') {
event.preventDefault() event.preventDefault()
if (listRef.current) { if (listRef.current) {
const raid = listRef.current.querySelector('.Raid') const raid = listRef.current.querySelector('.raid')
if (raid) { if (raid) {
;(raid as HTMLElement).focus() ;(raid as HTMLElement).focus()
} }

2
components/raids/RaidItem/index.module.scss
View file

@ -10,7 +10,7 @@
&:hover, &:hover,
&:focus { &:focus {
background-color: var(--option-bg-hover); background-color: var(--menu-bg-item-hover);
color: var(--text-primary); color: var(--text-primary);
cursor: pointer; cursor: pointer;
outline: none; outline: none;

1
components/raids/RaidItem/index.tsx
View file

@ -36,6 +36,7 @@ const RaidItem = React.forwardRef<HTMLDivElement, PropsWithChildren<Props>>(
const { t } = useTranslation('common') const { t } = useTranslation('common')
const classes = classNames({ const classes = classNames({
raid: true,
[styles.item]: true, [styles.item]: true,
}) })