mirror of
https://github.com/superseriousbusiness/gotosocial.git
synced 2025-11-22 13:27:29 -06:00
[bugfix/frontend] Fix accessibility/focus issues in settings + web ui
This commit is contained in:
parent
365b575341
commit
bfee7041c0
23 changed files with 380 additions and 152 deletions
|
|
@ -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}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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()}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue