Desktop: Accessibility: Add error indication on Note properties #11784
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
laurent22
reviewed
Feb 6, 2025
| @@ -37,6 +37,7 @@ interface State { | |||
| formNote: FormNote; | |||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied | |||
| editedValue: any; | |||
| isValid: Record<string, boolean>; | |||
There was a problem hiding this comment.
Could this be typed more precisely? At the moment it looks like only the location property is supported?
In which case:
isValid: {
location: boolean;
}
| @@ -191,6 +196,17 @@ class NotePropertiesDialog extends React.Component<Props, State> { | |||
| borderColor: theme.dividerColor, | |||
| }; | |||
|
|
|||
| this.styles_.invalidInput = { | |||
| border: '1px solid', | |||
| borderColor: 'red', | |||
There was a problem hiding this comment.
That should come from the theme
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Related to #10795
Summary
Add visual and error information when a invalid input is set to location input on Note Properties
Images
WCAG
3.3.1 Error Identification
3.3.3 Error Suggestion
G83: Providing text descriptions to identify required fields that were not completed
ARIA21: Using Aria-Invalid to Indicate An Error Field
G85: Providing a text description when user input falls outside the required format or values
Tests
I made manual tests
Test 1 - Invalid input
Test 2 - Empty input
Test 3 - Error message is not permanent
Test 4 - Storing value