diff --git a/src/components/avatar/README.md b/src/components/avatar/README.md
index 87923df9d9c..d7e915f75f3 100644
--- a/src/components/avatar/README.md
+++ b/src/components/avatar/README.md
@@ -330,4 +330,4 @@ Avatars are based upon `<b-badge>` and `<b-button>` components, and as such, rel
 `badge-*` and `btn-*` variant classes, as well as the `rounded-*`
 [utility classes](/docs/reference/utility-classes).
 
-`<b-avatar>` also requires BootstrapVue's custom CSS for proper styling.
\ No newline at end of file
+`<b-avatar>` also requires BootstrapVue's custom CSS for proper styling.
diff --git a/src/components/button-toolbar/README.md b/src/components/button-toolbar/README.md
index 3690014c007..16dae2c7064 100644
--- a/src/components/button-toolbar/README.md
+++ b/src/components/button-toolbar/README.md
@@ -91,12 +91,12 @@ Enable optional keyboard navigation by setting the prop `key-nav`.
 
 | Keypress                                                              | Action                                                |
 | --------------------------------------------------------------------- | ----------------------------------------------------- |
-| <kbd>LEFT</kbd> or <kbd>UP</kbd>                                      | Move to the previous non-disabled item in the toolbar |
-| <kbd>RIGHT</kbd> or <kbd>DOWN</kbd>                                   | Move to the next non-disabled item in the toolbar     |
-| <kbd>SHIFT</kbd>+<kbd>LEFT</kbd> or <kbd>SHIFT</kbd>+<kbd>UP</kbd>    | Move to the first non-disabled item in the toolbar    |
-| <kbd>SHIFT</kbd>+<kbd>RIGHT</kbd> or <kbd>SHIFT</kbd>+<kbd>DOWN</kbd> | Move to the last non-disabled item in the toolbar     |
-| <kbd>TAB</kbd>                                                        | Move to the next control on the page                  |
-| <kbd>SHIFT</kbd>+<kbd>TAB</kbd>                                       | Move to the previous control on the page              |
+| <kbd>Left</kbd> or <kbd>Up</kbd>                                      | Move to the previous non-disabled item in the toolbar |
+| <kbd>Right</kbd> or <kbd>Down</kbd>                                   | Move to the next non-disabled item in the toolbar     |
+| <kbd>Shift</kbd>+<kbd>Left</kbd> or <kbd>Shift</kbd>+<kbd>Up</kbd>    | Move to the first non-disabled item in the toolbar    |
+| <kbd>Shift</kbd>+<kbd>Right</kbd> or <kbd>Shift</kbd>+<kbd>Down</kbd> | Move to the last non-disabled item in the toolbar     |
+| <kbd>Tab</kbd>                                                        | Move to the next control on the page                  |
+| <kbd>Shift</kbd>+<kbd>Tab</kbd>                                       | Move to the previous control on the page              |
 
 **Caution:** If you have text or text-like inputs in your toolbar, leave keyboard navigation off, as
 it is not possible to use key presses to jump out of a text (or test-like) inputs.
diff --git a/src/components/button/README.md b/src/components/button/README.md
index fc1c43e25e0..64dbce58277 100644
--- a/src/components/button/README.md
+++ b/src/components/button/README.md
@@ -5,7 +5,7 @@
 
 ## Overview
 
