From 881105992eef8d3378e9968e682f624cbde2d4a6 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Wed, 16 Sep 2020 22:31:14 -0700
Subject: [PATCH] fix: Accessibility audit

---
 app/components/DropdownMenu/DropdownMenu.js      | 1 +
 app/components/Sidebar/components/HeaderBlock.js | 2 +-
 app/components/TeamLogo.js                       | 7 ++++---
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/components/DropdownMenu/DropdownMenu.js b/app/components/DropdownMenu/DropdownMenu.js
index d84939e6a..f18ab0216 100644
--- a/app/components/DropdownMenu/DropdownMenu.js
+++ b/app/components/DropdownMenu/DropdownMenu.js
@@ -177,6 +177,7 @@ class DropdownMenu extends React.Component<Props> {
                 {label || (
                   <NudeButton
                     id={`${this.id}button`}
+                    aria-label="More options"
                     aria-haspopup="true"
                     aria-expanded={isOpen ? "true" : "false"}
                     aria-controls={this.id}
diff --git a/app/components/Sidebar/components/HeaderBlock.js b/app/components/Sidebar/components/HeaderBlock.js
index 6aa1e5a53..202adc03e 100644
--- a/app/components/Sidebar/components/HeaderBlock.js
+++ b/app/components/Sidebar/components/HeaderBlock.js
@@ -21,7 +21,7 @@ function HeaderBlock({
 }: Props) {
   return (
     <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>
         <TeamName showDisclosure>
           {teamName}{" "}
diff --git a/app/components/TeamLogo.js b/app/components/TeamLogo.js
index 2101be3b5..400c7f2f4 100644
--- a/app/components/TeamLogo.js
+++ b/app/components/TeamLogo.js
@@ -2,11 +2,12 @@
 import styled from "styled-components";
 
 const TeamLogo = styled.img`
-  width: auto;
-  height: 38px;
+  width: ${(props) => props.size || "auto"};
+  height: ${(props) => props.size || "38px"};
   border-radius: 4px;
   background: ${(props) => props.theme.background};
-  outline: 1px solid ${(props) => props.theme.divider};
+  border: 1px solid ${(props) => props.theme.divider};
+  overflow: hidden;
 `;
 
 export default TeamLogo;