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

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