Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 21:24:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix StyledMenuItemCheckbox and StyledMenuItemRadio

Browse Source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2020-07-05 19:31:24 +01:00
parent 069cdf3ce0
commit 3cebfc8072
1 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/structures/ContextMenu.js
View File

@ -424,9 +424,17 @@ MenuItemCheckbox.propTypes = {
}; };
// Semantic component for representing a styled role=menuitemcheckbox // Semantic component for representing a styled role=menuitemcheckbox
export const StyledMenuItemCheckbox = ({children, label, active=false, disabled=false, ...props}) => { export const StyledMenuItemCheckbox = ({children, label, checked=false, disabled=false, ...props}) => {
return ( return (
<StyledCheckbox {...props} role="menuitemcheckbox" aria-checked={active} aria-disabled={disabled} tabIndex={-1} aria-label={label}> <StyledCheckbox
{...props}
role="menuitemcheckbox"
aria-checked={checked}
checked={checked}
aria-disabled={disabled}
tabIndex={-1}
aria-label={label}
>
{ children } { children }
</StyledCheckbox> </StyledCheckbox>
); );
@ -434,7 +442,7 @@ export const StyledMenuItemCheckbox = ({children, label, active=false, disabled=
StyledMenuItemCheckbox.propTypes = { StyledMenuItemCheckbox.propTypes = {
...AccessibleButton.propTypes, ...AccessibleButton.propTypes,
label: PropTypes.string, // optional label: PropTypes.string, // optional
active: PropTypes.bool.isRequired, checked: PropTypes.bool.isRequired,
disabled: PropTypes.bool, // optional disabled: PropTypes.bool, // optional
className: PropTypes.string, // optional className: PropTypes.string, // optional
onClick: PropTypes.func.isRequired, onClick: PropTypes.func.isRequired,
@ -459,9 +467,17 @@ MenuItemRadio.propTypes = {
}; };
// Semantic component for representing a styled role=menuitemradio // Semantic component for representing a styled role=menuitemradio
export const StyledMenuItemRadio = ({children, label, active=false, disabled=false, ...props}) => { export const StyledMenuItemRadio = ({children, label, checked=false, disabled=false, ...props}) => {
return ( return (
<StyledRadioButton {...props} role="menuitemradio" aria-checked={active} aria-disabled={disabled} tabIndex={-1} aria-label={label}> <StyledRadioButton
{...props}
role="menuitemradio"
aria-checked={checked}
checked={checked}
aria-disabled={disabled}
tabIndex={-1}
aria-label={label}
>
{ children } { children }
</StyledRadioButton> </StyledRadioButton>
); );
@ -469,7 +485,7 @@ export const StyledMenuItemRadio = ({children, label, active=false, disabled=fal
StyledMenuItemRadio.propTypes = { StyledMenuItemRadio.propTypes = {
...StyledMenuItemRadio.propTypes, ...StyledMenuItemRadio.propTypes,
label: PropTypes.string, // optional label: PropTypes.string, // optional
active: PropTypes.bool.isRequired, checked: PropTypes.bool.isRequired,
disabled: PropTypes.bool, // optional disabled: PropTypes.bool, // optional
className: PropTypes.string, // optional className: PropTypes.string, // optional
onClick: PropTypes.func.isRequired, onClick: PropTypes.func.isRequired,