ARIA Assessibility Fixes

[blarsonnu]

Using the Deque Axe DevTools (https://www.deque.com/axe/devtools/) we've found some ARIA accessibility bugs and would like to have them fixed. If you're not familiar with Axe, it is a great tool that also has free developer browser extensions for testing. Below are the details.

Issue #1: ARIA role combobox not allowed on a button element
Issue #2: Insufficient color contrast on the placeholder text

Some background on Issue #1:
The issue is that the button role set by Bootstrap Select is ‘combobox’, however this is not a valid ARIA role for a button and thus fails the Axe testing. A button element already has native semantics through HTML/Browsers.

In the majority of cases setting an ARIA role and/or aria-* attribute that matches the default implicit ARIA semantics is unnecessary and not recommended as these properties are already set by the browser.

Many HTML5 elements come with default implicit ARIA semantics, and explicitly setting these default values is "unnecessary and not recommended".

Looking at the button element, you can see that it has the button role by default. So, setting role="button" is "not recommended. As the W3C documentation says : button element has default role="button".

Allowed ARIA role attribute values:
button (default - do not set), link, menuitem, menuitemcheckbox, menuitemradio or radio.

Role of combobox is not a valid role for a button as defined above.

I've also attached the Axe test failures for your reference.

[NicolasCARPi]

@blarsonnu thank you for your pr. We will review it.

@caseyjhol I think it would be necessary to update the lockfile to the modern format, as it makes the linting/cypress test fail and I don't see a reason to keep the old format.

[NicolasCARPi]

@blarsonnu can you rebase from latest dev commit please?

[blarsonnu]

ok, i think all set. thanks

[NicolasCARPi]

Nah there is something wrong, the package-lock.json should not appear in the changed files. Maybe close this and make a new branch/pr again?