Improve accessibility of intercept option UI

Author: pimterry

src/components/common/close-button.tsx

@@ -1,19 +1,16 @@
 import { styled, Theme } from "../../styles";
 import { Icon } from "../../icons";
-import { filterProps, clickOnEnter } from '../component-utils';
+import { clickOnEnter } from '../component-utils';
 
 interface CloseButtonProps {
     onClose: () => void;
-    inverted?: boolean;
     top?: string;
     right?: string;
 
     theme?: Theme;
 }
 
-export const CloseButton = styled(
-    filterProps(Icon, 'inverted')
-).attrs((props: CloseButtonProps) => ({
+export const CloseButton = styled(Icon).attrs((props: CloseButtonProps) => ({
     icon: ['fas', 'times'],
     size: '2x',
 
@@ -25,12 +22,15 @@ export const CloseButton = styled(
     z-index: 1;
     cursor: pointer;
 
-    color: ${(p: CloseButtonProps) => p.inverted ?
-        p.theme!.mainBackground : p.theme!.mainColor
-    };
+    color: ${p => p.theme!.mainColor};
 
-    top: ${p => p.top || '10px'};
-    right: ${p => p.right || '15px'};
+    &:focus-visible {
+        outline: none;
+        color: ${p => p.theme!.popColor};
+    }
+
+    top: ${(p: CloseButtonProps) => p.top || '10px'};
+    right: ${(p: CloseButtonProps) => p.right || '15px'};
 
     &:hover {
         opacity: 0.6;

src/components/intercept/intercept-option.tsx

@@ -231,6 +231,8 @@ export class InterceptOption extends React.Component<InterceptOptionProps> {
             ? 4
             : 3;
 
+        const isExpandable = !!ConfigComponent && !isDisabled;
+
         return <InterceptOptionCard
             ref={this.cardRef}
 
@@ -239,6 +241,12 @@ export class InterceptOption extends React.Component<InterceptOptionProps> {
             uiConfig={uiConfig}
             gridWidth={gridWidth}
 
+            role={!this.expanded ? 'button' : 'section'}
+            aria-expanded={isExpandable
+                ? this.expanded
+                : undefined
+            }
+
             disabled={isDisabled}
             onKeyDown={clickOnEnter}
             onClick={this.expanded ? undefined : this.onClick}
@@ -260,7 +268,10 @@ export class InterceptOption extends React.Component<InterceptOptionProps> {
 
             { ConfigComponent && expanded
                 ? <>
-                    <CloseButton onClose={this.onClose} />
+                    <CloseButton
+                        title="Close this interceptor"
+                        onClose={this.onClose}
+                    />
                     <ConfigComponent
                         interceptor={interceptor}
                         activateInterceptor={activateInterceptor}