[bugfix] Fixes to tablist, fileinput, checkbox (#4139)

Some fixes to various frontend things:

- Fix signup checkbox being height 0 on webkit - closes https://codeberg.org/superseriousbusiness/gotosocial/issues/4136
- Fix wonky file input on chrome and webkit - closes https://codeberg.org/superseriousbusiness/gotosocial/issues/4138
- Make tablist in interaction policies keyboard accessible with proper left/right + focus handling, see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tablist_role

Reviewed-on: https://codeberg.org/superseriousbusiness/gotosocial/pulls/4139
Co-authored-by: tobi <tobi.smethurst@protonmail.com>
Co-committed-by: tobi <tobi.smethurst@protonmail.com>
This commit is contained in:
tobi
2025-05-06 08:06:52 +00:00
committed by tobi
parent 73aa62581e
commit 4a6b357501
4 changed files with 85 additions and 45 deletions

View File

@ -122,10 +122,6 @@ export function FileInput({ label, field, ...props }: FileInputProps) {
const ref = useRef<HTMLInputElement>(null);
const { onChange, infoComponent } = field;
const id = nanoid();
const onClick = (e) => {
e.preventDefault();
ref.current?.click();
};
return (
<div className="form-field file">
@ -133,11 +129,9 @@ export function FileInput({ label, field, ...props }: FileInputProps) {
className="label-wrapper"
htmlFor={id}
tabIndex={0}
onClick={onClick}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
onClick(e);
ref.current?.click();
}
}}
role="button"