-BootstrapVue's `<b-button>` component generates either a `<button>` element, `<a>` element, or 
+BootstrapVue's `<b-button>` component generates either a `<button>` element, `<a>` element, or
 `<router-link>` component with the styling of a button.
 
 ```html
diff --git a/src/components/calendar/README.md b/src/components/calendar/README.md
index 18155a8f2ca..02d8cdbd0fd 100644
--- a/src/components/calendar/README.md
+++ b/src/components/calendar/README.md
@@ -290,6 +290,18 @@ formatted in the locale's language.
 You can hide this header via the `hide-header` prop. Note this only _visually hides_ the selected
 date, while keeping it available to screen reader users as an `aria-live` region.
 
+For example usage, refer to the [Internationalization section](#internationalization) below.
+
+### Optional decade navigation buttons
+
+Set the prop `show-decade-nav` to enable the previous and next decade buttons in the calendar's date
+navigation toolbar.
+
+The props `label-prev-decade` and `label-next-decade` props can be used to provide custom label text
+for the decade buttons.
+
+For example usage, refer to the [Internationalization section](#internationalization) below.
+
 ### Border and padding
 
 Fancy a calendar with a border with padding? Use Bootstrap's
@@ -489,8 +501,14 @@ the same locale as requested, depending on the supported locales of `Intl`).
     <b-col cols="12" class="mb-3">
       <label for="example-locales">Locale:</label>
       <b-form-select id="example-locales" v-model="locale" :options="locales"></b-form-select>
-      <label for="example-weekdays">Start weekday:</label>
+      <label for="example-weekdays" class="mt-2">Start weekday:</label>
       <b-form-select id="example-weekdays" v-model="weekday" :options="weekdays"></b-form-select>
+      <b-form-checkbox v-model="showDecadeNav" switch inline class="my-2">
+        Show decade navigation buttons
+      </b-form-checkbox>
+      <b-form-checkbox v-model="hideHeader" switch inline class="my-2">
+        Hide the date header
+      </b-form-checkbox>
     </b-col>
     <b-col md="auto">
       <b-calendar
@@ -498,6 +516,8 @@ the same locale as requested, depending on the supported locales of `Intl`).
         v-bind="labels[locale] || {}"
         :locale="locale"
         :start-weekday="weekday"
+        :hide-header="hideHeader"
+        :show-decade-nav="showDecadeNav"
         @context="onContext"
       ></b-calendar>
     </b-col>
@@ -515,6 +535,8 @@ the same locale as requested, depending on the supported locales of `Intl`).
       return {
         value: '',
         context: null,
+        showDecadeNav: false,
+        hideHeader: false,
         locale: 'en-US',
         locales: [
           { value: 'en-US', text: 'English US (en-US)' },
@@ -530,11 +552,13 @@ the same locale as requested, depending on the supported locales of `Intl`).
         ],
         labels: {
           de: {
+            labelPrevDecade: 'Vorheriges Jahrzehnt',
             labelPrevYear: 'Vorheriges Jahr',
             labelPrevMonth: 'Vorheriger Monat',
             labelCurrentMonth: 'Aktueller Monat',
             labelNextMonth: 'Nächster Monat',
             labelNextYear: 'Nächstes Jahr',
+            labelNextDecade: 'Nächstes Jahrzehnt',
             labelToday: 'Heute',
             labelSelected: 'Ausgewähltes Datum',
             labelNoDateSelected: 'Kein Datum gewählt',
@@ -543,11 +567,13 @@ the same locale as requested, depending on the supported locales of `Intl`).
             labelHelp: 'Mit den Pfeiltasten durch den Kalender navigieren'
           },
           'ar-EG': {
+            labelPrevDecade: 'العقد السابق',
             labelPrevYear: 'العام السابق',
             labelPrevMonth: 'الشهر السابق',
             labelCurrentMonth: 'الشهر الحالي',
             labelNextMonth: 'الشهر المقبل',
             labelNextYear: 'العام المقبل',
+            labelNextDecade: 'العقد القادم',
             labelToday: 'اليوم',
             labelSelected: 'التاريخ المحدد',
             labelNoDateSelected: 'لم يتم اختيار تاريخ',
@@ -556,11 +582,13 @@ the same locale as requested, depending on the supported locales of `Intl`).
             labelHelp: 'استخدم مفاتيح المؤشر للتنقل في التواريخ'
           },
           zh: {
+            labelPrevDecade: '过去十年',
             labelPrevYear: '上一年',
             labelPrevMonth: '上个月',
             labelCurrentMonth: '当前月份',
             labelNextMonth: '下个月',
             labelNextYear: '明年',
+            labelNextDecade: '下一个十年',
             labelToday: '今天',
             labelSelected: '选定日期',
             labelNoDateSelected: '未选择日期',
@@ -610,6 +638,10 @@ Keyboard navigation:
 - <kbd>PageDown</kbd> moves to the same day in the next month
 - <kbd>Alt</kbd>+<kbd>PageUp</kbd> moves to the same day and month in the previous year
 - <kbd>Alt</kbd>+<kbd>PageDown</kbd> moves to the same day and month in the next year
+- <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>PageUp</kbd> moves to the same day and month in the previous
+  decade
+- <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>PageDown</kbd> moves to the same day and month in the next
+  decade
 - <kbd>Home</kbd> moves to today's date
 - <kbd>End</kbd> moves to the current selected date, or today if no selected date
 - <kbd>Enter</kbd> or <kbd>Space</kbd> selects the currently highlighted (focused) day
diff --git a/src/components/calendar/calendar.js b/src/components/calendar/calendar.js
index a5a2e5254f3..98b469027a2 100644
--- a/src/components/calendar/calendar.js
+++ b/src/components/calendar/calendar.js
@@ -16,6 +16,8 @@ import {
   oneMonthAhead,
   oneYearAgo,
   oneYearAhead,
+  oneDecadeAgo,
+  oneDecadeAhead,
   parseYMD,
   resolveLocale
 } from '../../utils/date'
@@ -26,7 +28,12 @@ import { toInteger } from '../../utils/number'
 import { toString } from '../../utils/string'
 import idMixin from '../../mixins/id'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
-import { BIconChevronLeft, BIconChevronDoubleLeft, BIconCircleFill } from '../../icons/icons'
+import {
+  BIconChevronLeft,
+  BIconChevronDoubleLeft,
+  BIconChevronBarLeft,
+  BIconCircleFill
+} from '../../icons/icons'
 
 // --- Constants ---
 
@@ -141,6 +148,11 @@ export const BCalendar = Vue.extend({
       type: Boolean,
       default: false
     },
+    showDecadeNav: {
+      // When `true` enables the decade navigation buttons
+      type: Boolean,
+      default: false
+    },
     hidden: {
       // When `true`, renders a comment node, but keeps the component instance active
       // Mainly for <b-form-date>, so that we can get the component's value and locale
@@ -158,6 +170,10 @@ export const BCalendar = Vue.extend({
       // default: null
     },
     // Labels for buttons and keyboard shortcuts
+    labelPrevDecade: {
+      type: String,
+      default: () => getComponentConfig(NAME, 'labelPrevDecade')
+    },
     labelPrevYear: {
       type: String,
       default: () => getComponentConfig(NAME, 'labelPrevYear')
@@ -178,6 +194,10 @@ export const BCalendar = Vue.extend({
       type: String,
       default: () => getComponentConfig(NAME, 'labelNextYear')
     },
+    labelNextDecade: {
+      type: String,
+      default: () => getComponentConfig(NAME, 'labelNextDecade')
+    },
     labelToday: {
       type: String,
       default: () => getComponentConfig(NAME, 'labelToday')
@@ -397,6 +417,10 @@ export const BCalendar = Vue.extend({
       return createDateFormatter(this.calendarLocale, { day: 'numeric', calendar: 'gregory' })
     },
     // Disabled states for the nav buttons
+    prevDecadeDisabled() {
+      const min = this.computedMin
+      return this.disabled || (min && lastDateOfMonth(oneDecadeAgo(this.activeDate)) < min)
+    },
     prevYearDisabled() {
       const min = this.computedMin
       return this.disabled || (min && lastDateOfMonth(oneYearAgo(this.activeDate)) < min)
@@ -417,7 +441,11 @@ export const BCalendar = Vue.extend({
       const max = this.computedMax
       return this.disabled || (max && firstDateOfMonth(oneYearAhead(this.activeDate)) > max)
     },
-    // Calendar generation
+    nextDecadeDisabled() {
+      const max = this.computedMax
+      return this.disabled || (max && firstDateOfMonth(oneDecadeAhead(this.activeDate)) > max)
+    },
+    // Calendar dates generation
     calendar() {
       const matrix = []
       const firstDay = this.calendarFirstDay
@@ -571,8 +599,7 @@ export const BCalendar = Vue.extend({
       // Calendar keyboard navigation
       // Handles PAGEUP/PAGEDOWN/END/HOME/LEFT/UP/RIGHT/DOWN
       // Focuses grid after updating
-      const keyCode = evt.keyCode
-      const altKey = evt.altKey
+      const { altKey, ctrlKey, keyCode } = evt
       if (!arrayIncludes([PAGEUP, PAGEDOWN, END, HOME, LEFT, UP, RIGHT, DOWN], keyCode)) {
         /* istanbul ignore next */
         return
@@ -586,13 +613,15 @@ export const BCalendar = Vue.extend({
       const isRTL = this.isRTL
       if (keyCode === PAGEUP) {
         // PAGEUP - Previous month/year
-        activeDate = (altKey ? oneYearAgo : oneMonthAgo)(activeDate)
+        activeDate = (altKey ? (ctrlKey ? oneDecadeAgo : oneYearAgo) : oneMonthAgo)(activeDate)
         // We check the first day of month to be in rage
         checkDate = createDate(activeDate)
         checkDate.setDate(1)
       } else if (keyCode === PAGEDOWN) {
         // PAGEDOWN - Next month/year
-        activeDate = (altKey ? oneYearAhead : oneMonthAhead)(activeDate)
+        activeDate = (altKey ? (ctrlKey ? oneDecadeAhead : oneYearAhead) : oneMonthAhead)(
+          activeDate
+        )
         // We check the last day of month to be in rage
         checkDate = createDate(activeDate)
         checkDate.setMonth(checkDate.getMonth() + 1)
@@ -670,6 +699,9 @@ export const BCalendar = Vue.extend({
         this.focus()
       }
     },
+    gotoPrevDecade() {
+      this.activeYMD = formatYMD(this.constrainDate(oneDecadeAgo(this.activeDate)))
+    },
     gotoPrevYear() {
       this.activeYMD = formatYMD(this.constrainDate(oneYearAgo(this.activeDate)))
     },
@@ -686,6 +718,9 @@ export const BCalendar = Vue.extend({
     gotoNextYear() {
       this.activeYMD = formatYMD(this.constrainDate(oneYearAhead(this.activeDate)))
     },
+    gotoNextDecade() {
+      this.activeYMD = formatYMD(this.constrainDate(oneDecadeAhead(this.activeDate)))
+    },
     onHeaderClick() {
       if (!this.disabled) {
         this.activeYMD = this.selectedYMD || formatYMD(this.getToday())
@@ -700,6 +735,7 @@ export const BCalendar = Vue.extend({
     }
 
     const isRTL = this.isRTL
+    const hideDecadeNav = !this.showDecadeNav
     const todayYMD = formatYMD(this.getToday())
     const selectedYMD = this.selectedYMD
     const activeYMD = this.activeYMD
@@ -762,11 +798,13 @@ export const BCalendar = Vue.extend({
     )
 
     // Content for the date navigation buttons
+    const $prevDecadeIcon = h(BIconChevronBarLeft, { props: { shiftV: 0.5, flipH: isRTL } })
     const $prevYearIcon = h(BIconChevronDoubleLeft, { props: { shiftV: 0.5, flipH: isRTL } })
     const $prevMonthIcon = h(BIconChevronLeft, { props: { shiftV: 0.5, flipH: isRTL } })
     const $thisMonthIcon = h(BIconCircleFill, { props: { shiftV: 0.5 } })
     const $nextMonthIcon = h(BIconChevronLeft, { props: { shiftV: 0.5, flipH: !isRTL } })
     const $nextYearIcon = h(BIconChevronDoubleLeft, { props: { shiftV: 0.5, flipH: !isRTL } })
+    const $nextDecadeIcon = h(BIconChevronBarLeft, { props: { shiftV: 0.5, flipH: !isRTL } })
 
     // Utility to create the date navigation buttons
     const makeNavBtn = (content, label, handler, btnDisabled, shortcut) => {
@@ -802,6 +840,15 @@ export const BCalendar = Vue.extend({
         }
       },
       [
+        hideDecadeNav
+          ? h()
+          : makeNavBtn(
+              $prevDecadeIcon,
+              this.labelPrevDecade,
+              this.gotoPrevDecade,
+              this.prevDecadeDisabled,
+              'Ctrl+Alt+PageDown'
+            ),
         makeNavBtn(
           $prevYearIcon,
           this.labelPrevYear,
@@ -836,7 +883,16 @@ export const BCalendar = Vue.extend({
           this.gotoNextYear,
           this.nextYearDisabled,
           'Alt+PageUp'
-        )
+        ),
+        hideDecadeNav
+          ? h()
+          : makeNavBtn(
+              $nextDecadeIcon,
+              this.labelNextDecade,
+              this.gotoNextDecade,
+              this.nextDecadeDisabled,
+              'Ctrl+Alt+PageUp'
+            )
       ]
     )
 
diff --git a/src/components/calendar/calendar.spec.js b/src/components/calendar/calendar.spec.js
index a462d49a0f8..45834f0949f 100644
--- a/src/components/calendar/calendar.spec.js
+++ b/src/components/calendar/calendar.spec.js
@@ -126,6 +126,7 @@ describe('calendar', () => {
     const wrapper = mount(BCalendar, {
       attachToDocument: true,
       propsData: {
+        showDecadeNav: true,
         value: '2020-02-15' // Leap year
       }
     })
@@ -139,28 +140,40 @@ describe('calendar', () => {
     expect($grid.attributes('data-month')).toBe('2020-02')
 
     const $navBtns = wrapper.findAll('.b-calendar-nav button')
-    expect($navBtns.length).toBe(5)
+    expect($navBtns.length).toBe(7)
 
     // Prev Month
-    $navBtns.at(1).trigger('click')
+    $navBtns.at(2).trigger('click')
     await waitNT(wrapper.vm)
     await waitRAF()
     expect($grid.attributes('data-month')).toBe('2020-01')
 
     // Next Month
-    $navBtns.at(3).trigger('click')
+    $navBtns.at(4).trigger('click')
     await waitNT(wrapper.vm)
     await waitRAF()
     expect($grid.attributes('data-month')).toBe('2020-02')
 
     // Prev Year
-    $navBtns.at(0).trigger('click')
+    $navBtns.at(1).trigger('click')
     await waitNT(wrapper.vm)
     await waitRAF()
     expect($grid.attributes('data-month')).toBe('2019-02')
 
     // Next Year
-    $navBtns.at(4).trigger('click')
+    $navBtns.at(5).trigger('click')
+    await waitNT(wrapper.vm)
+    await waitRAF()
+    expect($grid.attributes('data-month')).toBe('2020-02')
+
+    // Prev Decade
+    $navBtns.at(0).trigger('click')
+    await waitNT(wrapper.vm)
+    await waitRAF()
+    expect($grid.attributes('data-month')).toBe('2010-02')
+
+    // Next Decade
+    $navBtns.at(6).trigger('click')
     await waitNT(wrapper.vm)
     await waitRAF()
     expect($grid.attributes('data-month')).toBe('2020-02')
@@ -169,7 +182,7 @@ describe('calendar', () => {
     // Handle the rare case this test is run right at midnight where
     // the current month rolled over at midnight when clicked
     const thisMonth1 = formatYMD(new Date()).slice(0, -3)
-    $navBtns.at(2).trigger('click')
+    $navBtns.at(3).trigger('click')
     await waitNT(wrapper.vm)
     await waitRAF()
     const thisMonth2 = formatYMD(new Date()).slice(0, -3)
diff --git a/src/components/calendar/package.json b/src/components/calendar/package.json
index 1dd4e4d172a..eb00bccd406 100644
--- a/src/components/calendar/package.json
+++ b/src/components/calendar/package.json
@@ -87,7 +87,12 @@
           },
           {
             "prop": "hideHeader",
-            "description": "When set, visually hides the selected date header"
+            "description": "When `true`, visually hides the selected date header"
+          },
+          {
+            "prop": "showDecadeNav",
+            "version": "2.11.0",
+            "description": "When `true`, shows the +/- decade navigation buttons"
           },
           {
             "prop": "roleDescription",
@@ -95,7 +100,13 @@
           },
           {
             "prop": "hidden",
-            "description": "When set, renders a comment node instead of the calendar widget while keeping the Vue instance active. Mainly used when implementing a custom date picker"
+            "description": "When `true`, renders a comment node instead of the calendar widget while keeping the Vue instance active. Mainly used when implementing a custom date picker"
+          },
+          {
+            "prop": "labelPrevDecade",
+            "version": "2.11.0",
+            "settings": true,
+            "description": "Value of the `aria-label` and `title` attributes on the optional `Previous Decade` navigation button"
           },
           {
             "prop": "labelPrevYear",
@@ -122,6 +133,12 @@
             "settings": true,
             "description": "Value of the `aria-label` and `title` attributes on the `Next Year` navigation button"
           },
+          {
+            "prop": "labelNextDecade",
+            "version": "2.11.0",
+            "settings": true,
+            "description": "Value of the `aria-label` and `title` attributes on the optional `Next Decade` navigation button"
+          },
           {
             "prop": "labelSelected",
             "settings": true,
diff --git a/src/components/dropdown/README.md b/src/components/dropdown/README.md
index 0f5f6f33f96..1fd609ab98a 100644
--- a/src/components/dropdown/README.md
+++ b/src/components/dropdown/README.md
@@ -697,8 +697,8 @@ the contained dropdown sub-components.
 
 Dropdowns support keyboard navigation, emulating native `<select>` behaviour.
 
-Note that <kbd>DOWN</kbd> and <kbd>UP</kbd> will not move focus into `<b-dropdown-form>` sub
-components, but users can still use <kbd>TAB</kbd> or <kbd>SHIFT</kbd>+<kbd>TAB</kbd> to move into
+Note that <kbd>Down</kbd> and <kbd>Up</kbd> will not move focus into `<b-dropdown-form>` sub
+components, but users can still use <kbd>Tab</kbd> or <kbd>Shift</kbd>+<kbd>Tab</kbd> to move into
 form controls within the menu.
 
 ## Implementation notes
diff --git a/src/components/form-datepicker/README.md b/src/components/form-datepicker/README.md
index 44bf21dcc76..e13671d0dcc 100644
--- a/src/components/form-datepicker/README.md
+++ b/src/components/form-datepicker/README.md
@@ -315,6 +315,16 @@ component's value.
 Want a fancy popup with a dark background instead of a light background? Set the `dark` prop to
 `true` to enable the dark background.
 
+### Optional decade navigation buttons
+
+Set the prop `show-decade-nav` to enable the previous and next decade buttons in the datepicker's
+date navigation toolbar.
+
+The props `label-prev-decade` and `label-next-decade` props can be used to provide custom label text
+for the decade buttons.
+
+For example usage, refer to the [Internationalization section](#internationalization) below.
+
 ### Button only mode
 
 <span class="badge badge-info small">v2.7.0+</span>
@@ -454,13 +464,15 @@ Saturday.
     <label for="example-weekdays">Start weekday:</label>
     <b-form-select id="example-weekdays" v-model="weekday" :options="weekdays" class="mb-2"></b-form-select>
 
-    <b-form-checkbox v-model="showDecadeNav" switch inline class="my-2">
-      Show decade navigation buttons
-    </b-form-checkbox>
+    <div>
+      <b-form-checkbox v-model="showDecadeNav" switch inline class="my-2">
+        Show decade navigation buttons
+      </b-form-checkbox>
 
-    <b-form-checkbox v-model="hideHeader" switch inline class="my-2">
-      Hide calendar header
-    </b-form-checkbox>
+      <b-form-checkbox v-model="hideHeader" switch inline class="my-2">
+        Hide calendar header
+      </b-form-checkbox>
+    </div>
 
     <label for="example-i18n-picker">Date picker:</label>
     <b-form-datepicker
@@ -564,7 +576,7 @@ The popup calendar supports the same
 [keyboard controls as `<b-calendar>`](/docs/components/calendar#accessibility), along with the
 following:
 
-- <kbd>ESC</kbd> will close the popup calendar without selecting a date
+- <kbd>Esc</kbd> will close the popup calendar without selecting a date
 
 When internationalizing the datepicker, it is important to also update the `label-*` props with
 appropriate translated strings, so that international screen reader users will hear the correct
@@ -579,7 +591,8 @@ details.
 [`<b-dropdown>`](/docs/components/dropdown).
 
 `<b-form-datepicker>` uses Bootstrap's margin, padding, border, and flex utility classes, along with
-button (`btn-*`) classes, and the `form-control*` (plus validation) classes.
+button (`btn-*`) classes, dropdown (`dropdown*`) classes, and the `form-control*` (plus validation)
+classes.
 
 BootstrapVue's Custom SCSS/CSS is also required for proper styling of the date picker and calendar.
 
diff --git a/src/components/form-datepicker/form-datepicker.js b/src/components/form-datepicker/form-datepicker.js
index a4e6d9e7112..44f2ea80089 100644
--- a/src/components/form-datepicker/form-datepicker.js
+++ b/src/components/form-datepicker/form-datepicker.js
@@ -94,6 +94,11 @@ const propsMixin = {
       type: Boolean,
       default: false
     },
+    showDecadeNav: {
+      // When `true` enables the decade navigation buttons
+      type: Boolean,
+      default: false
+    },
     locale: {
       type: [String, Array]
       // default: null
@@ -175,6 +180,10 @@ const propsMixin = {
     },
     // Labels for buttons and keyboard shortcuts
     // These pick BCalendar global config if no BFormDate global config
+    labelPrevDecade: {
+      type: String,
+      default: () => getConfigFallback('labelPrevDecade')
+    },
     labelPrevYear: {
       type: String,
       default: () => getConfigFallback('labelPrevYear')
@@ -195,6 +204,10 @@ const propsMixin = {
       type: String,
       default: () => getConfigFallback('labelNextYear')
     },
+    labelNextDecade: {
+      type: String,
+      default: () => getConfigFallback('labelNextDecade')
+    },
     labelToday: {
       type: String,
       default: () => getConfigFallback('labelToday')
@@ -293,11 +306,14 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
         selectedVariant: self.selectedVariant,
         todayVariant: self.todayVariant,
         hideHeader: self.hideHeader,
+        showDecadeNav: self.showDecadeNav,
+        labelPrevDecade: self.labelPrevDecade,
         labelPrevYear: self.labelPrevYear,
         labelPrevMonth: self.labelPrevMonth,
         labelCurrentMonth: self.labelCurrentMonth,
         labelNextMonth: self.labelNextMonth,
         labelNextYear: self.labelNextYear,
+        labelNextDecade: self.labelNextDecade,
         labelToday: self.labelToday,
         labelSelected: self.labelSelected,
         labelNoDateSelected: self.labelNoDateSelected,
diff --git a/src/components/form-datepicker/package.json b/src/components/form-datepicker/package.json
index 40816a62cbc..33a6c9c183f 100644
--- a/src/components/form-datepicker/package.json
+++ b/src/components/form-datepicker/package.json
@@ -98,7 +98,12 @@
           },
           {
             "prop": "hideHeader",
-            "description": "When set, visually hides the selected date header"
+            "description": "When `true`, visually hides the selected date header"
+          },
+          {
+            "prop": "showDecadeNav",
+            "version": "2.11.0",
+            "description": "When `true`, shows the +/- decade navigation buttons"
           },
           {
             "prop": "menuClass",
@@ -173,6 +178,12 @@
             "prop": "placeholder",
             "description": "Text so show in the form control when no date is selected. Defaults to the `label-no-date-selected` prop value"
           },
+          {
+            "prop": "labelPrevDecade",
+            "version": "2.11.0",
+            "settings": true,
+            "description": "Value of the `aria-label` and `title` attributes on the optional `Previous Decade` navigation button"
+          },
           {
             "prop": "labelPrevYear",
             "settings": true,
@@ -198,6 +209,12 @@
             "settings": true,
             "description": "Value of the `aria-label` and `title` attributes on the `Next Year` navigation button"
           },
+          {
+            "prop": "labelNextDecade",
+            "version": "2.11.0",
+            "settings": true,
+            "description": "Value of the `aria-label` and `title` attributes on the optional `Next Decade` navigation button"
+          },
           {
             "prop": "labelSelected",
             "settings": true,
diff --git a/src/components/form-tags/README.md b/src/components/form-tags/README.md
index 581a92132db..9fa59857670 100644
--- a/src/components/form-tags/README.md
+++ b/src/components/form-tags/README.md
@@ -11,7 +11,7 @@ user interface, or create your own custom interface via the use of the default s
 Tags will have any leading and tailing whitespace removed, and duplicate tags are not permitted.
 Tags that contain spaces are permitted by default.
 
-Tags are added by clicking the **Add** button, pressing the <kbd>ENTER</kbd> key or optionally when
+Tags are added by clicking the **Add** button, pressing the <kbd>Enter</kbd> key or optionally when
 the `change` event fires on the new tag input (i.e. when focus moves from the input). The **Add**
 button will only appear when the user has entered a new tag value.
 
@@ -39,18 +39,18 @@ button will only appear when the user has entered a new tag value.
 <!-- form-tags-example.vue -->
 ```
 
