[bugfix/frontend] Fix accessibility/focus issues in settings + web ui

This commit is contained in:
tobi 2025-04-09 12:56:04 +02:00
commit bfee7041c0
23 changed files with 380 additions and 152 deletions

View file

@ -139,21 +139,24 @@ function ApplicationListEntry({ app, linkTo, backLocation }: ApplicationListEntr
const created = useCreated(app);
const redirectURIs = useRedirectURIs(app);
const onClick = () => {
// When clicking on an app, direct
// to the detail view for that app.
setLocation(linkTo, {
// Store the back location in history so
// the detail view can use it to return to
// this page (including query parameters).
state: { backLocation: backLocation }
});
};
return (
<span
className={`pseudolink application entry`}
aria-label={`${app.name}`}
title={`${app.name}`}
onClick={() => {
// When clicking on an app, direct
// to the detail view for that app.
setLocation(linkTo, {
// Store the back location in history so
// the detail view can use it to return to
// this page (including query parameters).
state: { backLocation: backLocation }
});
}}
onClick={onClick}
onKeyDown={e => e.key === "Enter" && onClick()}
role="link"
tabIndex={0}
>

View file

@ -102,7 +102,6 @@ export default function Export({ exportStats }: { exportStats: AccountExportStat
Following {exportStats.following_count} account{ exportStats.following_count !== 1 && "s" }
</span>
<MutationButton
className="text-cutoff"
label="Download following.csv"
type="button"
onClick={() => exportFollowing()}
@ -116,7 +115,6 @@ export default function Export({ exportStats }: { exportStats: AccountExportStat
Followed by {exportStats.followers_count} account{ exportStats.followers_count !== 1 && "s" }
</span>
<MutationButton
className="text-cutoff"
label="Download followers.csv"
type="button"
onClick={() => exportFollowers()}
@ -130,7 +128,6 @@ export default function Export({ exportStats }: { exportStats: AccountExportStat
Created {exportStats.lists_count} list{ exportStats.lists_count !== 1 && "s" }
</span>
<MutationButton
className="text-cutoff"
label="Download lists.csv"
type="button"
onClick={() => exportLists()}
@ -144,7 +141,6 @@ export default function Export({ exportStats }: { exportStats: AccountExportStat
Blocking {exportStats.blocks_count} account{ exportStats.blocks_count !== 1 && "s" }
</span>
<MutationButton
className="text-cutoff"
label="Download blocks.csv"
type="button"
onClick={() => exportBlocks()}
@ -158,7 +154,6 @@ export default function Export({ exportStats }: { exportStats: AccountExportStat
Muting {exportStats.mutes_count} account{ exportStats.mutes_count !== 1 && "s" }
</span>
<MutationButton
className="text-cutoff"
label="Download mutes.csv"
type="button"
onClick={() => exportMutes()}

View file

@ -174,21 +174,24 @@ function ReqsListEntry({ req, linkTo, backLocation }: ReqsListEntryProps) {
const ourContent = useContent(req.status);
const theirContent = useContent(req.reply);
const onClick = () => {
// When clicking on a request, direct
// to the detail view for that request.
setLocation(linkTo, {
// Store the back location in history so
// the detail view can use it to return to
// this page (including query parameters).
state: { backLocation: backLocation }
});
};
return (
<span
className={`pseudolink entry interaction-request`}
aria-label={label}
title={label}
onClick={() => {
// When clicking on a request, direct
// to the detail view for that request.
setLocation(linkTo, {
// Store the back location in history so
// the detail view can use it to return to
// this page (including query parameters).
state: { backLocation: backLocation }
});
}}
onClick={onClick}
onKeyDown={e => e.key === "Enter" && onClick()}
role="link"
tabIndex={0}
>

View file

@ -167,6 +167,7 @@ function ProfileForm({ data: profile }: ProfileFormProps) {
<MutationButton
className="delete-header-button"
label="Delete header"
tabIndex={0}
disabled={noHeader}
result={deleteHeaderRes}
onClick={(e) => {
@ -179,7 +180,7 @@ function ProfileForm({ data: profile }: ProfileFormProps) {
}}
/>
</fieldset>
<fieldset className="file-input-with-image-description">
<legend>Avatar</legend>
<FileInput
@ -197,6 +198,7 @@ function ProfileForm({ data: profile }: ProfileFormProps) {
<MutationButton
className="delete-avatar-button"
label="Delete avatar"
tabIndex={0}
disabled={noAvatar}
result={deleteAvatarRes}
onClick={(e) => {