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
GitHub
parent
2b9eed5357
commit
fed53a268b
39 changed files with 251 additions and 109 deletions
|
|
@ -37,6 +37,7 @@ import AddressSelector from '../elements/AddressSelector';
|
|||
import AddressTile from '../elements/AddressTile';
|
||||
import BaseDialog from "./BaseDialog";
|
||||
import DialogButtons from "../elements/DialogButtons";
|
||||
import AccessibleButton from '../elements/AccessibleButton';
|
||||
|
||||
const TRUNCATE_QUERY_LIST = 40;
|
||||
const QUERY_USER_DIRECTORY_DEBOUNCE_MS = 200;
|
||||
|
|
@ -712,8 +713,14 @@ export default class AddressPickerDialog extends React.Component<IProps, IState>
|
|||
defaultIdentityServerName: abbreviateUrl(defaultIdentityServerUrl),
|
||||
},
|
||||
{
|
||||
default: sub => <a href="#" onClick={this.onUseDefaultIdentityServerClick}>{ sub }</a>,
|
||||
settings: sub => <a href="#" onClick={this.onManageSettingsClick}>{ sub }</a>,
|
||||
default: sub => (
|
||||
<AccessibleButton kind="link_inline" onClick={this.onUseDefaultIdentityServerClick}>
|
||||
{ sub }
|
||||
</AccessibleButton>
|
||||
),
|
||||
settings: sub => <AccessibleButton kind="link_inline" onClick={this.onManageSettingsClick}>
|
||||
{ sub }
|
||||
</AccessibleButton>,
|
||||
},
|
||||
) }</div>;
|
||||
} else {
|
||||
|
|
@ -721,7 +728,9 @@ export default class AddressPickerDialog extends React.Component<IProps, IState>
|
|||
"Use an identity server to invite by email. " +
|
||||
"Manage in <settings>Settings</settings>.",
|
||||
{}, {
|
||||
settings: sub => <a href="#" onClick={this.onManageSettingsClick}>{ sub }</a>,
|
||||
settings: sub => <AccessibleButton kind="link_inline" onClick={this.onManageSettingsClick}>
|
||||
{ sub }
|
||||
</AccessibleButton>,
|
||||
},
|
||||
) }</div>;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1255,8 +1255,14 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
|
|||
defaultIdentityServerName: abbreviateUrl(defaultIdentityServerUrl),
|
||||
},
|
||||
{
|
||||
default: sub => <a href="#" onClick={this.onUseDefaultIdentityServerClick}>{ sub }</a>,
|
||||
settings: sub => <a href="#" onClick={this.onManageSettingsClick}>{ sub }</a>,
|
||||
default: sub =>
|
||||
<AccessibleButton kind='link_inline' onClick={this.onUseDefaultIdentityServerClick}>
|
||||
{ sub }
|
||||
</AccessibleButton>,
|
||||
settings: sub =>
|
||||
<AccessibleButton kind='link_inline' onClick={this.onManageSettingsClick}>
|
||||
{ sub }
|
||||
</AccessibleButton>,
|
||||
},
|
||||
) }</div>
|
||||
);
|
||||
|
|
@ -1266,7 +1272,10 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
|
|||
"Use an identity server to invite by email. " +
|
||||
"Manage in <settings>Settings</settings>.",
|
||||
{}, {
|
||||
settings: sub => <a href="#" onClick={this.onManageSettingsClick}>{ sub }</a>,
|
||||
settings: sub =>
|
||||
<AccessibleButton kind='link_inline' onClick={this.onManageSettingsClick}>
|
||||
{ sub }
|
||||
</AccessibleButton>,
|
||||
},
|
||||
) }</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ import BugReportDialog from './BugReportDialog';
|
|||
import BaseDialog from "./BaseDialog";
|
||||
import DialogButtons from "../elements/DialogButtons";
|
||||
import ProgressBar from "../elements/ProgressBar";
|
||||
import AccessibleButton from '../elements/AccessibleButton';
|
||||
|
||||
export interface IFinishedOpts {
|
||||
continue: boolean;
|
||||
|
|
@ -135,7 +136,9 @@ export default class RoomUpgradeWarningDialog extends React.Component<IProps, IS
|
|||
},
|
||||
{
|
||||
"a": (sub) => {
|
||||
return <a href='#' onClick={this.openBugReportDialog}>{ sub }</a>;
|
||||
return <AccessibleButton kind='link_inline' onClick={this.openBugReportDialog}>
|
||||
{ sub }
|
||||
</AccessibleButton>;
|
||||
},
|
||||
},
|
||||
) }
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ import BaseDialog from "./BaseDialog";
|
|||
import DialogButtons from "../elements/DialogButtons";
|
||||
import BugReportDialog from "./BugReportDialog";
|
||||
import { IDialogProps } from "./IDialogProps";
|
||||
import AccessibleButton from '../elements/AccessibleButton';
|
||||
|
||||
interface IProps extends IDialogProps { }
|
||||
|
||||
|
|
@ -45,7 +46,9 @@ export default class StorageEvictedDialog extends React.Component<IProps> {
|
|||
"To help us prevent this in future, please <a>send us logs</a>.",
|
||||
{},
|
||||
{
|
||||
a: text => <a href="#" onClick={this.sendBugReport}>{ text }</a>,
|
||||
a: text => <AccessibleButton kind='link_inline' onClick={this.sendBugReport}>
|
||||
{ text }
|
||||
</AccessibleButton>,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -287,10 +287,10 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
|
|||
const resetButton = (
|
||||
<div className="mx_AccessSecretStorageDialog_reset">
|
||||
{ _t("Forgotten or lost all recovery methods? <a>Reset all</a>", null, {
|
||||
a: (sub) => <a
|
||||
href=""
|
||||
a: (sub) => <AccessibleButton
|
||||
kind="link_inline"
|
||||
onClick={this.onResetAllClick}
|
||||
className="mx_AccessSecretStorageDialog_reset_link">{ sub }</a>,
|
||||
className="mx_AccessSecretStorageDialog_reset_link">{ sub }</AccessibleButton>,
|
||||
}) }
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue