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

Refactor ContextMenu to use RovingTabIndex (more consistent keyboard navigation accessibility) (#7353)

Browse source 
Split off from https://github.com/matrix-org/matrix-react-sdk/pull/7339
This commit is contained in:
Eric Eastwood 2021-12-17 11:08:56 -06:00 • committed by GitHub
parent 6761ef9540
commit 9289c0c90f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 224 additions and 160 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/views/elements/StyledCheckbox.tsx
View file

@ -26,6 +26,7 @@ export enum CheckboxStyle {
}
interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
inputRef?: React.RefObject<HTMLInputElement>;
kind?: CheckboxStyle;
}
@ -48,7 +49,8 @@ export default class StyledCheckbox extends React.PureComponent<IProps, IState>
public render() {
/* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
const { children, className, kind = CheckboxStyle.Solid, ...otherProps } = this.props;
const { children, className, kind = CheckboxStyle.Solid, inputRef, ...otherProps } = this.props;
const newClassName = classnames(
"mx_Checkbox",
className,
@ -58,7 +60,13 @@ export default class StyledCheckbox extends React.PureComponent<IProps, IState>
},
);
return <span className={newClassName}>
<input id={this.id} {...otherProps} type="checkbox" />
<input
// Pass through the ref - used for keyboard shortcut access to some buttons
ref={inputRef}
id={this.id}
{...otherProps}
type="checkbox"
/>
<label htmlFor={this.id}>
{ /* Using the div to center the image */ }
<div className="mx_Checkbox_background">