Add ARIA labels to various unlabelled mock dropdowns

Author: pimterry

src/components/mock/handler-selection.tsx

@@ -184,6 +184,7 @@ export const HandlerSelector = inject('rulesStore', 'accountStore')(observer((p:
     ruleType: RuleType,
     availableHandlers: Array<HandlerClass>,
     value: Handler,
+    handlerIndex: number,
     onChange: (handler: Handler) => void
 }) => {
     let [ allowedHandlers, needProHandlers ] = _.partition(
@@ -197,6 +198,11 @@ export const HandlerSelector = inject('rulesStore', 'accountStore')(observer((p:
     );
 
     return <HandlerSelect
+        aria-label={
+            p.handlerIndex === 0
+            ? "Select how matching requests should be handled"
+            : "Select the next step in how matching requests should be handled"
+        }
         value={getHandlerKey(p.value)}
         onChange={(event) => {
             const handlerKey = event.target.value as AvailableHandlerKey;

src/components/mock/matcher-selection.tsx

@@ -81,6 +81,7 @@ export const InitialMatcherRow = React.forwardRef((p: {
     return <MatcherRow>
         <MatcherInputsContainer>
             <Select
+                aria-label="Select the base matcher for this rule"
                 ref={ref}
                 value={getMatcherKey(p.matcher)}
                 onChange={(event) => {
@@ -235,6 +236,7 @@ export class NewMatcherRow extends React.Component<{
         return <MatcherRow>
             <MatcherInputsContainer>
                 <Select
+                    aria-label="Select another type of matcher to add to this rule"
                     onChange={this.selectMatcher}
                     value={getMatcherKey(matcherClass) ?? ''}
                     ref={this.dropdownRef}
@@ -267,6 +269,7 @@ export class NewMatcherRow extends React.Component<{
             </MatcherInputsContainer>
 
             <MatcherButton
+                aria-label="Add this matcher to the rule"
                 disabled={!draftMatchers.length || invalidMatcherState}
                 onClick={saveMatcher}
             >

src/components/mock/mock-rule-row.tsx

@@ -707,7 +707,8 @@ class HandlerStepSection extends React.Component<{
             getPro,
             ruleType,
             availableHandlers,
-            handler
+            handler,
+            handlerIndex
         } = this.props;
 
         const shownHandler = this.demoHandler ?? handler;
@@ -722,6 +723,7 @@ class HandlerStepSection extends React.Component<{
                 ruleType={ruleType}
                 onChange={this.updateHandler}
                 availableHandlers={availableHandlers}
+                handlerIndex={handlerIndex}
             />
 
             { isHandlerDemo