ENG: Accessible and compliant dropdowns
If you were linked to this issue after asking why the dropdowns aren't finished
In order to create dropdown elements that meet accessibility and platform level compliance, we have two options:
- Use the built-in elements that are impossible to style to the standards of the Slippers design system (fast)
- Build custom elements that match the Slippers design system perfectly, and also implement accessibility compliance and platform level APIs appropriately (slow).
To keep things moving with the major architecture refresh, we are taking the following approach:
- Using built-in browser elements to start without custom styles. This basically serves as "placeholder" content, to demonstrate that dropdowns are not finished yet.
- In order to not reinvent the wheel, but still meet our obligations to accessibility, we need to build our own dropdown based on the Pajamas dropdown component which already takes these things into account.
- Once that step is complete, we will go through the Buyer Experience repository and swap out with the new, well-designed and compliant component.
Information for designers
The component we're going to work off of has examples in this Figma file, and hopefully the Slippers spec is compatible with that functionality. We should check them against each other to see where changes need to be made.
Information for engineers
- Find the dropdown implementation in the Pajamas codebase
- Copy/paste it into Slippers (fortunately everything is in Vue.js, so this should basically Just Work)
- Leave the semantics (HTML) and functionality (JS) intact
- Find where and how things are styled
- Modify styles to match the Slippers spec