Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Desktop: Accessibility: Add error indication on Note properties #11784

Open
wants to merge 9 commits into
base: dev
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 61 additions & 2 deletions packages/app-desktop/gui/NotePropertiesDialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,9 @@ interface State {
formNote: FormNote;
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
editedValue: any;
isValid: {
location: boolean;
};
}

const uniqueId = (key: string) => `note-properties-dialog-${key}`;
Expand All @@ -60,13 +63,17 @@ class NotePropertiesDialog extends React.Component<Props, State> {

this.revisionsLink_click = this.revisionsLink_click.bind(this);
this.buttonRow_click = this.buttonRow_click.bind(this);
this.locationOnChange = this.locationOnChange.bind(this);
this.okButton = React.createRef();
this.inputRef = React.createRef();

this.state = {
formNote: null,
editedKey: null,
editedValue: null,
isValid: {
location: true,
},
};

this.keyToLabel_ = {
Expand Down Expand Up @@ -195,6 +202,17 @@ class NotePropertiesDialog extends React.Component<Props, State> {
borderColor: theme.dividerColor,
};

this.styles_.invalidInput = {
border: '1px solid',
borderColor: theme.colorWarn,
};

this.styles_.invalidMessage = {
marginTop: '0.3em',
color: theme.color,
fontSize: theme.fontSize * 0.9,
};

return this.styles_;
}

Expand Down Expand Up @@ -276,6 +294,24 @@ class NotePropertiesDialog extends React.Component<Props, State> {
});
}

public async locationOnChange(event: React.ChangeEvent<HTMLInputElement>) {
this.setState({ editedValue: event.target.value });
if (!event.target.value) {
this.setState({ isValid: { ...this.state.isValid, location: true } });
return;
}

if (event.target.value.includes(',')) {
const [lat, log] = event.target.value.split(',');
if (parseFloat(lat) < 90 && parseFloat(lat) > -90 && parseFloat(log) < 180 && parseFloat(log) > -180) {
this.setState({ isValid: { ...this.state.isValid, location: true } });
return;
}
}

this.setState({ isValid: { ...this.state.isValid, location: false } });
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
public createNoteField(key: keyof FormNote, value: any) {
const styles = this.styles(this.props.themeId);
Expand All @@ -288,8 +324,7 @@ class NotePropertiesDialog extends React.Component<Props, State> {
let editCompIcon = null;
let editComDescription = null;

// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
const onKeyDown = (event: any) => {
const onKeyDown = (event: React.KeyboardEvent) => {
if (event.keyCode === 13) {
void this.saveProperty();
} else if (event.keyCode === 27) {
Expand All @@ -315,6 +350,30 @@ class NotePropertiesDialog extends React.Component<Props, State> {
};
editCompIcon = 'fa-save';
editComDescription = _('Save changes');
} else if (this.state.editedKey === 'location') {
controlComp = (
<React.Fragment>
<input
defaultValue={value}
type="text"
ref={this.inputRef}
onChange={this.locationOnChange}
onKeyDown={event => onKeyDown(event)}
style={this.state.isValid.location ? styles.input : { ...styles.input, ...styles.invalidInput }}
id={uniqueId(key)}
name={uniqueId(key)}
aria-invalid={!this.state.isValid.location}
/>
{
this.state.isValid.location ? null
: <React.Fragment>
<div aria-live='polite' style={styles.invalidMessage}>
{_('Invalid format. E.g.: 48.8581372, 2.2926735')}
</div>
</React.Fragment>
}
</React.Fragment>
);
} else {
controlComp = (
<input
Expand Down