fix: Accessibility audit

This commit is contained in:
Tom Moor
2020-09-16 22:31:14 -07:00
parent 2c1a111dee
commit 881105992e
3 changed files with 6 additions and 4 deletions

View File

@ -177,6 +177,7 @@ class DropdownMenu extends React.Component<Props> {
{label || ( {label || (
<NudeButton <NudeButton
id={`${this.id}button`} id={`${this.id}button`}
aria-label="More options"
aria-haspopup="true" aria-haspopup="true"
aria-expanded={isOpen ? "true" : "false"} aria-expanded={isOpen ? "true" : "false"}
aria-controls={this.id} aria-controls={this.id}

View File

@ -21,7 +21,7 @@ function HeaderBlock({
}: Props) { }: Props) {
return ( return (
<Header justify="flex-start" align="center" {...rest}> <Header justify="flex-start" align="center" {...rest}>
<TeamLogo alt={`${teamName} logo`} src={logoUrl} /> <TeamLogo alt={`${teamName} logo`} src={logoUrl} size="38px" />
<Flex align="flex-start" column> <Flex align="flex-start" column>
<TeamName showDisclosure> <TeamName showDisclosure>
{teamName}{" "} {teamName}{" "}

View File

@ -2,11 +2,12 @@
import styled from "styled-components"; import styled from "styled-components";
const TeamLogo = styled.img` const TeamLogo = styled.img`
width: auto; width: ${(props) => props.size || "auto"};
height: 38px; height: ${(props) => props.size || "38px"};
border-radius: 4px; border-radius: 4px;
background: ${(props) => props.theme.background}; background: ${(props) => props.theme.background};
outline: 1px solid ${(props) => props.theme.divider}; border: 1px solid ${(props) => props.theme.divider};
overflow: hidden;
`; `;
export default TeamLogo; export default TeamLogo;