Make sure selected option is focused when listbox is opened

Author: acelaya

src/components/input/Select.tsx

@@ -187,8 +187,9 @@ function SelectOption<T>({
       role="option"
       aria-disabled={disabled}
       aria-selected={selected}
-      // This is intended to be focused with arrow keys
-      tabIndex={-1}
+      // Set tabIndex to 0 for selected option, so that useArrowKeyNavigation
+      // initially focuses it
+      tabIndex={selected ? 0 : -1}
       ref={downcastRef(optionRef)}
       title={title}
     >

src/components/input/test/Select-test.js

@@ -118,18 +118,18 @@ describe('Select', () => {
     return listboxTop < buttonTop;
   };
 
+  const getOption = (wrapper, id) =>
+    wrapper.find(`[data-testid="option-${id}"]`).closest('[role="option"]');
+
   const clickOption = (wrapper, id) => {
     openListbox(wrapper);
-    wrapper.find(`[data-testid="option-${id}"]`).simulate('click');
+    getOption(wrapper, id).simulate('click');
   };
 
   function clickOptionCheckbox(wrapper, id) {
     openListbox(wrapper);
 
-    const checkbox = wrapper
-      .find(`[data-testid="option-${id}"]`)
-      .closest('[role="option"]')
-      .find('input[type="checkbox"]');
+    const checkbox = getOption(wrapper, id).find('input[type="checkbox"]');
 
     if (!checkbox.exists()) {
       throw new Error(
@@ -143,20 +143,15 @@ describe('Select', () => {
   const pressKeyInOption = (wrapper, id, key) => {
     openListbox(wrapper);
 
-    wrapper
-      .find(`[data-testid="option-${id}"]`)
-      .closest('[role="option"]')
+    getOption(wrapper, id)
       .getDOMNode()
       .dispatchEvent(new KeyboardEvent('keydown', { key }));
   };
 
   function pressKeyInOptionCheckbox(wrapper, id, key) {
     openListbox(wrapper);
 
-    const checkbox = wrapper
-      .find(`[data-testid="option-${id}"]`)
-      .closest('[role="option"]')
-      .find('input[type="checkbox"]');
+    const checkbox = getOption(wrapper, id).find('input[type="checkbox"]');
 
     if (!checkbox.exists()) {
       throw new Error(
@@ -320,11 +315,7 @@ describe('Select', () => {
     toggleListbox(wrapper);
 
     // Focus listbox option before closing listbox
-    wrapper
-      .find('[data-testid="option-3"]')
-      .getDOMNode()
-      .closest('[role="option"]')
-      .focus();
+    getOption(wrapper, '3').getDOMNode().focus();
 
     toggleListbox(wrapper);
     wrapper.update();
@@ -391,6 +382,19 @@ describe('Select', () => {
     });
   });
 
+  it('sets tabIndex=0 for the selected option', () => {
+    const wrapper = createComponent({ value: defaultItems[2] });
+    const getTabIndex = id => getOption(wrapper, id).prop('tabIndex');
+
+    openListbox(wrapper);
+
+    assert.equal(getTabIndex(1), -1);
+    assert.equal(getTabIndex(2), -1);
+    assert.equal(getTabIndex(3), 0);
+    assert.equal(getTabIndex(4), -1);
+    assert.equal(getTabIndex(5), -1);
+  });
+
   context('when Option is rendered outside of Select', () => {
     it('throws an error', () => {
       assert.throws(
@@ -698,9 +702,7 @@ describe('Select', () => {
       openListbox(wrapper);
 
       // Spy on checkbox focus
-      const checkbox = wrapper
-        .find(`[data-testid="option-${optionId}"]`)
-        .closest('[role="option"]')
+      const checkbox = getOption(wrapper, optionId)
         .find('input[type="checkbox"]')
         .getDOMNode();
       const focusStub = sinon.stub(checkbox, 'focus');
@@ -717,10 +719,7 @@ describe('Select', () => {
       );
       openListbox(wrapper);
 
-      const option = wrapper
-        .find(`[data-testid="option-${optionId}"]`)
-        .closest('[role="option"]')
-        .getDOMNode();
+      const option = getOption(wrapper, optionId).getDOMNode();
       const focusStub = sinon.stub(option, 'focus');
 
       pressKeyInOptionCheckbox(wrapper, optionId, 'ArrowLeft');