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

@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { useState, useEffect, ChangeEvent, MouseEvent } from 'react';
import React, { useState, useEffect, ChangeEvent } from 'react';
import {
PHASE_UNSENT,
PHASE_REQUESTED,
@ -44,6 +44,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
import { SettingLevel } from '../../../settings/SettingLevel';
import BaseDialog from "./BaseDialog";
import TruncatedList from "../elements/TruncatedList";
import AccessibleButton, { ButtonEvent } from '../elements/AccessibleButton';
interface IGenericEditorProps {
onBack: () => void;
@ -965,12 +966,12 @@ class SettingsExplorer extends React.PureComponent<IExplorerProps, ISettingsExpl
}
};
private onViewClick = (ev: MouseEvent, settingId: string) => {
private onViewClick = (ev: ButtonEvent, settingId: string) => {
ev.preventDefault();
this.setState({ viewSetting: settingId });
};
private onEditClick = (ev: MouseEvent, settingId: string) => {
private onEditClick = (ev: ButtonEvent, settingId: string) => {
ev.preventDefault();
this.setState({
editSetting: settingId,
@ -1078,16 +1079,16 @@ class SettingsExplorer extends React.PureComponent<IExplorerProps, ISettingsExpl
{ allSettings.map(i => (
<tr key={i}>
<td>
<a href="" onClick={(e) => this.onViewClick(e, i)}>
<AccessibleButton kind='link_inline' className='mx_DevTools_SettingsExplorer_setting' onClick={(e) => this.onViewClick(e, i)}>
<code>{ i }</code>
</a>
<a
href=""
</AccessibleButton>
<AccessibleButton
alt={_t('Edit setting')}
onClick={(e) => this.onEditClick(e, i)}
className='mx_DevTools_SettingsExplorer_edit'
>
</a>
</AccessibleButton>
</td>
<td>
<code>{ this.renderSettingValue(SettingsStore.getValue(i)) }</code>