Add accessibilityLabel properties to the navigation menu

The BottomNavigation element provided by React Paper allows us to set an accessibilityLabel for each route button. Paper defaultly creates 2 text fields for each route (whether there's an accessibilityLabel, or themes present at all). One of them displays the text for the route, and the other is a exact-identical element, but has its opacity changed to 1 when its route is not-selected, and 0 when its route is selected. This appears to be so that the text is thicker when it is not selected, and thinner when it is selected.

My hope is that the screen reader will pick up this accessibilityLabel, and not read the internal text fields.

www/js/App.tsx

@@ -27,18 +27,21 @@ const defaultRoutes = (t) => [
     title: t('diary.label-tab'),
     focusedIcon: 'check-bold',
     unfocusedIcon: 'check-outline',
+    accessibilityLabel: t('diary.label-tab'),
   },
   {
     key: 'metrics',
     title: t('metrics.dashboard-tab'),
     focusedIcon: 'chart-box',
     unfocusedIcon: 'chart-box-outline',
+    accessibilityLabel: t('metrics.dashboard-tab'),
   },
   {
     key: 'control',
     title: t('control.profile-tab'),
     focusedIcon: 'account',
     unfocusedIcon: 'account-outline',
+    accessibilityLabel: t('control.profile-tab'),
   },
 ];