A11y - fix anchors-as-buttons (#7444)

* add link_inline accessiblebutton variant

* valid anchors in SecurityRoomSettingsTab

Signed-off-by: Kerry Archibald <kerrya@element.io>

* new room intro link button

Signed-off-by: Kerry Archibald <kerrya@element.io>

* replace anchor with button in rerequest encryption keys message

Signed-off-by: Kerry Archibald <kerrya@element.io>

* inline button in UrlPreviewSettings

Signed-off-by: Kerry Archibald <kerrya@element.io>

* ButtonResetDefault mixin

Signed-off-by: Kerry Archibald <kerrya@element.io>

* inline link buttons in TextForEvent

Signed-off-by: Kerry Archibald <kerrya@element.io>

* fix anchors in InviteDialog

Signed-off-by: Kerry Archibald <kerrya@element.io>

* fix anchors in DevToolsDialog

Signed-off-by: Kerry Archibald <kerrya@element.io>

* fix anchors in login/registration/reset pword flows

Signed-off-by: Kerry Archibald <kerrya@element.io>

* fix types after fixing anchors in devtools

Signed-off-by: Kerry Archibald <kerrya@element.io>

* fix anchors in MemberEventListSummary

Signed-off-by: Kerry Archibald <kerrya@element.io>

* fix anchors in ReactionsRow and RoomUpgrade

Signed-off-by: Kerry Archibald <kerrya@element.io>

* fix anchors in ReplyChain

Signed-off-by: Kerry Archibald <kerrya@element.io>

* fix more anchors

Signed-off-by: Kerry Archibald <kerrya@element.io>

* fix anchors in auth comps

* stylelint fixes

Signed-off-by: Kerry Archibald <kerrya@element.io>

* remove ignore of jsx-a11y rule that is not added yet

Signed-off-by: Kerry Archibald <kerrya@element.io>

* devtools style important explainer

Signed-off-by: Kerry Archibald <kerrya@element.io>

* translate button alt in devtools dialog

Signed-off-by: Kerry Archibald <kerrya@element.io>

* AccessibleButton is reactionsrow

Signed-off-by: Kerry Archibald <kerrya@element.io>

* fix viewsourcevent button placement, use AccessibleButton

Signed-off-by: Kerry Archibald <kerrya@element.io>

* use AccessibleButton in EventTile

Signed-off-by: Kerry Archibald <kerrya@element.io>

* unignore jsx-a11y/anchor-is-valid

Signed-off-by: Kerry Archibald <kerrya@element.io>

* fix lint issue in test jsx

Signed-off-by: Kerry Archibald <kerrya@element.io>

* update coment

Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
Kerry 2022-01-07 10:40:53 +01:00 committed by GitHub
parent 2b9eed5357
commit fed53a268b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
39 changed files with 251 additions and 109 deletions

View file

@ -32,6 +32,7 @@ import { Action } from './dispatcher/actions';
import defaultDispatcher from './dispatcher/dispatcher';
import { MatrixClientPeg } from "./MatrixClientPeg";
import { ROOM_SECURITY_TAB } from "./components/views/dialogs/RoomSettingsDialog";
import AccessibleButton from './components/views/elements/AccessibleButton';
import RightPanelStore from './stores/right-panel/RightPanelStore';
// These functions are frequently used just to check whether an event has
@ -229,9 +230,9 @@ function textForJoinRulesEvent(ev: MatrixEvent, allowJSX: boolean): () => string
{ _t('%(senderDisplayName)s changed who can join this room. <a>View settings</a>.', {
senderDisplayName,
}, {
"a": (sub) => <a onClick={onViewJoinRuleSettingsClick}>
"a": (sub) => <AccessibleButton kind='link_inline' onClick={onViewJoinRuleSettingsClick}>
{ sub }
</a>,
</AccessibleButton>,
}) }
</span>;
}
@ -528,13 +529,13 @@ function textForPinnedEvent(event: MatrixEvent, allowJSX: boolean): () => string
{ senderName },
{
"a": (sub) =>
<a onClick={(e) => onPinnedOrUnpinnedMessageClick(messageId, roomId)}>
<AccessibleButton kind='link_inline' onClick={(e) => onPinnedOrUnpinnedMessageClick(messageId, roomId)}>
{ sub }
</a>,
</AccessibleButton>,
"b": (sub) =>
<a onClick={onPinnedMessagesClick}>
<AccessibleButton kind='link_inline' onClick={onPinnedMessagesClick}>
{ sub }
</a>,
</AccessibleButton>,
},
) }
</span>
@ -556,13 +557,13 @@ function textForPinnedEvent(event: MatrixEvent, allowJSX: boolean): () => string
{ senderName },
{
"a": (sub) =>
<a onClick={(e) => onPinnedOrUnpinnedMessageClick(messageId, roomId)}>
<AccessibleButton kind='link_inline' onClick={(e) => onPinnedOrUnpinnedMessageClick(messageId, roomId)}>
{ sub }
</a>,
</AccessibleButton>,
"b": (sub) =>
<a onClick={onPinnedMessagesClick}>
<AccessibleButton kind='link_inline' onClick={onPinnedMessagesClick}>
{ sub }
</a>,
</AccessibleButton>,
},
) }
</span>
@ -578,7 +579,12 @@ function textForPinnedEvent(event: MatrixEvent, allowJSX: boolean): () => string
{ _t(
"%(senderName)s changed the <a>pinned messages</a> for the room.",
{ senderName },
{ "a": (sub) => <a onClick={onPinnedMessagesClick}> { sub } </a> },
{
"a": (sub) =>
<AccessibleButton kind='link_inline' onClick={onPinnedMessagesClick}>
{ sub }
</AccessibleButton>,
},
) }
</span>
);