-You can disable adding a new tag when pressing <kbd>ENTER</kbd> via the `no-add-on-enter` prop, and
+You can disable adding a new tag when pressing <kbd>Enter</kbd> via the `no-add-on-enter` prop, and
 enable adding a tag on the input's `change` event via the `add-on-change` prop.
 
 ## Tag creation using separators
 
-To auto create tags when a separator character is typed (i.e. <kbd>SPACE</kbd>, <kbd>,</kbd>, etc),
+To auto create tags when a separator character is typed (i.e. <kbd>Space</kbd>, <kbd>,</kbd>, etc),
 set the `separator` prop to the character that will trigger the tag to be added. If multiple
 separator characters are needed, then include them as a single string (i.e. `' ,;'`), or an array of
-characters (i.e. `[' ', ',', ';']`), which will trigger a new tag to be added when <kbd>SPACE</kbd>,
+characters (i.e. `[' ', ',', ';']`), which will trigger a new tag to be added when <kbd>Space</kbd>,
 <kbd>,</kbd>, _or_ <kbd>;</kbd> are typed). Separators must be a single character.
 
-The following example will auto create a tag when <kbd>SPACE</KBD>, <kbd>,</kbd>, or <kbd>;</kbd>
+The following example will auto create a tag when <kbd>Space</KBD>, <kbd>,</kbd>, or <kbd>;</kbd>
 are typed:
 
 ```html
@@ -84,8 +84,8 @@ are typed:
 
 ## Last tag removal via backspace keypress
 
-When the prop `remove-on-delete` is set, and the user presses <kbd>BACKSPACE</kbd> (or
-<kbd>DEL</kbd>) _and_ the input value is empty, the last tag in the tag list will be removed.
+When the prop `remove-on-delete` is set, and the user presses <kbd>Backspace</kbd> (or
+<kbd>Del</kbd>) _and_ the input value is empty, the last tag in the tag list will be removed.
 
 ```html
 <template>
