Desktop: Resolves #11621: Accessibility: Add status update after update #11634
+5
−1
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
|
The accessibility tester is failing in CI — it looks like the Error: expect(received).toEqual(expected) // deep equality
- Expected - 1
+ Received + 40
- Array []
+ Array [
+ Object {
+ "description": "Ensure all ARIA attributes have valid values",
+ "help": "ARIA attributes must conform to valid values",
+ "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=playwright",
+ "id": "aria-valid-attr-value",
+ "impact": "critical",
+ "nodes": Array [
+ Object {
+ "all": Array [
+ Object {
+ "data": Array [
+ "aria-controls=\"search-results\"",
+ ],
+ "id": "aria-valid-attr-value",
+ "impact": "critical",
+ "message": "Invalid ARIA attribute value: aria-controls=\"search-results\"",
+ "relatedNodes": Array [],
+ },
+ ],
+ "any": Array [],
+ "failureSummary": "Fix all of the following:
+ Invalid ARIA attribute value: aria-controls=\"search-results\"",
+ "html": "<input type=\"text\" placeholder=\"Search for plugins...\" spellcheck=\"false\" aria-controls=\"search-results\" class=\"sc-eeDRCY sc-dtBdUo bKptan Qsarb\" value=\"\">",
+ "impact": "critical",
+ "none": Array [],
+ "target": Array [
+ ".sc-eeDRCY",
+ ],
+ },
+ ],
+ "tags": Array [
+ "cat.aria",
+ "wcag2a",
+ "wcag412",
+ "EN-301-549",
+ "EN-9.4.1.2",
+ ],
+ },
+ ]
26 | await waitForAnimationsToEnd(page);
27 | const results = await createScanner(page).analyze();
> 28 | expect(results.violations).toEqual([]);
| ^
29 | };Note that the automated accessibility tests can be run locally with Thank you for working on this! |
personalizedrefrigerator
changed the title
| @@ -302,6 +302,7 @@ const NoteList = (props: Props) => { | |||
| onKeyUp={onKeyUp} | |||
| onDrop={onDrop} | |||
| onContextMenu={onContainerContextMenu} | |||
| id='search-results' | |||
There was a problem hiding this comment.
Suggested change
| id='search-results' | |
| id='notes-list' |
Since this <div> is also used for displaying the notes list (when not searching), an ID of notes-list might make more sense.
| @@ -198,7 +198,7 @@ const NoteList = (props: Props) => { | |||
|
|
|||
| const renderEmptyList = () => { | |||
| if (props.notes.length) return null; | |||
| return <div className="emptylist">{getEmptyFolderMessage(props.folders, props.selectedFolderId)}</div>; | |||
| return <div className="emptylist" role="status">{getEmptyFolderMessage(props.folders, props.selectedFolderId)}</div>; | |||
There was a problem hiding this comment.
(Optional) Consider leaving a comment that explains why role='status' is used here.
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.
Resolves #11621
Summary
While searching notes on Desktop there was no feedback on screenreaders on how many resulting notes were available, if any.
This PR addresses this behaviour by adding an aria-controls tag to the list of notes and a role "status" to the message of an empty note list.
Testing