Improve accessibility

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

res/css/views/directory/_NetworkDropdown.scss

@@ -56,14 +56,15 @@ limitations under the License.
         .mx_AccessibleButton {
             position: absolute;
             display: inline;
-            right: 0;
+            right: 12px;
+            height: 16px;
+            width: 16px;
 
             &::after {
                 content: "";
                 position: absolute;
                 width: 16px;
                 height: 16px;
-                right: 12px;
                 top: 4px;
                 mask-repeat: no-repeat;
                 mask-position: center;

src/components/structures/ContextMenu.js

@@ -350,7 +350,7 @@ export const ContextMenuButton = ({ label, isExpanded, children, ...props }) =>
 };
 ContextMenuButton.propTypes = {
     ...AccessibleButton.propTypes,
-    label: PropTypes.string.isRequired,
+    label: PropTypes.string,
     isExpanded: PropTypes.bool.isRequired, // whether or not the context menu is currently open
 };
 
@@ -377,7 +377,6 @@ export const MenuGroup = ({children, label, ...props}) => {
     </div>;
 };
 MenuGroup.propTypes = {
-    ...AccessibleButton.propTypes,
     label: PropTypes.string.isRequired,
     className: PropTypes.string, // optional
 };

src/components/views/directory/NetworkDropdown.js

@@ -21,7 +21,14 @@ import PropTypes from 'prop-types';
 
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import {instanceForInstanceId} from '../../../utils/DirectoryUtils';
-import {ContextMenu, useContextMenu, ContextMenuButton, MenuItemRadio, MenuItem} from "../../structures/ContextMenu";
+import {
+    ContextMenu,
+    useContextMenu,
+    ContextMenuButton,
+    MenuItemRadio,
+    MenuItem,
+    MenuGroup
+} from "../../structures/ContextMenu";
 import {_t} from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
 import {useSettingValue} from "../../../hooks/useSettings";
@@ -147,11 +154,13 @@ const NetworkDropdown = ({onOptionChange, protocols = {}, selectedServerName, se
                         onOptionChange(hsName, undefined);
                     }
                 };
-                removeButton = <AccessibleButton onClick={onClick} />;
+                removeButton = <MenuItem onClick={onClick} label={_t("Remove server")} />;
             }
 
+            // ARIA: in actual fact the entire menu is one large radio group but for better screen reader support
+            // we use group to notate server wrongly.
             return (
-                <div className="mx_NetworkDropdown_server" key={server}>
+                <MenuGroup label={server} className="mx_NetworkDropdown_server" key={server}>
                     <div className="mx_NetworkDropdown_server_title">
                         { server }
                         { removeButton }
@@ -167,7 +176,7 @@ const NetworkDropdown = ({onOptionChange, protocols = {}, selectedServerName, se
                         {_t("Matrix")}
                     </MenuItemRadio>
                     { entries }
-                </div>
+                </MenuGroup>
             );
         });
 
@@ -194,7 +203,7 @@ const NetworkDropdown = ({onOptionChange, protocols = {}, selectedServerName, se
         };
 
         const buttonRect = handle.current.getBoundingClientRect();
-        content = <ContextMenu {...inPlaceOf(buttonRect)} onFinished={closeMenu} managed={false}>
+        content = <ContextMenu {...inPlaceOf(buttonRect)} onFinished={closeMenu}>
             <div className="mx_NetworkDropdown_menu">
                 {options}
                 <MenuItem className="mx_NetworkDropdown_server_add" label={undefined} onClick={onClick}>
@@ -217,7 +226,6 @@ const NetworkDropdown = ({onOptionChange, protocols = {}, selectedServerName, se
 
         content = <ContextMenuButton
             className="mx_NetworkDropdown_handle"
-            label={_t("React")}
             onClick={openMenu}
             isExpanded={menuDisplayed}
         >