@@ -102,7 +102,7 @@ When the prop `remove-on-delete` is set, and the user presses <kbd>BACKSPACE</kb
       class="mb-2"
     ></b-form-tags>
     <b-form-text id="tags-remove-on-delete-help">
-      Press <kbd>BACKSPACE</kbd> to remove the last tag entered
+      Press <kbd>Backspace</kbd> to remove the last tag entered
     </b-form-text>
     <p>Value: {{ value }}</p>
   </div>
@@ -261,7 +261,7 @@ three arrays as its arguments:
 - `duplicateTags` (tags that would be a duplicate of existing or validTags).
 
 The event will be emitted only when the new tag input changes (characters are entered that would be
-considered part of a tag), or when the user attempts to add a tag (i.e. via <kbd>ENTER</kbd>,
+considered part of a tag), or when the user attempts to add a tag (i.e. via <kbd>Enter</kbd>,
 clicking the **Add** button, or entering a separator). The three arrays will be empty when the user
 clears the new tag input element (or contains just spaces).
 
@@ -379,7 +379,7 @@ The `inputHandlers` object contains event handlers to bind (`v-on`) to the new t
 | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `input`   | Function | Event handler for the input element `input` event. Accepts a single argument of either an event object or a string. Updates the internal v-model for the new tag input element |
 | `change`  | Function | Event handler for the input element `change` event. Accepts a single argument of either an event object or a string. Change will trigger adding the tag.                       |
