diff --git a/packages/core/src/common/_mixins.scss b/packages/core/src/common/_mixins.scss
index 1a15585c994..19fadd7063d 100644
--- a/packages/core/src/common/_mixins.scss
+++ b/packages/core/src/common/_mixins.scss
@@ -85,6 +85,19 @@ $pt-dark-intent-text-colors: (
   -moz-outline-radius: 6px;
 }
 
+@mixin screenreader-only() {
+  // reference: https://tailwindcss.com/docs/screen-readers
+  border-width: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 @function border-shadow($alpha, $color: $black, $size: 1px) {
   @return 0 0 0 $size rgba($color, $alpha);
 }
diff --git a/packages/datetime/src/_datepicker.scss b/packages/datetime/src/_datepicker.scss
index 68169d71b39..f1f2fbd7e3d 100644
--- a/packages/datetime/src/_datepicker.scss
+++ b/packages/datetime/src/_datepicker.scss
@@ -61,6 +61,7 @@ $header-margin: ($header-height - $pt-input-height) * 0.5 !default;
 
   .DayPicker-Caption {
     display: table-caption;
+    visibility: hidden;
   }
 
   .DayPicker-Weekdays {
@@ -149,10 +150,9 @@ $header-margin: ($header-height - $pt-input-height) * 0.5 !default;
   align-items: center;
   display: flex;
   height: $pt-button-height;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
+  justify-content: center;
+  margin-bottom: 5px;
+  position: relative;
 
   > .DayPicker-NavButton--prev {
     margin-right: auto;
@@ -161,26 +161,28 @@ $header-margin: ($header-height - $pt-input-height) * 0.5 !default;
   > .DayPicker-NavButton--next {
     margin-left: auto;
   }
-}
 
-.#{$ns}-datepicker-caption {
-  @include pt-flex-container(row, $fill: ":first-child");
-  justify-content: space-between;
-  margin: 0 ($pt-button-height - $datepicker-padding) $datepicker-padding;
+  .#{$ns}-datepicker-navbar-center {
+    // centers item regardless of DayPicker-NavButton present
+    position: absolute;
+  }
 
   // HTMLSelect overrides for a narrower appearance
   select {
     font-weight: 600;
     padding-left: $datepicker-padding;
-    padding-right: $pt-icon-size-standard;
+    padding-right: $pt-icon-size-standard + 2;
 
     + .#{$ns}-icon {
       right: 2px;
     }
   }
 
-  + .#{$ns}-divider {
-    margin: 0;
+  // bottom border divider of navbar
+  .#{$ns}-divider {
+    position: absolute;
+    bottom: calc(0 - #{$datepicker-padding * 2});
+    width: calc(100% - #{$datepicker-padding * 2});
   }
 }
 
@@ -193,7 +195,7 @@ $header-margin: ($header-height - $pt-input-height) * 0.5 !default;
   min-width: 60px;
 }
 
-.#{$ns}-datepicker-caption-measure {
+.#{$ns}-datepicker-month-select-measure {
   font-weight: 600;
   padding-left: $datepicker-padding;
 }
@@ -277,3 +279,4 @@ $header-margin: ($header-height - $pt-input-height) * 0.5 !default;
     margin: $datepicker-padding 0;
   }
 }
+
diff --git a/packages/datetime/src/common/classes.ts b/packages/datetime/src/common/classes.ts
index 6004f8b77f2..ae3e57de740 100644
--- a/packages/datetime/src/common/classes.ts
+++ b/packages/datetime/src/common/classes.ts
@@ -22,10 +22,6 @@ export const DATEINPUT = `${NS}-dateinput`;
 export const DATEINPUT_POPOVER = `${DATEINPUT}-popover`;
 
 export const DATEPICKER = `${NS}-datepicker`;
-export const DATEPICKER_CAPTION = `${DATEPICKER}-caption`;
-export const DATEPICKER_CAPTION_CARET = `${DATEPICKER_CAPTION}-caret`;
-export const DATEPICKER_CAPTION_MEASURE = `${DATEPICKER_CAPTION}-measure`;
-export const DATEPICKER_CAPTION_SELECT = `${DATEPICKER_CAPTION}-select`;
 export const DATEPICKER_CONTENT = `${DATEPICKER}-content`;
 export const DATEPICKER_DAY = "DayPicker-Day";
 export const DATEPICKER_DAY_DISABLED = `${DATEPICKER_DAY}--disabled`;
