Improved a11y for Field feedback and Secure Phrase input (#10320)

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Sebbones 2023-03-08 12:32:50 +01:00 committed by GitHub
parent f60f7a19af
commit 0c1c3f1cde
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 78 additions and 3 deletions

View file

@ -63,6 +63,7 @@ interface IState {
*/
export default class AccessSecretStorageDialog extends React.PureComponent<IProps, IState> {
private fileUpload = React.createRef<HTMLInputElement>();
private inputRef = React.createRef<HTMLInputElement>();
public constructor(props: IProps) {
super(props);
@ -178,7 +179,10 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
private onPassPhraseNext = async (ev: FormEvent<HTMLFormElement> | React.MouseEvent): Promise<void> => {
ev.preventDefault();
if (this.state.passPhrase.length <= 0) return;
if (this.state.passPhrase.length <= 0) {
this.inputRef.current?.focus();
return;
}
this.setState({ keyMatches: null });
const input = { passphrase: this.state.passPhrase };
@ -187,6 +191,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
this.props.onFinished(input);
} else {
this.setState({ keyMatches });
this.inputRef.current?.focus();
}
};
@ -351,6 +356,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
<form className="mx_AccessSecretStorageDialog_primaryContainer" onSubmit={this.onPassPhraseNext}>
<Field
inputRef={this.inputRef}
id="mx_passPhraseInput"
className="mx_AccessSecretStorageDialog_passPhraseInput"
type="password"