imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve accessibility

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2020-03-13 14:38:36 +00:00
parent 9237cf9566
commit af368a4736
3 changed files with 18 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

5
res/css/views/directory/_NetworkDropdown.scss
View file

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

3
src/components/structures/ContextMenu.js
View file

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

20
src/components/views/directory/NetworkDropdown.js
View file

@ -21,7 +21,14 @@ import PropTypes from 'prop-types';
import {MatrixClientPeg} from '../../../MatrixClientPeg'; import {MatrixClientPeg} from '../../../MatrixClientPeg';
import {instanceForInstanceId} from '../../../utils/DirectoryUtils'; 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 {_t} from "../../../languageHandler";
import SdkConfig from "../../../SdkConfig"; import SdkConfig from "../../../SdkConfig";
import {useSettingValue} from "../../../hooks/useSettings"; import {useSettingValue} from "../../../hooks/useSettings";
@ -147,11 +154,13 @@ const NetworkDropdown = ({onOptionChange, protocols = {}, selectedServerName, se
onOptionChange(hsName, undefined); 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 ( return (
<div className="mx_NetworkDropdown_server" key={server}> <MenuGroup label={server} className="mx_NetworkDropdown_server" key={server}>
<div className="mx_NetworkDropdown_server_title"> <div className="mx_NetworkDropdown_server_title">
{ server } { server }
{ removeButton } { removeButton }
@ -167,7 +176,7 @@ const NetworkDropdown = ({onOptionChange, protocols = {}, selectedServerName, se
{_t("Matrix")} {_t("Matrix")}
</MenuItemRadio> </MenuItemRadio>
{ entries } { entries }
</div> </MenuGroup>
); );
}); });
@ -194,7 +203,7 @@ const NetworkDropdown = ({onOptionChange, protocols = {}, selectedServerName, se
}; };
const buttonRect = handle.current.getBoundingClientRect(); const buttonRect = handle.current.getBoundingClientRect();
content = <ContextMenu {...inPlaceOf(buttonRect)} onFinished={closeMenu} managed={false}> content = <ContextMenu {...inPlaceOf(buttonRect)} onFinished={closeMenu}>
<div className="mx_NetworkDropdown_menu"> <div className="mx_NetworkDropdown_menu">
{options} {options}
<MenuItem className="mx_NetworkDropdown_server_add" label={undefined} onClick={onClick}> <MenuItem className="mx_NetworkDropdown_server_add" label={undefined} onClick={onClick}>
@ -217,7 +226,6 @@ const NetworkDropdown = ({onOptionChange, protocols = {}, selectedServerName, se
content = <ContextMenuButton content = <ContextMenuButton
className="mx_NetworkDropdown_handle" className="mx_NetworkDropdown_handle"
label={_t("React")}
onClick={openMenu} onClick={openMenu}
isExpanded={menuDisplayed} isExpanded={menuDisplayed}
> >