From 9e27353aec5289e3232973117647976e76a0d017 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Thu, 21 Nov 2019 11:28:52 +0100
Subject: [PATCH 1/2] feat: Title for button with only an icon

For a11y
---
 react/DateMonthPicker/Readme.md | 2 +-
 react/DateMonthPicker/index.jsx | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/react/DateMonthPicker/Readme.md b/react/DateMonthPicker/Readme.md
index 46f6c70b48..7cba32a2b1 100644
--- a/react/DateMonthPicker/Readme.md
+++ b/react/DateMonthPicker/Readme.md
@@ -19,7 +19,7 @@ const handleSelect = monthDate => {
   <Stack>
       Month chosen: { state.monthDate ? state.monthDate : 'No date chosen yet'}<br/>
       <Button onClick={showPicker} label='Choose month'/>
-      { state.choosing ? <Modal dismissAction={hidePicker}>
+      { state.choosing ? <Modal title='Choose month' dismissAction={hidePicker}>
         <DateMonthPicker
             f={x => x}
             onSelect={handleSelect}
diff --git a/react/DateMonthPicker/index.jsx b/react/DateMonthPicker/index.jsx
index 8b7b8f3e5a..0b0e30c701 100644
--- a/react/DateMonthPicker/index.jsx
+++ b/react/DateMonthPicker/index.jsx
@@ -9,6 +9,8 @@ import styles from './styles.styl'
 import cx from 'classnames'
 
 const MonthButton = translate()(({ monthNum, f, onClick, isSelected }) => {
+  // We do not care care about year and day since we are creating the date
+  // only to be able to format it into a monthName
   const d = new Date(2019, monthNum, 15)
   const handleClick = () => {
     onClick(monthNum)
@@ -47,7 +49,6 @@ const DateMonthPicker = ({ initialValue, onSelect }) => {
     const d = new Date(year, month, 1)
     onSelect(format(d, 'YYYY-MM-DD'))
   }
-
   return (
     <>
       <div className={styles.DateMonthPicker__YearControls}>
@@ -55,7 +56,8 @@ const DateMonthPicker = ({ initialValue, onSelect }) => {
           className={styles.DateMonthPicker__YearButton}
           theme="secondary"
           size="small"
-          label=""
+          label={year - 1}
+          iconOnly={true}
           onClick={decreaseYear}
           icon={<Icon icon="left" />}
         />
@@ -71,7 +73,8 @@ const DateMonthPicker = ({ initialValue, onSelect }) => {
           className={styles.DateMonthPicker__YearButton}
           theme="secondary"
           size="small"
-          label=""
+          label={year + 1}
+          iconOnly={true}
           onClick={increaseYear}
           icon={<Icon icon="right" />}
         />

From f60fc517ccf8d162c4492ed97e7f27abff819bf7 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Thu, 21 Nov 2019 11:35:21 +0100
Subject: [PATCH 2/2] refactor: Do not use !important for background

---
 react/DateMonthPicker/styles.styl | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/react/DateMonthPicker/styles.styl b/react/DateMonthPicker/styles.styl
index 31438594b0..195621bb55 100644
--- a/react/DateMonthPicker/styles.styl
+++ b/react/DateMonthPicker/styles.styl
@@ -11,7 +11,10 @@
   border-width 0
   margin 0
   color var(--coolGrey)
-  background none !important
+  background none
+
+.DateMonthPicker__YearButton:hover
+    background none
 
 .DateMonthPicker__Year
   display inline-flex