This is inspired by https://github.com/ivaynberg/select2/issues/2826
and starts the general transition to using selectors with a lower
specificity. This should make it considerably easier to override
the styles in the long run.
Unfortunately libsass does not support the SASS 3.3 style for BEM
where we can just use `&__m` for defining sub-modules. For now we
are still using a limited amount of nesting, but nowhere near as
much as we did in the past.
Now the search box is automatically resized for placeholders to
fit the available space, so we don't need to worry about the
placeholder not being visible. When the placeholder doesn't need
to be visible, the size of the search box is determined based on
the length of the current search term.
This adds a search box to the main container for multiple select
boxes, similar to the what the old version had. This can still be
swapped out such that the search box displays above the results
like it previously did.
The placeholder for multiple selects will also now use the input
attribute of the search box instead of generating a custom element.
This also changes the selector for the search container to
`.select2-search`, which is consistent with the old class and
reduces the complexity of the selectors.
This fixes an issue with how decorators worked, where the constructor
from the parent class would clobber the custom constructor that is
generated for the new decorated class. This has been fixed by
excluding the constructor from the list of fields which are
transferred when decorating classes.
Now the accessibility for the single select box better matches what
is picked up for a native select.
This fixes an issue with us always setting `aria-activedescendant`,
which caused Orca to always say the full path to the selected
result, instead of saying that the box was a combobox with a
selection. This means that the `aria-activedescendant` attribute
will now only be set when the dropdown is open.
This also switches the results list from a listbox to a tree, which
is what Firefox tells screen readers that a standard select is.
Combined with a change to use `role=group` and `aria-label` for
option group labels, screen readers will now announce the group
that they are in as well.
This makes quite a few changes, one of the major ones being the
removal of classes for marking options as selected or selectable,
and instead using the ARIA attributes which should already be
present.
Placeholder support has been implemented as a separate module, so
any selection container should be able to be decorated and get
instant placeholder support. It hooks into the updating method of
selections, and determines when to display the placeholder based
on the options that are being updated.
It works in the same way as the old placeholders. If no options
are selected and being displayed, like in the case of a multiple
select, then the placeholder will always be shown. If one option
is being displayed, and the id of the placeholder matches the id
of the selected element, then the placeholder will be shown. This
is similar to the functionality that was present in Select2 2.x,
where the placeholder could be passed in as an object that would
be compared to the selection.
This still requires that, for single selects, the first element
must match the placeholder id. Because the default placeholder id
is a blank string, this will maintain backwards compatibility with
past versions where the first option should be blank. This can
still be overridden to point at a different id, keeping support
for systems where the placeholder doesn't use a blank value.
**Note:** This does not hide the blank option for single selects,
but that will still be maintained for backwards compatibility
within the results module. It will not depend on a placeholder
being present, but instead will hide any options with blank text.
This adds decorator support in a very basic way, but enough that
it doesn't take a lot of effort to get it implemented.
This also starts work on splitting things out for theming.
