Fix aria-required-children axe violation (#10900)

* Fix aria-required-children axe violation * Fix test selector
matrix-org · May 15, 2023 · 8b7eb8b · 8b7eb8b
1 parent 4d59a6f
commit 8b7eb8b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/cypress/e2e/invite/invite-dialog.spec.ts b/cypress/e2e/invite/invite-dialog.spec.ts
@@ -47,9 +47,11 @@ describe("Invite dialog", function () {
         // Open the room info panel
         cy.findByRole("button", { name: "Room info" }).click();
 
-        // Click "People" button on the panel
-        // Regex pattern due to the string of "mx_BaseCard_Button_sublabel"
-        cy.findByRole("button", { name: /People/ }).click();
+        cy.get(".mx_RightPanel").within(() => {
+            // Click "People" button on the panel
+            // Regex pattern due to the string of "mx_BaseCard_Button_sublabel"
+            cy.findByRole("button", { name: /People/ }).click();
+        });
 
         cy.get(".mx_BaseCard_header").within(() => {
             // Click "Invite to this room" button

diff --git a/src/components/views/rooms/RoomSublist.tsx b/src/components/views/rooms/RoomSublist.tsx
@@ -700,6 +700,10 @@ export default class RoomSublist extends React.Component<IProps, IState> {
                             onKeyDown={this.onHeaderKeyDown}
                             onFocus={onFocus}
                             aria-label={this.props.label}
+                            role="treeitem"
+                            aria-expanded={this.state.isExpanded}
+                            aria-level={1}
+                            aria-selected="false"
                         >
                             <div className="mx_RoomSublist_stickableContainer">
                                 <div className="mx_RoomSublist_stickable">
@@ -708,9 +712,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
                                         inputRef={ref}
                                         tabIndex={tabIndex}
                                         className="mx_RoomSublist_headerText"
-                                        role="treeitem"
                                         aria-expanded={this.state.isExpanded}
-                                        aria-level={1}
                                         onClick={this.onHeaderClick}
                                         onContextMenu={this.onContextMenu}
                                         title={this.props.isMinimized ? this.props.label : undefined}