@@ -35,8 +31,10 @@ export const DATEPICKER_DAY_IS_TODAY = `${DATEPICKER_DAY}--isToday`;
 export const DATEPICKER_DAY_WRAPPER = `${DATEPICKER}-day-wrapper`;
 export const DATEPICKER_FOOTER = `${DATEPICKER}-footer`;
 export const DATEPICKER_MONTH_SELECT = `${DATEPICKER}-month-select`;
+export const DATEPICKER_MONTH_SELECT_MEASURE = `${DATEPICKER_MONTH_SELECT}-measure`;
 export const DATEPICKER_YEAR_SELECT = `${DATEPICKER}-year-select`;
 export const DATEPICKER_NAVBAR = `${DATEPICKER}-navbar`;
+export const DATEPICKER_NAVBAR_CENTER = `${DATEPICKER_NAVBAR}-center`;
 export const DATEPICKER_NAVBUTTON = `DayPicker-NavButton`;
 export const DATEPICKER_TIMEPICKER_WRAPPER = `${DATEPICKER}-timepicker-wrapper`;
 
diff --git a/packages/datetime/src/datePicker.tsx b/packages/datetime/src/datePicker.tsx
index d3c146fb71a..e054f316133 100644
--- a/packages/datetime/src/datePicker.tsx
+++ b/packages/datetime/src/datePicker.tsx
@@ -16,15 +16,15 @@
 
 import classNames from "classnames";
 import * as React from "react";
-import DayPicker, { CaptionElementProps, DayModifiers, NavbarElementProps } from "react-day-picker";
+import DayPicker, { DayModifiers, NavbarElementProps } from "react-day-picker";
 
 import { AbstractPureComponent2, Button, DISPLAYNAME_PREFIX, Divider, Props } from "@blueprintjs/core";
 
 import * as Classes from "./common/classes";
 import * as DateUtils from "./common/dateUtils";
 import * as Errors from "./common/errors";
-import { DatePickerCaption } from "./datePickerCaption";
 import { DatePickerBaseProps, getDefaultMaxDate, getDefaultMinDate } from "./datePickerCore";
+import { DatePickerMonthYearSelect } from "./datePickerMonthYearSelect";
 import { DatePickerNavbar } from "./datePickerNavbar";
 import { DatePickerShortcut, DateRangeShortcut, Shortcuts } from "./shortcuts";
 import { TimePicker } from "./timePicker";
@@ -163,7 +163,7 @@ export class DatePicker extends AbstractPureComponent2<DatePickerProps, IDatePic
                         modifiers={this.getDatePickerModifiers()}
                         {...dayPickerProps}
                         canChangeMonth={true}
-                        captionElement={this.renderCaption}
+                        captionElement={<></>}
                         navbarElement={this.renderNavbar}
                         disabledDays={this.getDisabledDaysModifier()}
                         fromMonth={minDate}
@@ -255,18 +255,16 @@ export class DatePicker extends AbstractPureComponent2<DatePickerProps, IDatePic
         return Array.isArray(disabledDays) ? [this.disabledDays, ...disabledDays] : [this.disabledDays, disabledDays];
     };
 
