imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

30
res/css/_common.scss
View file

@ -423,9 +423,9 @@ legend {
* We should go through and have one consistent set of styles for buttons throughout the app.
* For now, I am duplicating the selectors here for mx_Dialog and mx_DialogButtons.
*/
.mx_Dialog button:not(.mx_Dialog_nonDialogButton),
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
.mx_Dialog input[type="submit"],
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton),
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
.mx_Dialog_buttons input[type="submit"] {
@mixin mx_DialogButton;
margin-left: 0px;
@ -440,20 +440,20 @@ legend {
font-family: inherit;
}
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):last-child {
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):last-child {
margin-right: 0px;
}
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):hover,
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):hover,
.mx_Dialog input[type="submit"]:hover,
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):hover,
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):hover,
.mx_Dialog_buttons input[type="submit"]:hover {
@mixin mx_DialogButton_hover;
}
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):focus,
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):focus,
.mx_Dialog input[type="submit"]:focus,
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):focus,
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):focus,
.mx_Dialog_buttons input[type="submit"]:focus {
filter: brightness($focus-brightness);
}
@ -482,9 +482,9 @@ legend {
color: $alert;
}
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):disabled,
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):disabled,
.mx_Dialog input[type="submit"]:disabled,
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):disabled,
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):disabled,
.mx_Dialog_buttons input[type="submit"]:disabled {
background-color: $light-fg-color;
border: solid 1px $light-fg-color;
@ -655,3 +655,15 @@ legend {
outline-style: auto;
}
}
@define-mixin ButtonResetDefault {
appearance: none;
background: none;
border: none;
padding: 0;
margin: 0;
font-size: inherit;
font-family: inherit;
line-height: inherit;
cursor: pointer;
}

9
res/css/structures/auth/_SetupEncryptionBody.scss
View file

@ -17,8 +17,9 @@ limitations under the License.
.mx_SetupEncryptionBody_reset {
color: $light-fg-color;
margin-top: $font-14px;
a.mx_SetupEncryptionBody_reset_link:is(:link, :hover, :visited) {
color: $alert;
}
}
.mx_SetupEncryptionBody_reset_link {
@mixin ButtonResetDefault;
color: $alert;
}

7
res/css/views/dialogs/_DevtoolsDialog.scss
View file

@ -257,3 +257,10 @@ limitations under the License.
margin-bottom: 8px;
}
}
.mx_DevTools_SettingsExplorer_setting {
// override default link button color
// as it is the same as the background highlight
// used on focus
color: $links !important;
}

10
res/css/views/elements/_AccessibleButton.scss
View file

@ -107,6 +107,16 @@ limitations under the License.
opacity: 0.4;
}
.mx_AccessibleButton_kind_link_inline {
color: $accent;
font-size: inherit;
padding: 0 2px;
}
.mx_AccessibleButton_kind_link_inline.mx_AccessibleButton_disabled {
opacity: 0.4;
}
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link_sm {
padding: 5px 12px;
color: $accent;

7
res/css/views/elements/_ReplyChain.scss
View file

@ -24,7 +24,12 @@ limitations under the License.
border-radius: 2px;
.mx_ReplyChain_show {
cursor: pointer;
@mixin ButtonResetDefault;
color: inherit;
&:hover {
color: $links;
}
}
&.mx_ReplyChain_color1 {

6
res/css/views/messages/_ReactionsRow.scss
View file

@ -57,15 +57,13 @@ limitations under the License.
}
.mx_ReactionsRow_showAll {
@mixin ButtonResetDefault;
text-decoration: none;
font-size: $font-12px;
line-height: $font-20px;
margin-left: 4px;
vertical-align: middle;
&:link, &:visited {
color: $tertiary-content;
}
color: $tertiary-content;
&:hover {
color: $primary-content;

7
res/css/views/messages/_ViewSourceEvent.scss
View file

@ -18,6 +18,7 @@ limitations under the License.
display: flex;
opacity: 0.6;
font-size: $font-12px;
width: 100%;
pre, code {
flex: 1;
@ -29,11 +30,15 @@ limitations under the License.
}
.mx_ViewSourceEvent_toggle {
visibility: hidden;
// override styles from AccessibleButton
border-radius: 0;
padding: 0;
// icon
mask-repeat: no-repeat;
mask-position: 0 center;
mask-size: auto 12px;
width: 12px;
visibility: hidden;
background-color: $accent;
mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
}

3
res/css/views/rooms/_EventTile.scss
View file

@ -607,7 +607,8 @@ $left-gutter: 64px;
opacity: 0.5;
}
.mx_EventTile_keyRequestInfo_text a {
.mx_EventTile_keyRequestInfo_text .mx_AccessibleButton {
@mixin ButtonResetDefault;
color: $primary-content;
text-decoration: underline;
cursor: pointer;