From 766660a8ac5840e21ec9c850bd8f9c58b3ef0fc8 Mon Sep 17 00:00:00 2001
From: Skim Kimball <skim.kimball@sofarsounds.com>
Date: Tue, 20 Oct 2020 16:42:28 -0400
Subject: [PATCH 1/4] trying to add aria

---
 src/molecules/Select/Input.tsx          | 2 ++
 src/molecules/Select/Options/Simple.tsx | 1 +
 2 files changed, 3 insertions(+)

diff --git a/src/molecules/Select/Input.tsx b/src/molecules/Select/Input.tsx
index d0b19df6..7b58ce6e 100644
--- a/src/molecules/Select/Input.tsx
+++ b/src/molecules/Select/Input.tsx
@@ -33,6 +33,7 @@ interface Props {
   state: SelectState;
   initialWidth?: string;
   'data-qaid'?: string;
+  'aria-haspopup'?: string;
 
   inputProps: {
     id?: string;
@@ -212,6 +213,7 @@ const Input: React.SFC<Props> = ({
       invertColor={invertColor}
       initialWidth={initialWidth}
       data-qaid={qaId}
+      aria-haspopup="listbox"
     >
       {renderLeftIcon && (
         <IconWrapper invertColor={invertColor} data-qaid={`${qaId}-left-icon`}>
diff --git a/src/molecules/Select/Options/Simple.tsx b/src/molecules/Select/Options/Simple.tsx
index 793af06f..5729b2d1 100644
--- a/src/molecules/Select/Options/Simple.tsx
+++ b/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>

From 501e1be04f6e58b02ef83d3b457addccbaa7d42e Mon Sep 17 00:00:00 2001
From: Skim Kimball <skim.kimball@sofarsounds.com>
Date: Mon, 26 Oct 2020 16:16:50 -0400
Subject: [PATCH 2/4] trying something...

---
 src/molecules/Select/Input.tsx         | 1 -
 src/molecules/Select/Options/index.tsx | 2 ++
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/molecules/Select/Input.tsx b/src/molecules/Select/Input.tsx
index 7b58ce6e..0ddf2c65 100644
--- a/src/molecules/Select/Input.tsx
+++ b/src/molecules/Select/Input.tsx
@@ -33,7 +33,6 @@ interface Props {
   state: SelectState;
   initialWidth?: string;
   'data-qaid'?: string;
-  'aria-haspopup'?: string;
 
   inputProps: {
     id?: string;
diff --git a/src/molecules/Select/Options/index.tsx b/src/molecules/Select/Options/index.tsx
index d3522e3e..b283a186 100644
--- a/src/molecules/Select/Options/index.tsx
+++ b/src/molecules/Select/Options/index.tsx
@@ -176,6 +176,8 @@ const Options = <T extends {}>({
             isOpen={isOpen}
             isFlipped={isFlipped}
             bordered
+            tabIndex={-1}
+            role="listbox"
             data-qaid={`${qaId}-${showPopularOptions ? 'popular' : 'menu'}`}
           >
             {renderOptions()}

From 591f94e8503b92fed511354f86aff1b8238f1703 Mon Sep 17 00:00:00 2001
From: Skim Kimball <skim.kimball@sofarsounds.com>
Date: Thu, 29 Oct 2020 16:13:18 -0400
Subject: [PATCH 3/4] made a janky keyboard navigation to pop open the select
 options

---
 src/molecules/Select/Input.tsx         |  6 +-
 src/molecules/Select/Options/index.tsx | 85 +++++++++++++-------------
 2 files changed, 47 insertions(+), 44 deletions(-)

diff --git a/src/molecules/Select/Input.tsx b/src/molecules/Select/Input.tsx
index 0ddf2c65..2bcadd00 100644
--- a/src/molecules/Select/Input.tsx
+++ b/src/molecules/Select/Input.tsx
@@ -212,15 +212,16 @@ const Input: React.SFC<Props> = ({
       invertColor={invertColor}
       initialWidth={initialWidth}
       data-qaid={qaId}
-      aria-haspopup="listbox"
     >
       {renderLeftIcon && (
         <IconWrapper invertColor={invertColor} data-qaid={`${qaId}-left-icon`}>
           {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}
@@ -271,6 +272,7 @@ const Input: React.SFC<Props> = ({
           name={isOpen ? 'caretUp' : 'caretDown'}
         />
       </ActionButton>
+      <div id="selectOptions" tabIndex={-1} role="listbox"></div>
     </Wrapper>
   );
 };
diff --git a/src/molecules/Select/Options/index.tsx b/src/molecules/Select/Options/index.tsx
index b283a186..56a3273a 100644
--- a/src/molecules/Select/Options/index.tsx
+++ b/src/molecules/Select/Options/index.tsx
@@ -142,49 +142,50 @@ const Options = <T extends {}>({
     return null;
   };
 
+  const domThing = 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
-            tabIndex={-1}
-            role="listbox"
-            data-qaid={`${qaId}-${showPopularOptions ? 'popular' : 'menu'}`}
-          >
-            {renderOptions()}
-          </AdvancedMenu>
-        )}
-      </Popper>
-    </Portal>
+    domThing && (
+      <Portal dom={domThing}>
+        <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>
+    )
   );
 };
 

From e46a3b8ca5ab763ac473e7d37e3929ad0bafdcbe Mon Sep 17 00:00:00 2001
From: Skim Kimball <skim.kimball@sofarsounds.com>
Date: Thu, 29 Oct 2020 16:23:03 -0400
Subject: [PATCH 4/4] more useful name for that const

---
 src/molecules/Select/Options/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/molecules/Select/Options/index.tsx b/src/molecules/Select/Options/index.tsx
index 56a3273a..1dae2f66 100644
--- a/src/molecules/Select/Options/index.tsx
+++ b/src/molecules/Select/Options/index.tsx
@@ -142,10 +142,10 @@ const Options = <T extends {}>({
     return null;
   };
 
-  const domThing = document.getElementById('selectOptions');
+  const selectOptions = document.getElementById('selectOptions');
   return (
-    domThing && (
-      <Portal dom={domThing}>
+    selectOptions && (
+      <Portal dom={selectOptions}>
         <Popper
           anchorEl={innerRef}
           reactToChange={options.length}