Add missing aria labels and expand state to various elements

Author: pimterry

src/components/common/card.tsx

@@ -169,6 +169,10 @@ export class CollapsibleCard extends React.Component<
             direction={this.props.direction}
             headerAlignment={this.props.headerAlignment ?? 'right'}
 
+            aria-expanded={collapsable
+                ? !this.props.collapsed
+                : undefined
+            }
             tabIndex={collapsable ? 0 : undefined}
             ref={this.cardRef}
             onKeyDown={this.onKeyDown}

src/components/intercept/intercept-page.tsx

@@ -138,6 +138,7 @@ class InterceptPage extends React.Component<InterceptPageProps> {
                         search for connectors that could work for you:
                     </p>
                     <InterceptSearchBox
+                        aria-label="Filter the list of intercept options below"
                         value={this.filter || ''}
                         onSearch={this.onSearchInput}
                     />

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

@@ -235,6 +235,7 @@ export const GroupHeader = observer((p: {
     >{ (provided, snapshot) => <Observer>{ () =>
         <GroupHeaderContainer
             depth={p.path.length - 1}
+            aria-expanded={!p.collapsed}
             collapsed={p.collapsed}
             editingTitle={isEditing}
 
@@ -246,7 +247,14 @@ export const GroupHeader = observer((p: {
             onKeyPress={clickOnEnter}
             tabIndex={0}
         >
-            <DragHandle {...provided.dragHandleProps} />
+            <DragHandle
+                aria-label={`Drag handle for the '${
+                    isEditing
+                        ? unsavedTitle
+                        : p.group.title
+                }' rule group`}
+                {...provided.dragHandleProps}
+            />
 
             <h2>
                 <Icon

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

@@ -127,6 +127,7 @@ export const AddRuleRow = styled((p: {
         collapsed={true}
         borderColor='transparent'
         {..._.omit(p, 'onAdd')}
+        role="button"
 
         tabIndex={0}
         depth={0}
@@ -384,6 +385,7 @@ export class RuleRow extends React.Component<{
                     provided.innerRef(ref);
                     this.containerRef = ref;
                 }}
+                aria-expanded={!collapsed}
                 collapsed={collapsed}
                 deactivated={!rule.activated}
                 disabled={disabled}
@@ -407,7 +409,14 @@ export class RuleRow extends React.Component<{
                     isEditingTitle={isEditingTitle}
                     onSetCustomTitle={this.startEnteringCustomTitle}
                 />
-                <DragHandle {...provided.dragHandleProps} />
+                <DragHandle
+                    aria-label={`Drag handle for ${
+                        (shouldShowCustomTitle || isEditingTitle) && rule.title
+                            ? `this '${rule.title}'`
+                            : 'this'
+                    } mock rule`}
+                    {...provided.dragHandleProps}
+                />
 
 
                 { shouldShowCustomTitle &&