2019-07-21 06:01:38 +03:00
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<link rel="stylesheet" href="vendor/qunit-1.23.1.css" type="text/css" />
|
|
|
|
|
<link rel="stylesheet" href="../../dist/css/select2.css" type="text/css" />
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="qunit"></div>
|
|
|
|
|
<div id="qunit-fixture">
|
|
|
|
|
<div class="event-container">
|
|
|
|
|
<select></select>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<select class="single">
|
|
|
|
|
<option>One</option>
|
|
|
|
|
</select>
|
|
|
|
|
|
|
|
|
|
<select class="single-empty"></select>
|
|
|
|
|
|
|
|
|
|
<select class="single-with-placeholder">
|
|
|
|
|
<option>placeholder</option>
|
|
|
|
|
<option>One</option>
|
|
|
|
|
</select>
|
|
|
|
|
|
|
|
|
|
<select class="multiple" multiple="multiple">
|
|
|
|
|
<option>One</option>
|
|
|
|
|
<option>Two</option>
|
|
|
|
|
</select>
|
|
|
|
|
|
|
|
|
|
<select class="groups">
|
|
|
|
|
<optgroup label="Test">
|
|
|
|
|
<option value="one">One</option>
|
|
|
|
|
<option value="two">Two</option>
|
|
|
|
|
</optgroup>
|
|
|
|
|
<optgroup label="Empty"></optgroup>
|
|
|
|
|
</select>
|
|
|
|
|
|
|
|
|
|
<select class="duplicates">
|
|
|
|
|
<option value="one">One</option>
|
|
|
|
|
<option value="two">Two</option>
|
|
|
|
|
<option value="one">Uno</option>
|
|
|
|
|
</select>
|
|
|
|
|
|
|
|
|
|
<select class="duplicates-multi" multiple="multiple">
|
|
|
|
|
<option value="one">One</option>
|
|
|
|
|
<option value="two">Two</option>
|
|
|
|
|
<option value="one">Uno</option>
|
|
|
|
|
</select>
|
|
|
|
|
|
|
|
|
|
<select class="user-defined"></select>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script src="vendor/qunit-1.23.1.js" type="text/javascript"></script>
|
|
|
|
|
<script src="vendor/jquery-3.4.1.js" type="text/javascript"></script>
|
|
|
|
|
<script src="../dist/js/select2.full.js" type="text/javascript"></script>
|
|
|
|
|
|
|
|
|
|
<script src="helpers.js" type="text/javascript"></script>
|
|
|
|
|
|
|
|
|
|
<script src="a11y/selection-tests.js" type="text/javascript"></script>
|
|
|
|
|
|
|
|
|
|
<script src="data/array-tests.js" type="text/javascript"></script>
|
|
|
|
|
<script src="data/base-tests.js" type="text/javascript"></script>
|
|
|
|
|
<script src="data/inputData-tests.js" type="text/javascript"></script>
|
|
|
|
|
<script src="data/select-tests.js" type="text/javascript"></script>
|
|
|
|
|
<script src="data/tags-tests.js" type="text/javascript"></script>
|
|
|
|
|
<script src="data/tokenizer-tests.js" type="text/javascript"></script>
|
|
|
|
|
|
|
|
|
|
<script src="data/maximumInputLength-tests.js" type="text/javascript"></script>
|
|
|
|
|
<script src="data/maximumSelectionLength-tests.js" type="text/javascript"></script>
|
|
|
|
|
<script src="data/minimumInputLength-tests.js" type="text/javascript"></script>
|
|
|
|
|
|
|
|
|
|
<script src="dropdown/dropdownCss-tests.js" type="text/javascript"></script>
|
|
|
|
|
<script src="dropdown/positioning-tests.js" type="text/javascript"></script>
|
Set the main ARIA 1.1 roles and properties for comboboxes (#5582)
* Move search accessibility tests under selection tests
* Set aria-activedescendent and aria-owns on selection search
This is a reduced version of a5ab08b49cb 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 a5ab08b49cb 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 a5ab08b49cb 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.
2019-07-30 05:34:24 +03:00
|
|
|
<script src="dropdown/search-a11y-tests.js" type="text/javascript"></script>
|
2019-07-21 06:01:38 +03:00
|
|
|
<script src="dropdown/selectOnClose-tests.js" type="text/javascript"></script>
|
|
|
|
|
<script src="dropdown/stopPropagation-tests.js" type="text/javascript"></script>
|
|
|
|
|
|
|
|
|
|
<script src="options/ajax-tests.js" type="text/javascript"></script>
|
|
|
|
|
<script src="options/data-tests.js" type="text/javascript"></script>
|
|
|
|
|
<script src="options/deprecated-tests.js" type="text/javascript"></script>
|
|
|
|
|
<script src="options/translation-tests.js" type="text/javascript"></script>
|
|
|
|
|
<script src="options/width-tests.js" type="text/javascript"></script>
|
|
|
|
|
|
Set the main ARIA 1.1 roles and properties for comboboxes (#5582)
* Move search accessibility tests under selection tests
* Set aria-activedescendent and aria-owns on selection search
This is a reduced version of a5ab08b49cb 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 a5ab08b49cb 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 a5ab08b49cb 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.
2019-07-30 05:34:24 +03:00
|
|
|
<script src="results/a11y-tests.js" type="text/javascript"></script>
|
2019-07-21 06:01:38 +03:00
|
|
|
<script src="results/focusing-tests.js" type="text/javascript"></script>
|
|
|
|
|
<script src="results/infiniteScroll-tests.js" type="text/javascript"></script>
|
|
|
|
|
<script src="results/option-tests.js" type="text/javascript"></script>
|
|
|
|
|
|
|
|
|
|
<script src="selection/allowClear-tests.js" type="text/javascript"></script>
|
|
|
|
|
<script src="selection/containerCss-tests.js" type="text/javascript"></script>
|
|
|
|
|
<script src="selection/focusing-tests.js" type="text/javascript"></script>
|
|
|
|
|
<script src="selection/multiple-tests.js" type="text/javascript"></script>
|
|
|
|
|
<script src="selection/placeholder-tests.js" type="text/javascript"></script>
|
|
|
|
|
<script src="selection/search-tests.js" type="text/javascript"></script>
|
Set the main ARIA 1.1 roles and properties for comboboxes (#5582)
* Move search accessibility tests under selection tests
* Set aria-activedescendent and aria-owns on selection search
This is a reduced version of a5ab08b49cb 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 a5ab08b49cb 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 a5ab08b49cb 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.
2019-07-30 05:34:24 +03:00
|
|
|
<script src="selection/search-a11y-tests.js" type="text/javascript"></script>
|
2019-07-30 05:25:19 +03:00
|
|
|
<script src="selection/search-placeholder-tests.js" type="text/javascript"></script>
|
2019-07-21 06:01:38 +03:00
|
|
|
<script src="selection/single-tests.js" type="text/javascript"></script>
|
|
|
|
|
<script src="selection/stopPropagation-tests.js" type="text/javascript"></script>
|
|
|
|
|
|
2019-07-28 04:37:43 +03:00
|
|
|
<script src="utils/data-tests.js" type="text/javascript"></script>
|
2019-07-21 06:01:38 +03:00
|
|
|
<script src="utils/decorator-tests.js" type="text/javascript"></script>
|
|
|
|
|
<script src="utils/escapeMarkup-tests.js" type="text/javascript"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
