title: How to proper set aria-labels on Select component with dropdown options
body: <p>I'm trying to set aria-labels and accessibility settings on Select dropdown</p>
  
  <p>I have a Select component that maps through options. Kinda confused on how to set aria-labels and connect them in a proper way. Do they need to point to each other? Like The dropdown itself with the alternatives?</p>
  
  <pre><code>&lt;StyledSelect
          key={JSON.stringify(eventTypes)}
          data-attr="eventType"
          error={item.errors &amp;&amp; item.errors.noEvent &amp;&amp; item.errors.noEvent[0]}
          onChange={e =&gt; onChange(e, item)}
          placeholder={intl.formatMessage(generalMessages.incident)}
          value={`${item.updates.eventType || ''}`}
          formatValue={val =&gt; eventTypes.find(type =&gt; type.id === val)
          &amp;&amp; i18nFormat.membersEventTypes
            .getNameForType(intl, eventTypes.find(type =&gt; type.id === val))}
          variant="round"
        &gt;
          {eventTypes
            .map(type =&gt; (
              &lt;Option key={`${type.name}_${type.id}`} value={`${type.id}`}&gt;{i18nFormat.membersEventTypes.getNameForType(intl, type)}&lt;/Option&gt;
              // &lt;Divider key=sch{`${key}_divider`} /&gt;
            ))}
        &lt;/StyledSelect&gt;
  </code></pre>
  
  <p>So I need aria-labels inside the  component there, but do I need to point/referrer to the parent?</p>