diff --git a/res/css/views/directory/_NetworkDropdown.scss b/res/css/views/directory/_NetworkDropdown.scss index 7e8a2e16d1..28dd1ed628 100644 --- a/res/css/views/directory/_NetworkDropdown.scss +++ b/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; diff --git a/src/components/structures/ContextMenu.js b/src/components/structures/ContextMenu.js index 898991f4f2..b4647a6c30 100644 --- a/src/components/structures/ContextMenu.js +++ b/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}) => { ; }; MenuGroup.propTypes = { - ...AccessibleButton.propTypes, label: PropTypes.string.isRequired, className: PropTypes.string, // optional }; diff --git a/src/components/views/directory/NetworkDropdown.js b/src/components/views/directory/NetworkDropdown.js index 8369926fb4..637fb09c18 100644 --- a/src/components/views/directory/NetworkDropdown.js +++ b/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 = ; + removeButton = ; } + // 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 ( -
+
{ server } { removeButton } @@ -167,7 +176,7 @@ const NetworkDropdown = ({onOptionChange, protocols = {}, selectedServerName, se {_t("Matrix")} { entries } -
+
); }); @@ -194,7 +203,7 @@ const NetworkDropdown = ({onOptionChange, protocols = {}, selectedServerName, se }; const buttonRect = handle.current.getBoundingClientRect(); - content = + content =
{options} @@ -217,7 +226,6 @@ const NetworkDropdown = ({onOptionChange, protocols = {}, selectedServerName, se content =