Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unify focus style on miscellaneous elements #962

Merged
merged 3 commits into from
Oct 16, 2023

Conversation

owi92
Copy link
Member

@owi92 owi92 commented Oct 16, 2023

See commit messages.

Closes #663

@github-actions github-actions bot temporarily deployed to test-deployment-pr962 October 16, 2023 08:40 Destroyed
@owi92 owi92 added changelog:user User facing changes area:accessibility Accessibility related issues labels Oct 16, 2023
Copy link
Member

@LukasKalbertodt LukasKalbertodt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thorough PR! Thanks for catching and fixing the bugs like not being able to reach "logout" via tab.

frontend/src/routes/manage/Video/index.tsx Outdated Show resolved Hide resolved
frontend/src/GlobalStyle.tsx Outdated Show resolved Hide resolved
frontend/src/layout/header/UserBox.tsx Outdated Show resolved Hide resolved
Unfortunately, we can't use our focus style everywhere.
There are some special cases where the offset would collide
with `overflow: hidden` and therefore be clipped. So in these
cases, they need a workaround. I had to fiddle around a bit
with paddings and margins, so the enclosed/focused element has some
space between inself and the focus border. Sometimes `outlineOffset`
would work in theory, but then there would be too much space at the
top and bottom and not enough on the sides (subjectively speaking).
The header menus didn't show any focus style because
we didn't specify Tobira's `focus` color for appkit.
I'm not sure why this didn't work before, as the other
"wrapperless" menuitems in language and color menu are
very much tabbable (is that a word?). Anyway this adds
a `div` wrapper with a `tabindex={0}` to make it keyboard
reachable again.
@github-actions github-actions bot temporarily deployed to test-deployment-pr962 October 16, 2023 15:41 Destroyed
Copy link
Member

@LukasKalbertodt LukasKalbertodt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👌

@LukasKalbertodt LukasKalbertodt merged commit a20f886 into elan-ev:master Oct 16, 2023
2 checks passed
@owi92 owi92 deleted the moar-focus-style branch March 4, 2024 16:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area:accessibility Accessibility related issues changelog:user User facing changes
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Inconsistent focus style
2 participants