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">

11
src/components/views/elements/StyledRadioButton.tsx
View file

@ -20,6 +20,7 @@ import classnames from 'classnames';
import { replaceableComponent } from "../../../utils/replaceableComponent";
interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
inputRef?: React.RefObject<HTMLInputElement>;
outlined?: boolean;
// If true (default), the children will be contained within a <label> element
// If false, they'll be in a div. Putting interactive components that have labels
@ -38,7 +39,7 @@ export default class StyledRadioButton extends React.PureComponent<IProps, IStat
};
public render() {
const { children, className, disabled, outlined, childrenInLabel, ...otherProps } = this.props;
const { children, className, disabled, outlined, childrenInLabel, inputRef, ...otherProps } = this.props;
const _className = classnames(
'mx_StyledRadioButton',
className,
@ -50,7 +51,13 @@ export default class StyledRadioButton extends React.PureComponent<IProps, IStat
});
const radioButton = <React.Fragment>
<input type='radio' disabled={disabled} {...otherProps} />
<input
// Pass through the ref - used for keyboard shortcut access to some buttons
ref={inputRef}
type='radio'
disabled={disabled}
{...otherProps}
/>
{ /* Used to render the radio button circle */ }
<div><div /></div>
</React.Fragment>;