-| `keydown` | Function | Event handler for the input element `keydown` <kbd>ENTER</kbd> and <kbd>DEL</kbd> events. Accepts a single argument which is the native keydown event object                   |
+| `keydown` | Function | Event handler for the input element `keydown` <kbd>Enter</kbd> and <kbd>Del</kbd> events. Accepts a single argument which is the native keydown event object                   |
 
 The `change` handler, when needed, must be enabled via the `add-on-change` prop, otherwise it is a
 noop method.
diff --git a/src/components/form-timepicker/README.md b/src/components/form-timepicker/README.md
index e78bb6030a1..40d34fce18b 100644
--- a/src/components/form-timepicker/README.md
+++ b/src/components/form-timepicker/README.md
@@ -413,7 +413,7 @@ time/hour formatting.
 The popup time supports the same keyboard controls as
 [`<b-time>`](/docs/components/time#accessibility), along with the following:
 
-- <kbd>ESC</kbd> will close the popup time without selecting a time
+- <kbd>Esc</kbd> will close the popup time without selecting a time
 
 When internationalizing the timepicker, it is important to also update the `label-*` props with
 appropriate translated strings, so that international screen reader users will hear the correct
@@ -427,7 +427,8 @@ Refer to the [`<b-time>`](/docs/components/time#accessibility) documentation for
 [`<b-dropdown>`](/docs/components/dropdown).
 
 `<b-form-timepicker>` uses Bootstrap's margin, padding, border, and flex utility classes, along with
-button (`btn-*`) classes, and the `form-control*` (plus validation) classes.
+button (`btn-*`) classes, dropdown (`dropdown*`) classes, and the `form-control*` (plus validation)
+classes.
 
 BootstrapVue's Custom SCSS/CSS is also required for proper styling of the time picker and popup.
 
diff --git a/src/components/modal/README.md b/src/components/modal/README.md
index 3f6d104317a..07509a6f9b4 100644
--- a/src/components/modal/README.md
+++ b/src/components/modal/README.md
@@ -329,7 +329,7 @@ methods:
 | Property or Method | Type     | Description                                                                                                                                                                                                                                                                                                 |
 | ------------------ | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `preventDefault()` | Method   | When called prevents the modal from closing                                                                                                                                                                                                                                                                 |
-| `trigger`          | Property | Will be one of: `ok` (Default **OK** Clicked), `cancel` (Default **Cancel** clicked), `esc` (if the <kbd>ESC</kbd> key was pressed), `backdrop` (if the backdrop was clicked), `headerclose` (if the header X button was clicked), the first argument provided to the `hide()` method, or `null` otherwise. |
+| `trigger`          | Property | Will be one of: `ok` (Default **OK** Clicked), `cancel` (Default **Cancel** clicked), `esc` (if the <kbd>Esc</kbd> key was pressed), `backdrop` (if the backdrop was clicked), `headerclose` (if the header X button was clicked), the first argument provided to the `hide()` method, or `null` otherwise. |
 | `target`           | Property | A reference to the modal element                                                                                                                                                                                                                                                                            |
 | `vueTarget`        | property | A reference to the modal's Vue VM instance                                                                                                                                                                                                                                                                  |
 | `componentId`      | property | The modal's ID                                                                                                                                                                                                                                                                                              |
@@ -777,7 +777,7 @@ format instead of <samp>kebab-case</samp>.
 Both methods return a `Promise` (requires a polyfill for IE 11 and older browser support) which
 resolve into a value when the modal hides. `.msgBoxOk()` always resolves to the value `true`, while
 `.msgBoxConfirm()` resolves to either `true` (OK button pressed), `false` (CANCEL button pressed),
-or `null` (if the modal was closed via backdrop click, <kbd>ESC</kbd> press, or some other means.
+or `null` (if the modal was closed via backdrop click, <kbd>Esc</kbd> press, or some other means.
 
 If `message` is not provided, both methods will return immediately with the value `undefined`.
 
@@ -1184,8 +1184,8 @@ reasons.
 Notes on `v-b-modal` directive accessibility:
 
 - If the element is anything other than a `<button>` (or component that renders a `<button>`), the
-  ARIA `role` will be set to `button`, and a keydown event listeners for <kbd>ENTER</kbd> and
-  <kbd>SPACE</kbd> will be added, along with a `click` listener.
+  ARIA `role` will be set to `button`, and a keydown event listeners for <kbd>Enter</kbd> and
+  <kbd>Space</kbd> will be added, along with a `click` listener.
 - If the element is anything other than a `<button>` or `<a>` (or a component that renders either),
   then a `tabindex` of `0` will be added to the element to ensure accessibility, unless there is
   already a `tabindex` set.
diff --git a/src/components/overlay/README.md b/src/components/overlay/README.md
index 764f6bdb0e9..5d60d9769c6 100644
--- a/src/components/overlay/README.md
+++ b/src/components/overlay/README.md
@@ -518,7 +518,7 @@ have been disabled and are _not_ in the document tab sequence.
 
 Here are just a few examples of common use cases of `<b-overlay>`. In all cases, we disable any
 interactive elements in the obscured area to prevent reachability via keyboard navigation (i.e.
-<kbd>TAB</kbd> key) or screen reader access.
+<kbd>Tab</kbd> key) or screen reader access.
 
 Please refer to the [Accessibility section](#accessibility) for additional details and concerns.
 
diff --git a/src/components/pagination-nav/README.md b/src/components/pagination-nav/README.md
index 3ae237f8feb..9dd6b79c5f0 100644
--- a/src/components/pagination-nav/README.md
+++ b/src/components/pagination-nav/README.md
@@ -517,7 +517,7 @@ recommended unless the content of the button textually conveys its purpose.
 
 ### Keyboard navigation
 
-`<b-pagination-nav>` supports standard <kbd>TAB</kbd> key navigation.
+`<b-pagination-nav>` supports standard <kbd>Tab</kbd> key navigation.
 
 ## See also
 
diff --git a/src/components/pagination/README.md b/src/components/pagination/README.md
index 28969c396ed..b0959164817 100644
--- a/src/components/pagination/README.md
+++ b/src/components/pagination/README.md
@@ -403,11 +403,11 @@ recommended unless the content of the button textually conveys its purpose.
 pattern.
 
 - Tabbing into the pagination component will autofocus the current active page button
-- <kbd>LEFT</kbd> (or <kbd>UP</kbd>) and <kbd>RIGHT</kbd> (or <kbd>DOWN</kbd>) arrow keys will focus
+- <kbd>Left</kbd> (or <kbd>Up</kbd>) and <kbd>Right</kbd> (or <kbd>Down</kbd>) arrow keys will focus
   the previous and next buttons, respectively, in the page list
-- <kbd>ENTER</kbd> or <kbd>SPACE</kbd> keys will select (click) the currently focused page button
-- Pressing <kbd>TAB</kbd> will move to the next control or link on the page, while pressing
-  <kbd>SHIFT</kbd>+<kbd>TAB</kbd> will move to the previous control or link on the page.
+- <kbd>Enter</kbd> or <kbd>Space</kbd> keys will select (click) the currently focused page button
+- Pressing <kbd>Tab</kbd> will move to the next control or link on the page, while pressing
+  <kbd>Shift</kbd>+<kbd>Tab</kbd> will move to the previous control or link on the page.
 
 ## See also
 
diff --git a/src/components/popover/README.md b/src/components/popover/README.md
index a26a0d52575..73ec149b49e 100644
--- a/src/components/popover/README.md
+++ b/src/components/popover/README.md
@@ -935,7 +935,7 @@ Additionally, while it is possible to also include interactive controls (such as
 links) in your popover, be aware that currently the popover does not manage keyboard focus order.
 When a keyboard user opens a popover, focus remains on the triggering element, and as the popover
 usually does not immediately follow the trigger in the document's structure, there is no guarantee
-that moving forward/pressing <kbd>TAB</kbd> will move a keyboard user into the popover itself. In
+that moving forward/pressing <kbd>Tab</kbd> will move a keyboard user into the popover itself. In
 short, simply adding interactive controls to a popover is likely to make these controls
 unreachable/unusable for keyboard users and users of assistive technologies, or at the very least
 make for an illogical overall focus order. **In these cases, consider using a `<b-modal>` dialog
diff --git a/src/components/sidebar/README.md b/src/components/sidebar/README.md
index 818db7eccfb..fde3df5038d 100644
--- a/src/components/sidebar/README.md
+++ b/src/components/sidebar/README.md
@@ -284,7 +284,7 @@ When the sidebar is opened, the entire sidebar will receive focus, which is desi
 reader and keyboard-only users. When the sidebar is closed, the element that previously had focus
 before the sidebar was opened will be re-focused.
 
-When the sidebar is open, users can press <kbd>ESC</kbd> to close the sidebar. To disable this
+When the sidebar is open, users can press <kbd>Esc</kbd> to close the sidebar. To disable this
 feature, set the `no-close-on-esc` prop to `true`.
 
 When you have hidden the header, or do not have a title for the sidebar, set either `aria-label` to
diff --git a/src/components/table/README.md b/src/components/table/README.md
index c99002f2caf..61a294362d8 100644
--- a/src/components/table/README.md
+++ b/src/components/table/README.md
@@ -1510,8 +1510,8 @@ Users can easily change the selecting mode by setting the `select-mode` prop.
 
 - `'multi'`: Each click will select/deselect the row (default mode)
 - `'single'`: Only a single row can be selected at one time
-- `'range'`: Any row clicked is selected, any other deselected. <kbd>SHIFT</kbd> + click selects a
-  range of rows, and <kbd>CTRL</kbd> (or <kbd>CMD</kbd>) + click will toggle the selected row.
+- `'range'`: Any row clicked is selected, any other deselected. <kbd>Shift</kbd> + click selects a
+  range of rows, and <kbd>Ctrl</kbd> (or <kbd>Cmd</kbd>) + click will toggle the selected row.
 
 When a table is `selectable` and the user clicks on a row, `<b-table>` will emit the `row-selected`
 event, passing a single argument which is the complete list of selected items. **Treat this argument
@@ -2777,7 +2777,7 @@ When using `<b-table-simple>` with the helper table components, elements will ha
 roles applied by default, of which you can optionally override. When using click handlers on the
 `<b-table-simple>` helper components, you will need to apply appropriate `aria-*` attributes, and
 set `tabindex="0"` to make the click actions accessible to screen reader and keyboard-only users.
-You should also listen for `@keydown.enter.prevent` to handle users pressing <kbd>ENTER</kbd> to
+You should also listen for `@keydown.enter.prevent` to handle users pressing <kbd>Enter</kbd> to
 trigger your click on cells or rows (required for accessibility for keyboard-only users).
 
 ### Heading accessibility
@@ -2785,7 +2785,7 @@ trigger your click on cells or rows (required for accessibility for keyboard-onl
 When a column (field) is sortable (`<b-table>` only) or there is a `head-clicked` listener
 registered (`<b-table>` and `<b-table-lite>`), the header (and footer) `<th>` cells will be placed
 into the document tab sequence (via `tabindex="0"`) for accessibility by keyboard-only and screen
-reader users, so that the user may trigger a click (by pressing <kbd>ENTER</kbd> on the header
+reader users, so that the user may trigger a click (by pressing <kbd>Enter</kbd> on the header
 cells.
 
 ### Data row accessibility
@@ -2794,16 +2794,16 @@ When the table is in `selectable` mode (`<b-table>` only, and prop `no-select-on
 or if there is a `row-clicked` event listener registered (`<b-table>` and `<b-table-lite>`), all
 data item rows (`<tr>` elements) will be placed into the document tab sequence (via `tabindex="0"`)
 to allow keyboard-only and screen reader users the ability to click the rows by pressing
-<kbd>ENTER</kbd> or <kbd>SPACE</kbd>.
+<kbd>Enter</kbd> or <kbd>Space</kbd>.
 
 When the table items rows are placed in the document tab sequence (`<b-table>` and
 `<b-table-lite>`), they will also support basic keyboard navigation when focused:
 
-- <kbd>DOWN</kbd> will move to the next row
-- <kbd>UP</kbd> will move to the previous row
-- <kbd>END</kbd> or <kbd>DOWN</kbd>+<kbd>SHIFT</kbd> will move to the last row
-- <kbd>HOME</kbd> or <kbd>UP</kbd>+<kbd>SHIFT</kbd> will move to the first row
-- <kbd>ENTER</kbd> or <kbd>SPACE</kbd> to click the row.
+- <kbd>Down</kbd> will move to the next row
+- <kbd>Up</kbd> will move to the previous row
+- <kbd>End</kbd> or <kbd>Down</kbd>+<kbd>Shift</kbd> will move to the last row
+- <kbd>Home</kbd> or <kbd>Up</kbd>+<kbd>Shift</kbd> will move to the first row
+- <kbd>Enter</kbd> or <kbd>Space</kbd> to click the row.
 
 ### Row event accessibility
 
diff --git a/src/components/tabs/README.md b/src/components/tabs/README.md
index a35e6585dca..0da6c18e0e0 100644
--- a/src/components/tabs/README.md
+++ b/src/components/tabs/README.md
@@ -420,23 +420,23 @@ focus.
 
 | Keypress                                                              | Action                                         |
 | --------------------------------------------------------------------- | ---------------------------------------------- |
-| <kbd>LEFT</kbd> or <kbd>UP</kbd>                                      | Activate the previous non-disabled tab         |
-| <kbd>RIGHT</kbd> or <kbd>DOWN</kbd>                                   | Activate the next non-disabled tab             |
-| <kbd>SHIFT</kbd>+<kbd>LEFT</kbd> or <kbd>SHIFT</kbd>+<kbd>UP</kbd>    | Activate the first non-disabled tab            |
-| <kbd>HOME</kbd>                                                       | Activate the first non-disabled tab            |
-| <kbd>SHIFT</kbd>+<kbd>RIGHT</kbd> or <kbd>SHIFT</kbd>+<kbd>DOWN</kbd> | Activate the last non-disabled tab             |
-| <kbd>END</kbd>                                                        | Activate the last non-disabled tab             |
-| <kbd>TAB</kbd>                                                        | Move focus to the active tab content           |
-| <kbd>SHIFT</kbd>+<kbd>TAB</kbd>                                       | Move focus to the previous control on the page |
+| <kbd>Left</kbd> or <kbd>Up</kbd>                                      | Activate the previous non-disabled tab         |
+| <kbd>Right</kbd> or <kbd>Down</kbd>                                   | Activate the next non-disabled tab             |
+| <kbd>Shift</kbd>+<kbd>Left</kbd> or <kbd>Shift</kbd>+<kbd>Up</kbd>    | Activate the first non-disabled tab            |
+| <kbd>Home</kbd>                                                       | Activate the first non-disabled tab            |
+| <kbd>Shift</kbd>+<kbd>Right</kbd> or <kbd>Shift</kbd>+<kbd>Down</kbd> | Activate the last non-disabled tab             |
+| <kbd>End</kbd>                                                        | Activate the last non-disabled tab             |
+| <kbd>Tab</kbd>                                                        | Move focus to the active tab content           |
+| <kbd>Shift</kbd>+<kbd>Tab</kbd>                                       | Move focus to the previous control on the page |
 
 Disable keyboard navigation by setting the prop `no-key-nav`. Behavior will now default to regular
 browser navigation with TAB key.
 
 | Keypress                             | Action                                                 |
 | ------------------------------------ | ------------------------------------------------------ |
-| <kbd>TAB</kbd>                       | Move to the next tab button or control on the page     |
-| <kbd>SHIFT</kbd>+<kbd>TAB</kbd>      | Move to the previous tab button or control on the page |
-| <kbd>ENTER</kbd> or <kbd>SPACE</kbd> | Activate current focused button's tab                  |
+| <kbd>Tab</kbd>                       | Move to the next tab button or control on the page     |
+| <kbd>Shift</kbd>+<kbd>Tab</kbd>      | Move to the previous tab button or control on the page |
+| <kbd>Enter</kbd> or <kbd>Space</kbd> | Activate current focused button's tab                  |
 
 ## Programmatically activating and deactivating tabs
 
diff --git a/src/directives/popover/README.md b/src/directives/popover/README.md
index b00c7ab3f1a..f9cdb339fb8 100644
--- a/src/directives/popover/README.md
+++ b/src/directives/popover/README.md
@@ -269,7 +269,7 @@ This `blur` trigger must be used in combination with the `click` trigger.
 
 The following example shows the `click blur` use case. Popovers will only open on click of the
 button, and will close either on click of the button, or a click anywhere else (or a focus change
-via pressing the <kbd>TAB</kbd> key). Some call this behavior _self dismissing_.
+via pressing the <kbd>Tab</kbd> key). Some call this behavior _self dismissing_.
 
 ```html
 <div>
diff --git a/src/utils/config-defaults.js b/src/utils/config-defaults.js
index f4423a4a76f..49ed2b8cb1a 100644
--- a/src/utils/config-defaults.js
+++ b/src/utils/config-defaults.js
@@ -69,11 +69,13 @@ export default deepFreeze({
   },
   BCalendar: {
     // BFormDate will choose these first if not provided in BFormDate section
+    labelPrevDecade: 'Previous decade',
     labelPrevYear: 'Previous year',
     labelPrevMonth: 'Previous month',
     labelCurrentMonth: 'Current month',
     labelNextMonth: 'Next month',
     labelNextYear: 'Next year',
+    labelNextDecade: 'Next decade',
     labelToday: 'Today',
     labelSelected: 'Selected date',
     labelNoDateSelected: 'No date selected',
@@ -99,11 +101,13 @@ export default deepFreeze({
   },
   BFormDatepicker: {
     // BFormDatepicker will choose from BCalendar first if not provided here
+    labelPrevDecade: undefined,
     labelPrevYear: undefined,
     labelPrevMonth: undefined,
     labelCurrentMonth: undefined,
     labelNextMonth: undefined,
     labelNextYear: undefined,
+    labelNextDecade: undefined,
     labelToday: undefined,
     labelSelected: undefined,
     labelNoDateSelected: undefined,
diff --git a/src/utils/date.js b/src/utils/date.js
index 64774d66e15..18ebcb73767 100644
--- a/src/utils/date.js
+++ b/src/utils/date.js
@@ -71,10 +71,22 @@ export const lastDateOfMonth = date => {
   return date
 }
 
+export const addYears = (date, numberOfYears) => {
+  date = createDate(date)
+  const month = date.getMonth()
+  date.setFullYear(date.getFullYear() + numberOfYears)
+  // Handle Feb 29th for leap years
+  if (date.getMonth() !== month) {
+    date.setDate(0)
+  }
+  return date
+}
+
 export const oneMonthAgo = date => {
   date = createDate(date)
   const month = date.getMonth()
   date.setMonth(month - 1)
+  // Handle when days in month are different
   if (date.getMonth() === month) {
     date.setDate(0)
   }
@@ -85,6 +97,7 @@ export const oneMonthAhead = date => {
   date = createDate(date)
   const month = date.getMonth()
   date.setMonth(month + 1)
+  // Handle when days in month are different
   if (date.getMonth() === (month + 2) % 12) {
     date.setDate(0)
   }
@@ -92,23 +105,19 @@ export const oneMonthAhead = date => {
 }
 
 export const oneYearAgo = date => {
-  date = createDate(date)
-  const month = date.getMonth()
-  date.setMonth(month - 12)
-  if (date.getMonth() !== month) {
-    date.setDate(0)
-  }
-  return date
+  return addYears(date, -1)
 }
 
 export const oneYearAhead = date => {
-  date = createDate(date)
-  const month = date.getMonth()
-  date.setMonth(month + 12)
-  if (date.getMonth() !== month) {
-    date.setDate(0)
-  }
-  return date
+  return addYears(date, 1)
+}
+
+export const oneDecadeAgo = date => {
+  return addYears(date, -10)
+}
+
+export const oneDecadeAhead = date => {
+  return addYears(date, 10)
 }
 
 // Helper function to constrain a date between two values
diff --git a/src/utils/date.spec.js b/src/utils/date.spec.js
index be014e1c406..0fb1f0d6658 100644
--- a/src/utils/date.spec.js
+++ b/src/utils/date.spec.js
@@ -8,6 +8,8 @@ import {
   oneMonthAhead,
   oneYearAgo,
   oneYearAhead,
+  oneDecadeAgo,
+  oneDecadeAhead,
   constrainDate
 } from './date'
 
@@ -96,6 +98,26 @@ describe('utils/date', () => {
     expect(formatYMD(oneYearAhead(parseYMD('2020-12-31')))).toEqual('2021-12-31')
   })
 
+  it('oneDecadeAgo works', async () => {
+    // February 2020 was a leap year
+    expect(formatYMD(oneDecadeAgo(parseYMD('2020-02-29')))).toEqual('2010-02-28')
+    expect(formatYMD(oneDecadeAgo(parseYMD('2020-02-28')))).toEqual('2010-02-28')
+    expect(formatYMD(oneDecadeAgo(parseYMD('2020-01-31')))).toEqual('2010-01-31')
+    expect(formatYMD(oneDecadeAgo(parseYMD('2020-11-01')))).toEqual('2010-11-01')
+    expect(formatYMD(oneDecadeAgo(parseYMD('2020-11-30')))).toEqual('2010-11-30')
+    expect(formatYMD(oneDecadeAgo(parseYMD('2020-12-31')))).toEqual('2010-12-31')
+  })
+
+  it('oneDecadeAhead works', async () => {
+    // February 2020 was a leap year
+    expect(formatYMD(oneDecadeAhead(parseYMD('2020-02-29')))).toEqual('2030-02-28')
+    expect(formatYMD(oneDecadeAhead(parseYMD('2020-02-28')))).toEqual('2030-02-28')
+    expect(formatYMD(oneDecadeAhead(parseYMD('2020-01-31')))).toEqual('2030-01-31')
+    expect(formatYMD(oneDecadeAhead(parseYMD('2020-11-01')))).toEqual('2030-11-01')
+    expect(formatYMD(oneDecadeAhead(parseYMD('2020-11-30')))).toEqual('2030-11-30')
+    expect(formatYMD(oneDecadeAhead(parseYMD('2020-12-31')))).toEqual('2030-12-31')
+  })
+
   it('costrainDate works', async () => {
     const min = parseYMD('2020-01-05')
     const max = parseYMD('2020-01-15')