diff --git a/src/components/CalendarPicker/index.js b/src/components/CalendarPicker/index.js
index 39762a10d1d9..7038d69d4b06 100644
--- a/src/components/CalendarPicker/index.js
+++ b/src/components/CalendarPicker/index.js
@@ -1,6 +1,6 @@
 import _ from 'underscore';
 import React from 'react';
-import {View, TouchableOpacity, Pressable} from 'react-native';
+import {View} from 'react-native';
 import moment from 'moment';
 import Str from 'expensify-common/lib/str';
 import Text from '../Text';
@@ -14,6 +14,8 @@ import ROUTES from '../../ROUTES';
 import CONST from '../../CONST';
 import getButtonState from '../../libs/getButtonState';
 import * as StyleUtils from '../../styles/StyleUtils';
+import PressableWithFeedback from '../Pressable/PressableWithFeedback';
+import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
 
 class CalendarPicker extends React.PureComponent {
     constructor(props) {
@@ -101,9 +103,12 @@ class CalendarPicker extends React.PureComponent {
         return (
             <View>
                 <View style={[styles.calendarHeader, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.ph4, styles.pr1]}>
-                    <TouchableOpacity
+                    <PressableWithFeedback
                         onPress={this.onYearPickerPressed}
                         style={[styles.alignItemsCenter, styles.flexRow, styles.flex1, styles.justifyContentStart]}
+                        wrapperStyle={[styles.alignItemsCenter]}
+                        hoverDimmingValue={1}
+                        accessibilityLabel={this.props.translate('common.currentYear')}
                     >
                         <Text
                             style={styles.sidebarLinkTextBold}
@@ -113,7 +118,7 @@ class CalendarPicker extends React.PureComponent {
                             {currentYearView}
                         </Text>
                         <ArrowIcon />
-                    </TouchableOpacity>
+                    </PressableWithFeedback>
                     <View style={[styles.alignItemsCenter, styles.flexRow, styles.flex1, styles.justifyContentEnd]}>
                         <Text
                             style={styles.sidebarLinkTextBold}
@@ -122,23 +127,27 @@ class CalendarPicker extends React.PureComponent {
                         >
                             {monthNames[currentMonthView]}
                         </Text>
-                        <TouchableOpacity
+                        <PressableWithFeedback
                             testID="prev-month-arrow"
                             disabled={!hasAvailableDatesPrevMonth}
                             onPress={this.moveToPrevMonth}
+                            hoverDimmingValue={1}
+                            accessibilityLabel={this.props.translate('common.previous')}
                         >
                             <ArrowIcon
                                 disabled={!hasAvailableDatesPrevMonth}
                                 direction={CONST.DIRECTION.LEFT}
                             />
-                        </TouchableOpacity>
-                        <TouchableOpacity
+                        </PressableWithFeedback>
+                        <PressableWithFeedback
                             testID="next-month-arrow"
                             disabled={!hasAvailableDatesNextMonth}
                             onPress={this.moveToNextMonth}
+                            hoverDimmingValue={1}
+                            accessibilityLabel={this.props.translate('common.next')}
                         >
                             <ArrowIcon disabled={!hasAvailableDatesNextMonth} />
-                        </TouchableOpacity>
+                        </PressableWithFeedback>
                     </View>
                 </View>
                 <View style={styles.flexRow}>
@@ -164,25 +173,27 @@ class CalendarPicker extends React.PureComponent {
                             const isSelected = moment(this.props.value).isSame(moment([currentYearView, currentMonthView, day]), 'day');
 
                             return (
-                                <Pressable
+                                <PressableWithoutFeedback
                                     key={`${index}_day-${day}`}
                                     disabled={isDisabled}
                                     onPress={() => this.onDayPressed(day)}
                                     style={styles.calendarDayRoot}
                                     accessibilityLabel={day ? day.toString() : undefined}
+                                    focusable={Boolean(day)}
+                                    accessible={Boolean(day)}
                                 >
                                     {({hovered, pressed}) => (
                                         <View
                                             style={[
                                                 styles.calendarDayContainer,
                                                 isSelected ? styles.calendarDayContainerSelected : {},
-                                                StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed)),
+                                                !isDisabled ? StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed)) : {},
                                             ]}
                                         >
                                             <Text style={isDisabled ? styles.buttonOpacityDisabled : styles.dayText}>{day}</Text>
                                         </View>
                                     )}
-                                </Pressable>
+                                </PressableWithoutFeedback>
                             );
                         })}
                     </View>
diff --git a/src/components/Pressable/PressableWithFeedback.js b/src/components/Pressable/PressableWithFeedback.js
index 9e475b7169cf..281492568867 100644
--- a/src/components/Pressable/PressableWithFeedback.js
+++ b/src/components/Pressable/PressableWithFeedback.js
@@ -12,7 +12,17 @@ const omittedProps = ['style', 'pressStyle', 'hoverStyle', 'focusStyle', 'wrappe
 
 const PressableWithFeedbackPropTypes = {
     ..._.omit(GenericPressablePropTypes.pressablePropTypes, omittedProps),
+    /**
+     * Determines what opacity value should be applied to the underlaying view when Pressable is pressed.
+     * To disable dimming, pass 1 as pressDimmingValue
+     * @default variables.pressDimValue
+     */
     pressDimmingValue: propTypes.number,
+    /**
+     * Determines what opacity value should be applied to the underlaying view when pressable is hovered.
+     * To disable dimming, pass 1 as hoverDimmingValue
+     * @default variables.hoverDimValue
+     */
     hoverDimmingValue: propTypes.number,
 };