fix: More missing a11y labels

This commit is contained in:
Tom Moor
2021-01-22 21:12:25 -08:00
parent 11e1108f4a
commit 7e9bcb0c37
3 changed files with 13 additions and 2 deletions

View File

@ -17,6 +17,8 @@ type Props = {
theme: Theme, theme: Theme,
source: string, source: string,
placeholder?: string, placeholder?: string,
label?: string,
labelHidden?: boolean,
collectionId?: string, collectionId?: string,
t: TFunction, t: TFunction,
}; };
@ -68,6 +70,8 @@ class InputSearch extends React.Component<Props> {
color={this.focused ? theme.inputBorderFocused : theme.inputBorder} color={this.focused ? theme.inputBorderFocused : theme.inputBorder}
/> />
} }
label={this.props.label}
labelHidden={this.props.labelHidden}
onFocus={this.handleFocus} onFocus={this.handleFocus}
onBlur={this.handleBlur} onBlur={this.handleBlur}
margin={0} margin={0}

View File

@ -159,7 +159,7 @@ function Sidebar({ location, children }: Props) {
onDoubleClick={handleReset} onDoubleClick={handleReset}
$isResizing={isResizing} $isResizing={isResizing}
> >
<ResizeHandle name={t("Resize sidebar")} /> <ResizeHandle aria-label={t("Resize sidebar")} />
</ResizeBorder> </ResizeBorder>
)} )}
</Container> </Container>

View File

@ -1,6 +1,7 @@
// @flow // @flow
import { StarredIcon } from "outline-icons"; import { StarredIcon } from "outline-icons";
import * as React from "react"; import * as React from "react";
import { useTranslation } from "react-i18next";
import styled from "styled-components"; import styled from "styled-components";
import Document from "models/Document"; import Document from "models/Document";
import NudeButton from "./NudeButton"; import NudeButton from "./NudeButton";
@ -11,6 +12,7 @@ type Props = {|
|}; |};
function Star({ size, document, ...rest }: Props) { function Star({ size, document, ...rest }: Props) {
const { t } = useTranslation();
const handleClick = React.useCallback( const handleClick = React.useCallback(
(ev: SyntheticEvent<>) => { (ev: SyntheticEvent<>) => {
ev.preventDefault(); ev.preventDefault();
@ -30,7 +32,12 @@ function Star({ size, document, ...rest }: Props) {
} }
return ( return (
<Button onClick={handleClick} size={size} {...rest}> <Button
onClick={handleClick}
size={size}
aria-label={document.isStarred ? t("Unstar") : t("Star")}
{...rest}
>
<AnimatedStar <AnimatedStar
solid={document.isStarred} solid={document.isStarred}
size={size} size={size}