Nested interactive elements for NativeSelect

[aaronmaturen]

FAIL  packages/react-magma-dom/src/components/NativeSelect/NativeSelect.test.js
  ● NativeSelect › Does not violate accessibility standards

    expect(received).toHaveNoViolations(expected)

    Expected the HTML found at $('.css-1gckytq-StyledButton-inputBaseStyles-inputWrapperStyles') to have no violations:

    <div data-testid="selectTriggerButton" role="button" style="cursor: default;" tabindex="0" class="css-1gckytq-StyledButton-inputBaseStyles-inputWrapperStyles e1h9drla1">

    Received:

    "Ensure interactive controls are not nested (nested-interactive)"

    Fix any of the following:
      Element has focusable descendants

    You can find more information on this issue here:
    https://dequeuniversity.com/rules/axe/4.2/nested-interactive?application=axeAPI

      32 |
      33 |     return axe(container.innerHTML).then(result => {
    > 34 |       return expect(result).toHaveNoViolations();
         |                             ^
      35 |     });
      36 |   });
      37 | });

      at packages/react-magma-dom/src/components/NativeSelect/NativeSelect.test.js:34:29

axe doesn't like that the select is nested inside the toggleButton ... I'm assuming they should be siblings not parent/child

also, if the plan is to move the downshift components out of dom, we probably don't want to use the toggleButton from select anyways 🤔

[silvalaura]

Review after #830

[silvalaura]

No longer an issue ✅