@politico/vue-accessible-selects
v1.9.4
Published
Select & Multi Select implementations for Vue, focused especially on implementing accessibility best practices
Downloads
280
Readme
vue-accessible-selects
[!WARNING] VUE 2 SUPPORT WILL BE DEPRECATED AFTER DECEMBER 2024. Beginning in January 2025, we will publish version 2 of the Vue Accessible Selects library, which is compatible with Vue 3. Until then, you can access this Vue 3-compatible version published as the alpha version of this package.
Current Development
This entire repo is very much in an alpha state, and should currently be used only within internal Politico projects, as props / events / classes remain fluid. However, we are working towards a 1.0.0 release, and want to capture our relevant bugs fixed during that process.
References
- Current guiding blogpost: https://www.24a11y.com/2019/select-your-poison-part-2/
- Codepen from blogpost: https://codepen.io/smhigley/pen/gObMVzv (#1 ≈ SelectSingle, #3 ≈ SelectMulti)
- Select single implementation: https://github.com/microsoft/sonder-ui/tree/master/src/components/select
- Select multiple implementation: https://github.com/microsoft/sonder-ui/tree/master/src/components/multiselect
Current Usage (updated 9/25/20)
npm i @politico/vue-accessible-selects
// In component
import { SelectSingle, SelectMulti } from '@politico/vue-accessible-selects'
const sampleOptions = [{
label: 'One Option',
value: 'one_option'
}, {
label: 'Another Option',
value: 'another_option'
}]
export default {
components: { SelectSingle, SelectMulti },
data() {
return {
sampleOptions,
selectSingleValue: {},
selectMultiValues: []
}
},
}
<!-- In component -->
<SelectSingle
v-model="selectSingleValue"
:options="sampleOptions"
label="My Single Select"
:labelIsVisible="true"
/>
<SelectMulti
v-model="selectMultiValues"
:options="sampleOptions"
label="My Multiple Select"
:labelIsVisible="true"
placeholder="Default Text to Display"
/>
WARNING! node-sass deprecated
To compile scss code you must use dart sass
package as it uses sass:math
module for divisions instead of slash https://sass-lang.com/documentation/breaking-changes/slash-div
node-sass
is deprecated
// In any .scss file
// Simple, use default styles provided by lib
@import '~@politico/vue-accessible-selects/styles';
@include selects();
@include select-single();
@include select-multi();
for more detailed implementations, checkout the docs site
Custom Styling
As we determine the most-commonly externally-referenced classes, we'll add them here
.combo-input
.combo-menu