[datetime] fix(a11y): add aria-labels for various controls (#5358)

Co-authored-by: Adi Dahiya <adi.dahiya14@gmail.com>

packages/core/src/components/html-select/htmlSelect.tsx

@@ -91,7 +91,14 @@ export class HTMLSelect extends AbstractPureComponent2<HTMLSelectProps> {
 
         const optionChildren = options.map(option => {
             const props: OptionProps = typeof option === "object" ? option : { value: option };
-            return <option {...props} key={props.value} children={props.label || props.value} />;
+            return (
+                <option
+                    {...props}
+                    key={props.value}
+                    children={props.label || props.value}
+                    selected={this.props.value === props.value}
+                />
+            );
         });
 
         return (

packages/datetime/src/datePickerCaption.tsx

@@ -75,6 +75,7 @@ export class DatePickerCaption extends AbstractPureComponent2<IDatePickerCaption
 
         const monthSelect = (
             <HTMLSelect
+                aria-label="Month"
                 iconProps={{ style: { right: this.state.monthRightOffset } }}
                 className={Classes.DATEPICKER_MONTH_SELECT}
                 key="month"
@@ -86,6 +87,7 @@ export class DatePickerCaption extends AbstractPureComponent2<IDatePickerCaption
         );
         const yearSelect = (
             <HTMLSelect
+                aria-label="Year"
                 className={Classes.DATEPICKER_YEAR_SELECT}
                 key="year"
                 minimal={true}

packages/datetime/src/datePickerNavbar.tsx

@@ -39,6 +39,7 @@ export class DatePickerNavbar extends React.PureComponent<IDatePickerNavbarProps
             <div className={classNames(Classes.DATEPICKER_NAVBAR, classes.navBar)}>
                 {this.props.hideLeftNavButton || (
                     <Button
+                        aria-label="Go to previous month"
                         className={classes.navButtonPrev}
                         disabled={areSameMonth(month, minDate)}
                         icon="chevron-left"
@@ -48,6 +49,7 @@ export class DatePickerNavbar extends React.PureComponent<IDatePickerNavbarProps
                 )}
                 {this.props.hideRightNavButton || (
                     <Button
+                        aria-label="Go to next month"
                         className={classes.navButtonNext}
                         disabled={areSameMonth(month, maxDate)}
                         icon="chevron-right"

packages/datetime/src/shortcuts.tsx

@@ -104,7 +104,7 @@ export class Shortcuts extends React.PureComponent<IShortcutsProps> {
         ));
 
         return (
-            <Menu className={DATERANGEPICKER_SHORTCUTS} tabIndex={0}>
+            <Menu aria-label="Date picker shortcuts" className={DATERANGEPICKER_SHORTCUTS} tabIndex={0}>
                 {shortcutElements}
             </Menu>
         );