add dropdown primitive ctd

addon/components/select-box/index.gjs

@@ -111,11 +111,7 @@ export default class SelectBox extends Component {
   }
 
   get optionsTabIndex() {
-    return this.isListBox ? '0' : null;
-  }
-
-  get dropdownTabIndex() {
-    return this.dropdown ? '-1' : null;
+    return this.isListBox ? '0' : '-1';
   }
 
   get triggerTabIndex() {

tests/dummy/app/templates/dropdown.hbs

@@ -12,9 +12,9 @@
       <div>
         Non interactive element
       </div>
-      <a href="#">
+      <LinkTo @route="dropdown">
         Interactive element
-      </a>
+      </LinkTo>
     </dd.Content>
   {{/if}}
 </Dropdown>

tests/integration/components/select-box/index/api-test.gjs

@@ -17,7 +17,7 @@ module('select-box (api)', function (hooks) {
   setupRenderingTest(hooks);
 
   test('api', async function (assert) {
-    assert.expect(16);
+    assert.expect(17);
 
     let api;
     let api2;
@@ -47,6 +47,7 @@ module('select-box (api)', function (hooks) {
     assert.strictEqual(typeof api.Options, 'object');
     assert.strictEqual(typeof api.Dropdown, 'object');
     assert.strictEqual(typeof api.Trigger, 'object');
+    assert.strictEqual(typeof api.Content, 'object');
 
     // Properties
     assert.deepEqual(api.element, find('.select-box'));

tests/integration/components/select-box/index/focus-test.gjs

@@ -623,7 +623,7 @@ module('select-box (focus)', function (hooks) {
   });
 
   test('keyboard-focusable-scrollers fix', async function (assert) {
-    assert.expect(2);
+    assert.expect(3);
 
     // we use tabindex="-1" on the dropdown content to prevent
     // keyboard-focusable-scrollers from stealing focus, but
@@ -635,8 +635,9 @@ module('select-box (focus)', function (hooks) {
     //
     // here, when the primary interactive element is focused,
     // and the user presses tab, we always want focus to move
-    // to the next interactive element. skipping the overflowing
-    // dropdown content.
+    // to the next interactive element. skipping the dropdown
+    // content (if it was overflowing), and also skipping over
+    // the listbox (if it was overflowing).
 
     let event;
 
@@ -658,6 +659,7 @@ module('select-box (focus)', function (hooks) {
     await click('.select-box__options');
 
     assert.dom('.dropdown__content').hasAttribute('tabindex', '-1');
+    assert.dom('.select-box__options').hasAttribute('tabindex', '-1');
     assert.true(event.defaultPrevented);
   });
 });

tests/integration/components/select-box/options/render-test.gjs

@@ -70,8 +70,9 @@ module('select-box/options', function (hooks) {
       </SelectBox>
     </template>);
 
-    assert.dom('.select-box__options').doesNotHaveAttribute(
+    assert.dom('.select-box__options').hasAttribute(
       'tabindex',
+      '-1',
       `the main interactive element is the input (combobox)
        focus should not move to the listbox, which is
        aria controlled virtually by the input.`
@@ -92,8 +93,9 @@ module('select-box/options', function (hooks) {
       </SelectBox>
     </template>);
 
-    assert.dom('.select-box__options').doesNotHaveAttribute(
+    assert.dom('.select-box__options').hasAttribute(
       'tabindex',
+      '-1',
       `the main interactive element is the trigger (combobox)
        focus should not move to the listbox (options element), which is
        aria controlled virtually by the trigger`