DRAFT: Prototype of select element keyboard navigation

src/molecules/Select/Input.tsx

@@ -218,8 +218,10 @@ const Input: React.SFC<Props> = ({
           {renderLeftIcon}
         </IconWrapper>
       )}
-
       <StyledInput
+        // We need the selectable element to also be the trigger for the Portal - what's the best way to do this?
+        tabIndex={-1}
+        aria-haspopup="listbox"
         value={inputProps.value}
         readOnly={inputProps.readOnly}
         isOpen={isOpen}
@@ -270,6 +272,7 @@ const Input: React.SFC<Props> = ({
           name={isOpen ? 'caretUp' : 'caretDown'}
         />
       </ActionButton>
+      <div id="selectOptions" tabIndex={-1} role="listbox"></div>
     </Wrapper>
   );
 };

src/molecules/Select/Options/Simple.tsx

@@ -31,6 +31,7 @@ const SimpleOptions = <T extends {}>({
           data-qaid={`${qaId}-option`}
           tabIndex={key}
           onClick={onClick}
+          role="option"
         >
           {label}
         </MenuItem>

src/molecules/Select/Options/index.tsx

@@ -142,47 +142,50 @@ const Options = <T extends {}>({
     return null;
   };
 
+  const selectOptions = document.getElementById('selectOptions');
   return (
-    <Portal dom={document.body}>
-      <Popper
-        anchorEl={innerRef}
-        reactToChange={options.length}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'left'
-        }}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'left'
-        }}
-        offset={{
-          vertical: -2
-        }}
-        width="auto"
-        flip
-      >
-        {({
-          ref,
-          style,
-          isFlipped
-        }: {
-          ref: any;
-          style: any;
-          isFlipped: boolean;
-        }) => (
-          <AdvancedMenu
-            ref={ref}
-            style={style}
-            isOpen={isOpen}
-            isFlipped={isFlipped}
-            bordered
-            data-qaid={`${qaId}-${showPopularOptions ? 'popular' : 'menu'}`}
-          >
-            {renderOptions()}
-          </AdvancedMenu>
-        )}
-      </Popper>
-    </Portal>
+    selectOptions && (
+      <Portal dom={selectOptions}>
+        <Popper
+          anchorEl={innerRef}
+          reactToChange={options.length}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'left'
+          }}
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'left'
+          }}
+          offset={{
+            vertical: -2
+          }}
+          width="auto"
+          flip
+        >
+          {({
+            ref,
+            style,
+            isFlipped
+          }: {
+            ref: any;
+            style: any;
+            isFlipped: boolean;
+          }) => (
+            <AdvancedMenu
+              ref={ref}
+              style={style}
+              isOpen={isOpen}
+              isFlipped={isFlipped}
+              bordered
+              data-qaid={`${qaId}-${showPopularOptions ? 'popular' : 'menu'}`}
+            >
+              {renderOptions()}
+            </AdvancedMenu>
+          )}
+        </Popper>
+      </Portal>
+    )
   );
 };