fix: Improve accessibility of buttons / tab indexes with tooltips
This commit is contained in:
parent
579eaf325b
commit
140f009b4d
|
@ -1,7 +1,7 @@
|
|||
// @flow
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { darken } from 'polished';
|
||||
import { darken, lighten } from 'polished';
|
||||
import { ExpandedIcon } from 'outline-icons';
|
||||
|
||||
const RealButton = styled.button`
|
||||
|
@ -35,6 +35,13 @@ const RealButton = styled.button`
|
|||
background: ${props => darken(0.05, props.theme.buttonBackground)};
|
||||
}
|
||||
|
||||
&:focus {
|
||||
transition-duration: 0.05s;
|
||||
box-shadow: ${props => lighten(0.4, props.theme.buttonBackground)} 0px 0px
|
||||
0px 3px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
|
@ -98,22 +105,24 @@ export type Props = {
|
|||
icon?: React.Node,
|
||||
className?: string,
|
||||
children?: React.Node,
|
||||
innerRef?: React.ElementRef<any>,
|
||||
disclosure?: boolean,
|
||||
};
|
||||
|
||||
export default function Button({
|
||||
function Button({
|
||||
type = 'text',
|
||||
icon,
|
||||
children,
|
||||
value,
|
||||
disclosure,
|
||||
innerRef,
|
||||
...rest
|
||||
}: Props) {
|
||||
const hasText = children !== undefined || value !== undefined;
|
||||
const hasIcon = icon !== undefined;
|
||||
|
||||
return (
|
||||
<RealButton type={type} {...rest}>
|
||||
<RealButton type={type} ref={innerRef} {...rest}>
|
||||
<Inner hasIcon={hasIcon} disclosure={disclosure}>
|
||||
{hasIcon && icon}
|
||||
{hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
|
||||
|
@ -122,3 +131,8 @@ export default function Button({
|
|||
</RealButton>
|
||||
);
|
||||
}
|
||||
|
||||
// $FlowFixMe - need to upgrade to get forwardRef
|
||||
export default React.forwardRef((props, ref) => (
|
||||
<Button {...props} innerRef={ref} />
|
||||
));
|
||||
|
|
|
@ -140,6 +140,12 @@ const StyledNavLink = styled(NavLink)`
|
|||
color: ${props => props.theme.text};
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: ${props => props.theme.text};
|
||||
background: ${props => props.theme.sidebarItemBackground};
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> ${Action} {
|
||||
display: inline;
|
||||
|
|
|
@ -10,7 +10,6 @@ type Props = {
|
|||
children: React.Node,
|
||||
delay?: number,
|
||||
className?: string,
|
||||
block?: boolean,
|
||||
};
|
||||
|
||||
class Tooltip extends React.Component<Props> {
|
||||
|
@ -19,16 +18,7 @@ class Tooltip extends React.Component<Props> {
|
|||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
shortcut,
|
||||
tooltip,
|
||||
delay = 50,
|
||||
children,
|
||||
block,
|
||||
className,
|
||||
...rest
|
||||
} = this.props;
|
||||
const Component = block ? 'div' : 'span';
|
||||
const { shortcut, tooltip, delay = 50, className, ...rest } = this.props;
|
||||
|
||||
let content = tooltip;
|
||||
|
||||
|
@ -50,9 +40,7 @@ class Tooltip extends React.Component<Props> {
|
|||
duration={[200, 150]}
|
||||
inertia
|
||||
{...rest}
|
||||
>
|
||||
<Component className={className}>{children}</Component>
|
||||
</StyledTippy>
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import breakpoint from 'styled-components-breakpoint';
|
||||
import { lighten } from 'polished';
|
||||
import { observable } from 'mobx';
|
||||
import { observer } from 'mobx-react';
|
||||
import { KeyboardIcon } from 'outline-icons';
|
||||
|
@ -33,17 +34,16 @@ class KeyboardShortcutsButton extends React.Component<Props> {
|
|||
>
|
||||
<KeyboardShortcuts />
|
||||
</Modal>
|
||||
<Button onClick={this.handleOpenKeyboardShortcuts}>
|
||||
<Tooltip
|
||||
tooltip="Keyboard shortcuts"
|
||||
shortcut="?"
|
||||
placement="left"
|
||||
delay={500}
|
||||
block
|
||||
>
|
||||
<Tooltip
|
||||
tooltip="Keyboard shortcuts"
|
||||
shortcut="?"
|
||||
placement="left"
|
||||
delay={500}
|
||||
>
|
||||
<Button onClick={this.handleOpenKeyboardShortcuts}>
|
||||
<KeyboardIcon />
|
||||
</Tooltip>
|
||||
</Button>
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
@ -59,6 +59,7 @@ const Button = styled.button`
|
|||
height: 24px;
|
||||
opacity: 0.8;
|
||||
background: none;
|
||||
border-radius: 4px;
|
||||
line-height: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
|
@ -67,6 +68,13 @@ const Button = styled.button`
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
transition-duration: 0.05s;
|
||||
box-shadow: ${props => lighten(0.4, props.theme.buttonBackground)} 0px 0px
|
||||
0px 3px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
${breakpoint('tablet')`
|
||||
display: block;
|
||||
`};
|
||||
|
|
Reference in New Issue