Enhanced select

[johnrich85]

Changes proposed in this pull request:

Adds a web component that progressively enhances the native select element.

Design:

To test:

<enhanced-select>
      <select id="aaa" name="aaa" >
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
        <option value="5">Five</option>
      </select>
</enhanced-select>

[netlify[bot]]

✅ Deploy Preview for developer-chrome-com ready!

Name	Link
🔨 Latest commit	c0fd086ca177dcfd9004c712496d0d267d576b51
🔍 Latest deploy log	https://app.netlify.com/sites/developer-chrome-com/deploys/6360fc5932c4920008ded3f7
😎 Deploy Preview	https://deploy-preview-3912--developer-chrome-com.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[matthiasrohmer]

Haven't had a detailed look yet, but it might be worth looking at https://github.com/GoogleChrome/web.dev/pull/7177/files#diff-747808994e25221313c98080756bef4444f8969dda0b2ff1ae3a4ed39e27cde8R90 which tries to implement the same for web.dev and seems to handle a lot of the a11y pitfalls gracefully.

[johnrich85]

Awesome, thanks @matthiasrohmer - only wish I found this earlier! Keyboard navigation/a11y is one of the next items on my list so will definitely take a look before moving on

[devnook]

Hi John, can you add the select to the https://developer.chrome.com/docs/handbook/style-guide/ page? It will serve both as testing page and later as documentation.

[johnrich85]

Sure, ill add that to my list.