-    private renderCaption = (props: CaptionElementProps) => (
-        <DatePickerCaption
-            {...props}
-            maxDate={this.props.maxDate}
-            minDate={this.props.minDate}
-            onDateChange={this.handleMonthChange}
-            reverseMonthAndYearMenus={this.props.reverseMonthAndYearMenus}
-        />
-    );
-
-    private renderNavbar = (props: NavbarElementProps) => (
-        <DatePickerNavbar {...props} maxDate={this.props.maxDate} minDate={this.props.minDate} />
+    private renderNavbar = (navbarProps: NavbarElementProps) => (
+        <DatePickerNavbar {...navbarProps} maxDate={this.props.maxDate} minDate={this.props.minDate}>
+            <DatePickerMonthYearSelect
+                {...navbarProps}
+                onDateChange={this.handleMonthChange}
+                reverseMonthAndYearMenus={this.props.reverseMonthAndYearMenus}
+                maxDate={this.props.maxDate}
+                minDate={this.props.minDate}
+            />
+        </DatePickerNavbar>
     );
 
     private renderOptionsBar() {
diff --git a/packages/datetime/src/datePickerCaption.tsx b/packages/datetime/src/datePickerMonthYearSelect.tsx
similarity index 83%
rename from packages/datetime/src/datePickerCaption.tsx
rename to packages/datetime/src/datePickerMonthYearSelect.tsx
index 47d1feac57d..e0701801452 100644
--- a/packages/datetime/src/datePickerCaption.tsx
+++ b/packages/datetime/src/datePickerMonthYearSelect.tsx
@@ -15,17 +15,18 @@
  */
 
 import * as React from "react";
-import { CaptionElementProps } from "react-day-picker";
+import { NavbarElementProps } from "react-day-picker";
 
-import { AbstractPureComponent2, Divider, HTMLSelect, IconSize, OptionProps } from "@blueprintjs/core";
+import { AbstractPureComponent2, HTMLSelect, IconSize, OptionProps } from "@blueprintjs/core";
 
 import * as Classes from "./common/classes";
 import { clone } from "./common/dateUtils";
 import { measureTextWidth } from "./common/utils";
 
-export interface IDatePickerCaptionProps extends CaptionElementProps {
+export interface IDatePickerMonthYearSelectProps extends Pick<NavbarElementProps, "month" | "locale" | "localeUtils"> {
     maxDate: Date;
     minDate: Date;
+    months?: string[];
     onMonthChange?: (month: number) => void;
     onYearChange?: (year: number) => void;
     /** Callback invoked when the month or year `<select>` is changed. */
@@ -33,12 +34,15 @@ export interface IDatePickerCaptionProps extends CaptionElementProps {
     reverseMonthAndYearMenus?: boolean;
 }
 
-export interface IDatePickerCaptionState {
+export interface IDatePickerMonthYearSelectState {
     monthRightOffset: number;
 }
 
-export class DatePickerCaption extends AbstractPureComponent2<IDatePickerCaptionProps, IDatePickerCaptionState> {
-    public state: IDatePickerCaptionState = { monthRightOffset: 0 };
+export class DatePickerMonthYearSelect extends AbstractPureComponent2<
+    IDatePickerMonthYearSelectProps,
+    IDatePickerMonthYearSelectState
+> {
+    public state: IDatePickerMonthYearSelectState = { monthRightOffset: 0 };
 
     private containerElement: HTMLElement;
 
@@ -49,7 +53,14 @@ export class DatePickerCaption extends AbstractPureComponent2<IDatePickerCaption
     private handleYearSelectChange = this.dateChangeHandler((d, year) => d.setFullYear(year), this.props.onYearChange);
 
     public render() {
-        const { date, locale, localeUtils, minDate, maxDate, months = localeUtils.getMonths(locale) } = this.props;
+        const {
+            month: date,
+            locale,
+            localeUtils,
+            minDate,
+            maxDate,
+            months = localeUtils.getMonths(locale),
+        } = this.props;
         const minYear = minDate.getFullYear();
         const maxYear = maxDate.getFullYear();
         const displayMonth = date.getMonth();
@@ -101,14 +112,7 @@ export class DatePickerCaption extends AbstractPureComponent2<IDatePickerCaption
             ? [yearSelect, monthSelect]
             : [monthSelect, yearSelect];
 
-        return (
-            <div className={this.props.classNames.caption}>
-                <div className={Classes.DATEPICKER_CAPTION} ref={ref => (this.containerElement = ref)}>
-                    {orderedSelects}
-                </div>
-                <Divider />
-            </div>
-        );
+        return <div ref={ref => (this.containerElement = ref)}>{orderedSelects}</div>;
     }
 
     public componentDidMount() {
@@ -123,7 +127,7 @@ export class DatePickerCaption extends AbstractPureComponent2<IDatePickerCaption
         // measure width of text as rendered inside our container element.
         const monthTextWidth = measureTextWidth(
             this.displayedMonthText,
-            Classes.DATEPICKER_CAPTION_MEASURE,
+            Classes.DATEPICKER_MONTH_SELECT_MEASURE,
             this.containerElement,
         );
         const monthSelectWidth =
@@ -139,7 +143,7 @@ export class DatePickerCaption extends AbstractPureComponent2<IDatePickerCaption
             if (isNaN(value)) {
                 return;
             }
-            const newDate = clone(this.props.date);
+            const newDate = clone(this.props.month);
             updater(newDate, value);
             this.props.onDateChange?.(newDate);
             handler?.(value);
diff --git a/packages/datetime/src/datePickerNavbar.tsx b/packages/datetime/src/datePickerNavbar.tsx
index d43b2d47ad9..f800f9bea5d 100644
--- a/packages/datetime/src/datePickerNavbar.tsx
+++ b/packages/datetime/src/datePickerNavbar.tsx
@@ -18,7 +18,7 @@ import classNames from "classnames";
 import * as React from "react";
 import { NavbarElementProps } from "react-day-picker";
 
-import { Button } from "@blueprintjs/core";
+import { Button, Divider } from "@blueprintjs/core";
 
 import * as Classes from "./common/classes";
 import { areSameMonth } from "./common/dateUtils";
@@ -29,6 +29,9 @@ export interface IDatePickerNavbarProps extends NavbarElementProps {
 
     hideLeftNavButton?: boolean;
     hideRightNavButton?: boolean;
+
+    /** Placed at center */
+    children?: React.ReactNode;
 }
 
 export class DatePickerNavbar extends React.PureComponent<IDatePickerNavbarProps> {
@@ -47,6 +50,7 @@ export class DatePickerNavbar extends React.PureComponent<IDatePickerNavbarProps
                         onClick={this.handlePreviousClick}
                     />
                 )}
+                {this.props.children && <div className={Classes.DATEPICKER_NAVBAR_CENTER}>{this.props.children}</div>}
                 {this.props.hideRightNavButton || (
                     <Button
                         aria-label="Go to next month"
@@ -57,6 +61,7 @@ export class DatePickerNavbar extends React.PureComponent<IDatePickerNavbarProps
                         onClick={this.handleNextClick}
                     />
                 )}
+                <Divider />
             </div>
         );
     }
diff --git a/packages/datetime/src/dateRangePicker.tsx b/packages/datetime/src/dateRangePicker.tsx
index 8ce365bf195..ffe1df495a0 100644
--- a/packages/datetime/src/dateRangePicker.tsx
+++ b/packages/datetime/src/dateRangePicker.tsx
@@ -16,7 +16,7 @@
 
 import classNames from "classnames";
 import * as React from "react";
-import DayPicker, { CaptionElementProps, DayModifiers, DayPickerProps, NavbarElementProps } from "react-day-picker";
+import DayPicker, { DayModifiers, DayPickerProps, NavbarElementProps } from "react-day-picker";
 
 import { AbstractPureComponent2, Boundary, DISPLAYNAME_PREFIX, Divider, Props } from "@blueprintjs/core";
 
@@ -25,7 +25,6 @@ import { DateRange } from "./common/dateRange";
 import * as DateUtils from "./common/dateUtils";
 import * as Errors from "./common/errors";
 import { MonthAndYear } from "./common/monthAndYear";
-import { DatePickerCaption } from "./datePickerCaption";
 import {
     combineModifiers,
     DatePickerBaseProps,
@@ -35,6 +34,7 @@ import {
     HOVERED_RANGE_MODIFIER,
     SELECTED_RANGE_MODIFIER,
 } from "./datePickerCore";
+import { DatePickerMonthYearSelect } from "./datePickerMonthYearSelect";
 import { DatePickerNavbar } from "./datePickerNavbar";
 import { DateRangeSelectionStrategy } from "./dateRangeSelectionStrategy";
 import { DateRangeShortcut, Shortcuts } from "./shortcuts";
@@ -431,7 +431,7 @@ export class DateRangePicker extends AbstractPureComponent2<DateRangePickerProps
             return (
                 <DayPicker
                     {...dayPickerBaseProps}
-                    captionElement={this.renderSingleCaption}
+                    captionElement={<></>}
                     navbarElement={this.renderSingleNavbar}
                     fromMonth={minDate}
                     month={this.state.leftView.getFullDate()}
@@ -448,7 +448,7 @@ export class DateRangePicker extends AbstractPureComponent2<DateRangePickerProps
                         key="left"
                         {...dayPickerBaseProps}
                         canChangeMonth={true}
-                        captionElement={this.renderLeftCaption}
+                        captionElement={<></>}
                         navbarElement={this.renderLeftNavbar}
                         fromMonth={minDate}
                         month={this.state.leftView.getFullDate()}
@@ -461,7 +461,7 @@ export class DateRangePicker extends AbstractPureComponent2<DateRangePickerProps
                         key="right"
                         {...dayPickerBaseProps}
                         canChangeMonth={true}
-                        captionElement={this.renderRightCaption}
+                        captionElement={<></>}
                         navbarElement={this.renderRightNavbar}
                         fromMonth={DateUtils.getDateNextMonth(minDate)}
                         month={this.state.rightView.getFullDate()}
@@ -476,7 +476,16 @@ export class DateRangePicker extends AbstractPureComponent2<DateRangePickerProps
     }
 
     private renderSingleNavbar = (navbarProps: NavbarElementProps) => (
-        <DatePickerNavbar {...navbarProps} maxDate={this.props.maxDate} minDate={this.props.minDate} />
+        <DatePickerNavbar {...navbarProps} maxDate={this.props.maxDate} minDate={this.props.minDate}>
+            <DatePickerMonthYearSelect
+                {...navbarProps}
+                maxDate={this.props.maxDate}
+                minDate={this.props.minDate}
+                onMonthChange={this.handleLeftMonthSelectChange}
+                onYearChange={this.handleLeftYearSelectChange}
+                reverseMonthAndYearMenus={this.props.reverseMonthAndYearMenus}
+            />
+        </DatePickerNavbar>
     );
 
     private renderLeftNavbar = (navbarProps: NavbarElementProps) => (
@@ -485,7 +494,16 @@ export class DateRangePicker extends AbstractPureComponent2<DateRangePickerProps
             hideRightNavButton={this.props.contiguousCalendarMonths}
             maxDate={this.props.maxDate}
             minDate={this.props.minDate}
-        />
+        >
+            <DatePickerMonthYearSelect
+                {...navbarProps}
+                maxDate={DateUtils.getDatePreviousMonth(this.props.maxDate)}
+                minDate={this.props.minDate}
+                onMonthChange={this.handleLeftMonthSelectChange}
+                onYearChange={this.handleLeftYearSelectChange}
+                reverseMonthAndYearMenus={this.props.reverseMonthAndYearMenus}
+            />
+        </DatePickerNavbar>
     );
 
     private renderRightNavbar = (navbarProps: NavbarElementProps) => (
@@ -494,40 +512,16 @@ export class DateRangePicker extends AbstractPureComponent2<DateRangePickerProps
             hideLeftNavButton={this.props.contiguousCalendarMonths}
             maxDate={this.props.maxDate}
             minDate={this.props.minDate}
-        />
-    );
-
-    private renderSingleCaption = (captionProps: CaptionElementProps) => (
-        <DatePickerCaption
-            {...captionProps}
-            maxDate={this.props.maxDate}
-            minDate={this.props.minDate}
-            onMonthChange={this.handleLeftMonthSelectChange}
-            onYearChange={this.handleLeftYearSelectChange}
-            reverseMonthAndYearMenus={this.props.reverseMonthAndYearMenus}
-        />
-    );
-
-    private renderLeftCaption = (captionProps: CaptionElementProps) => (
-        <DatePickerCaption
-            {...captionProps}
-            maxDate={DateUtils.getDatePreviousMonth(this.props.maxDate)}
-            minDate={this.props.minDate}
-            onMonthChange={this.handleLeftMonthSelectChange}
-            onYearChange={this.handleLeftYearSelectChange}
-            reverseMonthAndYearMenus={this.props.reverseMonthAndYearMenus}
-        />
-    );
-
-    private renderRightCaption = (captionProps: CaptionElementProps) => (
-        <DatePickerCaption
-            {...captionProps}
-            maxDate={this.props.maxDate}
-            minDate={DateUtils.getDateNextMonth(this.props.minDate)}
-            onMonthChange={this.handleRightMonthSelectChange}
-            onYearChange={this.handleRightYearSelectChange}
-            reverseMonthAndYearMenus={this.props.reverseMonthAndYearMenus}
-        />
+        >
+            <DatePickerMonthYearSelect
+                {...navbarProps}
+                maxDate={this.props.maxDate}
+                minDate={DateUtils.getDateNextMonth(this.props.minDate)}
+                onMonthChange={this.handleRightMonthSelectChange}
+                onYearChange={this.handleRightYearSelectChange}
+                reverseMonthAndYearMenus={this.props.reverseMonthAndYearMenus}
+            />
+        </DatePickerNavbar>
     );
 
     private handleDayMouseEnter = (day: Date, modifiers: DayModifiers, e: React.MouseEvent<HTMLDivElement>) => {
diff --git a/packages/datetime/test/datePickerCaptionTests.tsx b/packages/datetime/test/datePickerMonthYearSelectTests.tsx
similarity index 82%
rename from packages/datetime/test/datePickerCaptionTests.tsx
rename to packages/datetime/test/datePickerMonthYearSelectTests.tsx
index 89e0c2bb919..f2fb082294f 100644
--- a/packages/datetime/test/datePickerCaptionTests.tsx
+++ b/packages/datetime/test/datePickerMonthYearSelectTests.tsx
@@ -22,9 +22,9 @@ import * as sinon from "sinon";
 import { HTMLSelect } from "@blueprintjs/core";
 
 import { Classes, IDatePickerLocaleUtils } from "../src";
-import { DatePickerCaption, IDatePickerCaptionProps } from "../src/datePickerCaption";
+import { DatePickerMonthYearSelect, IDatePickerMonthYearSelectProps } from "../src/datePickerMonthYearSelect";
 
-describe("<DatePickerCaption>", () => {
+describe("<DatePickerMonthYearSelect>", () => {
     const LOCALE_UTILS: IDatePickerLocaleUtils = {
         getMonths: () => [
             "January",
@@ -43,7 +43,7 @@ describe("<DatePickerCaption>", () => {
     } as any;
 
     it("renders month and year choosers", () => {
-        const { month, year } = renderDatePickerCaption();
+        const { month, year } = renderDatePickerMonthYearSelect();
         assert.lengthOf(month, 1);
         assert.lengthOf(year, 1);
     });
@@ -51,7 +51,7 @@ describe("<DatePickerCaption>", () => {
     it("fires on*Change events as expected", () => {
         const onMonthChange = sinon.spy();
         const onYearChange = sinon.spy();
-        const { month, year } = renderDatePickerCaption({ onMonthChange, onYearChange });
+        const { month, year } = renderDatePickerMonthYearSelect({ onMonthChange, onYearChange });
 
         assert.isTrue(onMonthChange.notCalled, "onMonthChange before");
         month.simulate("change", { target: { value: 11 } });
@@ -64,10 +64,10 @@ describe("<DatePickerCaption>", () => {
         assert.strictEqual(onYearChange.args[0][0], 2014);
     });
 
-    it("caption options are only displayed for possible months and years", () => {
+    it("select options are only displayed for possible months and years", () => {
         const minDate = new Date(2014, 11, 20);
         const maxDate = new Date(2015, 0, 12);
-        const { month, year } = renderDatePickerCaption({ maxDate, minDate });
+        const { month, year } = renderDatePickerMonthYearSelect({ maxDate, minDate });
         assert.deepEqual(
             month.find("option").map(mo => mo.text()),
             ["January"],
@@ -93,7 +93,7 @@ describe("<DatePickerCaption>", () => {
             "Novembre",
             "Décembre",
         ] as any;
-        const { month } = renderDatePickerCaption({ months });
+        const { month } = renderDatePickerMonthYearSelect({ months });
         const options = month.find("option");
         assert.deepEqual(
             options.map(mo => mo.text()),
@@ -105,7 +105,7 @@ describe("<DatePickerCaption>", () => {
         const date = new Date(2017, 0, 6);
         const minDate = new Date(2015, 0, 1);
         const maxDate = new Date(2016, 11, 31);
-        const { year } = renderDatePickerCaption({ date, maxDate, minDate });
+        const { year } = renderDatePickerMonthYearSelect({ month: date, maxDate, minDate });
         const options = year.find("option");
         assert.deepEqual(
             options.map(yr => yr.text()),
@@ -114,11 +114,10 @@ describe("<DatePickerCaption>", () => {
         assert.isTrue(options.last().prop("disabled"), "2017 is not disabled");
     });
 
-    function renderDatePickerCaption(props?: Partial<IDatePickerCaptionProps>) {
+    function renderDatePickerMonthYearSelect(props?: Partial<IDatePickerMonthYearSelectProps>) {
         const wrapper = mount(
-            <DatePickerCaption
-                classNames={{} as any}
-                date={new Date(2015, 0)}
+            <DatePickerMonthYearSelect
+                month={new Date(2015, 0)}
                 locale="en"
                 localeUtils={LOCALE_UTILS}
                 maxDate={new Date(2030, 0)}
diff --git a/packages/datetime/test/datePickerTests.tsx b/packages/datetime/test/datePickerTests.tsx
index 09b53a403d4..7e0cc7cdbe9 100644
--- a/packages/datetime/test/datePickerTests.tsx
+++ b/packages/datetime/test/datePickerTests.tsx
@@ -449,7 +449,7 @@ describe("<DatePicker>", () => {
             assert.isFalse(onChange.secondCall.args[1], "expected isUserChange to be false again");
         });
 
-        it("can change displayed date with the dropdowns in the caption", () => {
+        it("can change displayed date with the dropdowns in the navbar", () => {
             const { months, root, years } = wrap(
                 <DatePicker initialMonth={new Date(2015, Months.MARCH, 2)} value={null} />,
             );
@@ -593,7 +593,7 @@ describe("<DatePicker>", () => {
             assertSelectedDays(maxDate.getDate());
         });
 
-        it("can change displayed date with the dropdowns in the caption", () => {
+        it("can change displayed date with the dropdowns in the navbar", () => {
             const { months, root, years } = wrap(<DatePicker initialMonth={new Date(2015, Months.MARCH, 2)} />);
             assert.equal(root.state("displayMonth"), Months.MARCH);
             assert.equal(root.state("displayYear"), 2015);
diff --git a/packages/datetime/test/dateRangePickerTests.tsx b/packages/datetime/test/dateRangePickerTests.tsx
index dbe66e83dec..c4dd216b34d 100644
--- a/packages/datetime/test/dateRangePickerTests.tsx
+++ b/packages/datetime/test/dateRangePickerTests.tsx
@@ -682,7 +682,7 @@ describe("<DateRangePicker>", () => {
             assert.isTrue(onChangeSpy.notCalled);
         });
 
-        it("caption options are only displayed for possible months and years", () => {
+        it("navbar options are only displayed for possible months and years", () => {
             const minDate = new Date(2015, Months.JANUARY, 5);
             const maxDate = new Date(2015, Months.JANUARY, 7);
             const { left } = render({ minDate, maxDate });
@@ -879,7 +879,7 @@ describe("<DateRangePicker>", () => {
             assertSelectedDays();
         });
 
-        it("can change displayed date with the dropdowns in the caption", () => {
+        it("can change displayed date with the dropdowns in the navbar", () => {
             const { left } = render({
                 initialMonth: new Date(2015, Months.MARCH, 2),
                 value: [null, null],
@@ -1156,7 +1156,7 @@ describe("<DateRangePicker>", () => {
                 .assertSelectedDays(1, 5);
         });
 
-        it("can change displayed date with the dropdowns in the caption", () => {
+        it("can change displayed date with the dropdowns in the navbar", () => {
             const { left } = render({ initialMonth: new Date(2015, Months.MARCH, 2) });
             left.assertMonthYear(Months.MARCH, 2015);
             left.monthSelect.simulate("change", { target: { value: Months.JANUARY } });
@@ -1359,10 +1359,7 @@ describe("<DateRangePicker>", () => {
         const harness = {
             get wrapper() {
                 // use accessor to ensure it's always the latest reference
-                return parent
-                    .find(ReactDayPicker)
-                    .find("Month")
-                    .at(which === "left" ? 0 : 1);
+                return parent.find(ReactDayPicker).at(which === "left" ? 0 : 1);
             },
             get monthSelect() {
                 return harness.wrapper.find({ className: DateClasses.DATEPICKER_MONTH_SELECT }).find("select");
diff --git a/packages/datetime/test/index.ts b/packages/datetime/test/index.ts
index 4d23b075d09..bae1ca1bef2 100644
--- a/packages/datetime/test/index.ts
+++ b/packages/datetime/test/index.ts
@@ -6,7 +6,7 @@ import "@blueprintjs/test-commons/bootstrap";
 
 import "./common/dateUtilsTests";
 import "./dateInputTests";
-import "./datePickerCaptionTests";
+import "./datePickerMonthYearSelectTests";
 import "./datePickerTests";
 import "./dateRangeInputTests";
 import "./dateRangePickerTests";
diff --git a/packages/docs-app/src/components/navHeader.tsx b/packages/docs-app/src/components/navHeader.tsx
index e6efbfc88d2..ca9328628e4 100644
--- a/packages/docs-app/src/components/navHeader.tsx
+++ b/packages/docs-app/src/components/navHeader.tsx
@@ -46,7 +46,7 @@ export class NavHeader extends React.PureComponent<INavHeaderProps> {
             >
                 <>
                     <div className="docs-nav-title">
-                        <a className="docs-logo" href="/">
+                        <a className="docs-logo" href="/" aria-label="docs home">
                             <Logo />
                         </a>
                         <div>