| FazBrowse GitHub Viewer | Trending | | Home |
| Tools: [Download Repo ZIP] [Original HTTPS Page] |
This is needed to screen readers know that the Select2 is disabled when focus is put on the selection container. Because we were mirroring the disabled state to the search input on a multiple select in the past, this is really only needed for single select elements which would not otherwise has the disabled property. This was identified in a previous accessibility audit as being something which Select2 did not properly report because we were not setting the attributes properly. Fixes #4575
This fixes a long-standing bug where if you tried to click in the search box for a multiple select while there was text in it, the dropdown would close and the text would be cleared. This caused many unexpected issues, because it meant that you could only use your keyboard to edit text within the search box. This will still clear out the search field if you click within the area of the selection which is not the search field. I'm not sure if that is also unexpected behaviour, so for now I am going to maintain it. Fixes #3517 Fixes #3808 Fixes #5491 Closes #5551
* Rewrote maximumSelectionLength tests to use container These brings the tests in line with other tests which we have, and makes it easier to understand what is actually going on in the tests. This also removes a redundant set of tests where we were testing with => 2 options being allowed. There are no current edge cases that would have required this. * Fix maximumSelectionLength being ignored by closeOnSelect There was a bug where the `maximumSelectionLength` option would not kick in if the `closeOnSelect` option was enabled. Normally, this was enabled by someone in their global configuration, but it could also be seen when somoene selected an option while holding the meta/ctrl/alt keys. This would implicitly enable the `closeOnSelect` behaviour, even when it was not globally enabled, and cause the bug. This fixes that issue by listening to the `select` event which is triggered whenever an option is selected, and triggers the "maximum selected" message based on that event. This should now force the message to be displayed, even when the results did not have to be queried another time. Fixes #3514 Fixes #3860 Closes #5333
In order to enable the ability to uniquely identify a result by an ID in the DOM, we generate a new ID for the result based on a combination of things, including the container ID prefix that is generated and used elsewhere in Select2. This has worked fairly well for use cases including attaching Select2 to an existing `<select>` and loading in options from a remote data set. Unfortunately, because this process relied on the container ID being used as a prefix, this failed for options which were automatically generated on initialization using the `data:` option to Select2. These were not being generated with an ID because at the time that they were being generated, the data adapter was not aware of the container it was being used in. This broke some accessibility features because we had a mix of options in the results list with IDs, and some without, so we fixed the ordering to make this work. Option generation no longer happens when the data adapter is first initialized, which is where it was previously happening, and instead it now occurs when the data adapter is bound to the container. This allows us to ensure that the data adapter is always aware of the container it is being associated with, so now it will be able to generate the result IDs. This also fixes the tests for the array adapter as well as the legacy `<input />` adapter so they properly bind to a container during the test. This was causing test failures becuase the options which would previously be generated during initialization were no longer appearing. Fixes #4350
This fixes a bug where if you cloned a Select2, the internal ID used for mapping elements (specifically the `<select>`) to the in-memory data store would be cloned as well, causing issues when you tried to initialize Select2 on the cloned element. This was because we did not properly clear all of the internal data and all of the internal attributes that Select2 uses when we destroyed it. The internal `data-select2-id` attribute was not being cleared, and this was the attribute being used for the internal mapping. Now we properly clear the `data-select2-id` attribute from the element when we call `RemoveData` on the element. This aligns with what we were trying to do, since we previously cleared out the internal store for that ID, and fixes the issue we were seeing when cloning. Fixes #5247
This fixes a bug that was introduced in Select2 4.0.0 and only partially fixed in Select2 4.0.6-rc.0 where the `title` attribute that is set on the selection container (or individual selections, for a multiple select) is not cleared when the text/title of the option is not set. In most cases, users no longer see this issue because the `text` property of most data objects is set, so the `title` attribute will always be cleared correctly. There was a bug for cases where the `text` property was not set, or where the `text` property was set to an empty string, that resulted in the `title` attribute persisting with the incorrect value. We have fixed this issue by always removing the `title` attribute from the selection (or not adding it in the first place, for a multiple select) when the `text` and `title` properties of the data object are empty or not present. This also adds in a series of tests to ensure the `title` attribute is set properly in a variety of cases, building upon the ones that already existed. Fixes #3895
* Reposition dropdown whenever items are selected This fixes an old bug where if you had a multiple select with the `closeOnSelect` option set to `false` and many options being selected, the dropdown would not reposition itself if the selected options expanded the container down another line. This was because the dropdown was only being repositioned when it was opened, closed, or if something around it was scrolled or resized. Unfortunately, in most cases none of these happened and the dropdown would start covering the selections. This was fixed by telling Select2 to resize the dropdown when new options are selected or existing options are unselected. Fixes #4377 * Attach positioning handlers at bind time The positioning handlers have been attached at the time that the dropdown is opened since when they were first committed many years ago. It's not actually clear why this was being done, since they don't rely on anything involving the dropdown being open. This removes the flag and process for setting these handlers only after the dropdown was opened for the first time, and moves these handlers to always be set at bind time.
This fixes an issue which was usually observed when working with AJAX results sets and having a message being displayed, usually the minimum characters message or an error. The dropdown would display up, like it was supposed to, but the message would appear to be floating above the container and detached. This was occuring because the dropdown position was not being calculated whenever a message was displayed in the results, only when the results were loaded or new results were appended to an existing results set. There are plenty of situations where this could have caused issues, but somehow most of the reports were around a very specific situation with AJAX which could be reproduced on the examples site. Fixes #4614 Fixes #4616 Fixes #5253 Closes #5196
This fixes a bug with the search box where, when it had a placeholder, it would expand the width of the selection container because it was too large. This bug was specifically caused by the search box not factoring in the padding surrounding it when caclualting the width it needed to be, which resulted in the search box extending outside of the selection container. This bug was easy to notice if your Select2 was set to have 100% width and if the container it was held within was not a block element. This fixes the bug by switching to using `width()` for calculating the search width instead of using `innerWidth()`, which ignored the surrounding padding. Fixes #5517 Closes #5518
* Move search accessibility tests under selection tests * Set aria-activedescendent and aria-owns on selection search This is a reduced version of a5ab08b which is split out to only set the `aria-activedescendent` and `aria-owns` attributes on the search box located within the selection container. This is the search box used within a multiple select, and previously it did not always set these two attributes correctly. One major change here is that we clear the `aria-activedescendent` attribute if the result that is selected does not have an ID. This was not being done previously, instead the attribute was still containing the old value, and it meant that sometimes the wrong result was being pointed to. The test coverage for this was also expanded to ensure that these attributes are properly being set. * Set aria-activedescendent and aria-owns on dropdown search This is a reduced version of a5ab08b which is split out to only set the `aria-activedescendent` and `aria-owns` attributes on the search box located within the dropdown. This is the search box used within a single select, and previously it did not set these two attributes at all. Additionally, it did not set the `aria-autocomplete` attribute, which is also needed for screen readers to properly read through the list of results. There was previously no test coverage for this, so the tests were largely copied from the tests for selection search. * Set proper ARIA roles on result elements When Select2 4.0.0 was originally written, accessibility was tested using the Orca screen reader and Mozilla Firefox as the browser. Because a `<select>` box could contain `<optgroup>` elements, which can further contain additional `<option>` elements, Orca would read out a `<select>` box as a tree view. Apparently Orca was the only screen reader to do this, but Select2 maintained this behaviour because the ARIA spec did not allow grouping elements for the right roles. In the ARIA 1.2 spec, an element with the role of `listbox` (which is the proper one for representing a `<select>` element) can now contain elements with the role of `group` that can be used for grouping. This means that now Select2 can switch to use the proper ARIA roles to better match how most browsers represent the `<select>` element out of the box. As a result, instead of the Select2 results list being represented as a tree containing tree items, it is now represented as a listbox containing options and groups. Notices will be represented as an alert, which more closely represents what they were being used for. This is a reduced version of a5ab08b which is split out to only fix the `role` attributes on elements within the results list. * Switch search boxes to have a role of searchbox I'm pretty sure this is implicit now, but since we used to specify that the search box had a role of `textbox`, we may as well migrate that over to specify the role of `searchbox`. This is different from the original pull request where this role was changes to `combobox`, but that is because we are working against the ARIA 1.2 spec and the original pull request was working agianst the ARIA 1.0 spec, which required the search box to have that role. * Set aria-controls instead of aria-owns on search boxes In ARIA 1.1, there was a switch to use `aria-controls` on the search box to point to the results list instead of using `aria-owns`. This is required because the `combobox`, in our case the selection container, should have the `aria-owns` attribute pointing to the results list. And because only one elment can own another element, we must fall back to `aria-controls` to represent that relationship. The tests have also been adjusted to reflect this new discovery.
* allowClear no longer shifts selections to a new line This fixes an issue that we have had with the "x" icon used by the `allowClear` option where selections that just barely interacted with the position of the "x" icon would be pushed to a new line that was separate from the normal second line of selections. This case was pretty rare, because you only had a ~9px area where the interaction could occur. The issue was cuased by the "x" icon being sized for the height of the text in the selection choices, which should be the same as how the selection choices themselves are sized. Unfortunately this did not take into account the fact that the selection choices are given a 1px border which increases their size by 2px, which is what lead to the odd behaviour. This behaviour could not be replicated without the 1px border because the height would then line up correctly. The issue can be fixed by adding a 2px margin to the bottom of the "x" icon, which would force overlapping selections on to the correct second line of selections. This was the method that many users have been using to correct this issue, but was not the method we chose to use. A 1px padding has been added to the "x" icon instead, which should expand the touch area of the "x" by a little while also increasing the height of the "x" by enough to prevent the overlapping. Fixes #4470 * Remove hard-coded height in tests Because tests are executed on different browsers, and because each browser sets their own line height, we cannot depend on the height of the default Select2 being consistent across browsers. As a result, we must write our tests to calcualte the expected height based on known data. In the case of this test, we can calculate ahead of time what two rows of selections is supposed to look like, instead of the edge case that we can otherwise encounter.
* Made the test suite for translations more complete There were previously tests for translations within the test suite, but they only covered a select few problem cases that had previously been fixed. They did not cover the majority of cases, which makes changes to how the translation mechanism for Select2 works a bit more challenging. So this adds tests for the majority of edge cases around translations, including how one would expect the fallback chains to work and also around how defaults interact with the language options. This should not be considered an exhaustive list of all of the edge cases, but it should be good enough to refactor the internals and not have to worry as much. The one change of note to this test file is that we are now properly resetting the defaults in between tests. This should fix any issues that we may have seen where the defaults were not being reset, and thus tests were not properly isolated and would start to interfere with each other. This required pulling the module definition down below the imports, since we need to reference the defaults within the module definition. Many of these tests will fail because the translation system is broken in many small, unrealized ways. The next few commits should make these pass and fix the issues that we are seeing. * Consistently resolve the language option This fixes an issue that we have had for a while where we did not have a way to consistently take the `language` option from a string, array, object, or whatever else is specified and resolve it into `Translation`-compatible objects or strings. Now there is a new internal `_resolveLanguage` function which is able to take any of the supported ways of specifying a language and resolve it down into the supported language chain. This now means that we can properly resolve the following cases, and we can do it in a consistent manner. * When the language is specified as just a string (for example: "en") * When the language is specified as a string containing a region (for example: "en-US") * When the langugae chian is specified as a list of strings (for example: ["es", "en"]) * When the language is specifid as an object containing messages (for example, when a user overrides only a subset of messages) * When the language is specified as a list of strings and objects (for example, when a user wants to use a language other than English and also wants to ovverride some default messages) * When the language is not specified at all (the most common case) * When the language is specified as an empty object (an edge case that allows us to skip processing it) This allows us to consistently produce the language fallback chain based on the given `language` option, something which we could not actually do before because we didn't have a consistent chain. This also means that now the `language` option will consistently be an array after going through this process, instead of being any number of types before. The translation generation currently does not support having objects and strings mixed as a part of the fallback chain, despite that being how the default chain has always worked, and as such there are still failing tests around this. * Move English to always be at the end of the language chain This was technically true in most cases in the past, because if a language chain was manually specified then it would have English injected into the end of it anyway. This is needed because not all translations are complete, but we know the English one is, and Select2 relies on the translation that it uses being complete. This will result in cases where a user specifies a language but still receives English translation for some things, which is what users have historically seen when using partial translations anyway. This just ensures that there will always be a complete translation that is being used, so they won't get unexpected errors and will instead get unexpected English translations. * Filter out repeated languages in fallback chain This is mostly being done for performance reasons, since Select2 will not behave any differently when there are duplicates, but it makes things cleaner when you ask for the fallback chain and it only contains unique values. This cannot distinguish between languages specified by name (string) and languages specified by the contents of their language file (such as the default, English), but this should generally not be an issue. * Convert the language chain into a finalized translation This extracts the logic for converting parts of the language chain into the finalized `Translation` objects out into its own method, with some small fixes for edge cases. This can now properly convert a language chain containing both strings and objects into a translation object that contains them both. We no longer need to special case the `language` option being an array since we know that it will be an array once the language resolution process is completed. * Switch default translation to be empty This should have no external effects, but it fixes an interesting bug where resetting the defaults would not always reset custom translations. This was because it was possible to modify the included English translation when you were setting a default for the language option. This should not cause any issues because the English translation is now appended to the end of the language chain when the defaults are applied, which means that English will continue to exist as the final fallback. * Inherited `lang` attribute should be below the default in the chain It was pointed out in #5468 that the `lang` attribute, when inherited from a parent element, was above the option set in the global default within the inheritance chain. While this makes sense because of how we inherit other properties, it does not make sense for the `lang` attribute. The inheritance chain for the `language` option has been adjusted to be the following: 1. The `lang` attribute on the original `<select>` element 2. The `data-language` attribute on the original `<select>` element (because of how `data-*` attribute resolution affects options) 3. The `language` option specified when initiailizing Select2 4. The `language` Select2 default 5. The `lang` attribute on a parent of the `<select>` element While this is a breaking change, we believe that this change will have minimal to no impact on real-world usage of Select2, because of how the `lang` attribute is generally used within documents. We believe this will now make setting the default language through JavaScript easier and more reliable, bringing it in line with how we recommend it is done within the documentation. This was implemented through a new method `Defaults.applyFromElement` instead of within the old `Options.fromElement` method because it relies on the global defaults object. While we could have reached in to the internals in order to apply it appropriately, it made more sense to handle the proper resolution through a single consistent place. This was not implemented in the `Defaults.apply` method because that method is not typically passed in a reference to the original `<select>` element that it is applying the options for. Closes #5468 * Properly resolve language chains with dictionaries It is possible for a language chain to be specified that includes both a dictionary and the string translation as a part of the same chain, but we would previously throw an error because we assumed that the list could only contain strings and that dictionaries would never be included in lists. This fixes the issue so language region normalization only occurs when a string is specified in the language chain, which is what we were previously assuming was the case but was not actually. This also now resolves the entire language option during the `Defaults.apply` method. This should be a no-op except for internal tests, because the `Defaults.applyFromElement` method should almost always be called in real-world scenarios.
Improve German translation
[Release] 4.0.9
| Back | FazBrowse Home | New Git URL |
No description provided.