Add aria labels for buttons

paulbreuler · May 10, 2021 · 56bde6a · 56bde6a
1 parent 8222fe9
commit 56bde6a
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/Duration Picker/durationPicker/DurationPicker.tsx b/Duration Picker/durationPicker/DurationPicker.tsx
@@ -356,15 +356,15 @@ export class DurationPicker extends React.Component<IDurationPickerProps, IDurat
     return (
       <Stack horizontal styles={stackStyles} disableShrink tokens={numericalSpacingStackTokens}>
         <Stack styles={stackStyles}>
-          <IconButton id={Time.Hours} iconProps={{ iconName: upIcon }} styles={buttonStyle}
+          <IconButton aria-label="Increment Hours" id={Time.Hours} iconProps={{ iconName: upIcon }} styles={buttonStyle}
             onMouseDown={() => this.startContinuousIncrement(Time.Hours)}
             onMouseUp={() => this.stopContinuousIncrement()}
             onMouseOut={() => this.stopContinuousDecrement()}
             onKeyDown={(e: React.KeyboardEvent<any>) => this.onKeyDown(e, increment, Time.Hours)}
             onKeyUp={this.onKeyUp} />
           <TextField styles={narrowTextFieldStyles} value={this.setHoursText()}
             onChange={(e: any) => this.onTextChange(e, Time.Hours)} borderless placeholder="--" />
-          <IconButton id={Time.Hours} iconProps={{ iconName: downIcon }} styles={buttonStyle}
+          <IconButton aria-label="Decrement Hours" id={Time.Hours} iconProps={{ iconName: downIcon }} styles={buttonStyle}
             onMouseDown={() => { this.startContinuousDecrement(Time.Hours) }}
             onMouseUp={() => this.stopContinuousDecrement()}
             onMouseOut={() => this.stopContinuousDecrement()}
@@ -376,15 +376,15 @@ export class DurationPicker extends React.Component<IDurationPickerProps, IDurat
           <span>:</span>
         </Stack>
         <Stack styles={stackStyles}>
-          <IconButton id={Time.Minutes} iconProps={{ iconName: upIcon }} styles={buttonStyle}
+          <IconButton aria-label="Increment Minutes" id={Time.Minutes} iconProps={{ iconName: upIcon }} styles={buttonStyle}
             onMouseDown={() => this.startContinuousIncrement(Time.Minutes)}
             onMouseUp={() => this.stopContinuousIncrement()}
             onMouseOut={() => this.stopContinuousDecrement()}
             onKeyDown={(e: React.KeyboardEvent<any>) => this.onKeyDown(e, increment, Time.Minutes)}
             onKeyUp={this.onKeyUp} />
           <TextField styles={narrowTextFieldStyles} value={this.setMinutesText()}
             onChange={(e: any) => this.onTextChange(e, Time.Minutes)} borderless placeholder="--" />
-          <IconButton id={Time.Minutes} iconProps={{ iconName: downIcon }} styles={buttonStyle}
+          <IconButton aria-label="Decrement Hours" id={Time.Minutes} iconProps={{ iconName: downIcon }} styles={buttonStyle}
             onMouseDown={() => this.startContinuousDecrement(Time.Minutes)}
             onMouseUp={() => this.stopContinuousDecrement()}
             onMouseOut={() => this.stopContinuousDecrement()}