[A11y] update Select2 to 4.1.0-beta.1 for better a11y (Z#23198765) (#5408)

This commit is contained in:
Richard Schreiber
2025-09-03 08:59:38 +02:00
committed by GitHub
parent 0fcaeda0e9
commit 422567a6b7
64 changed files with 543 additions and 453 deletions
+104 -70
View File
@@ -1,5 +1,5 @@
/*!
* Select2 4.0.13
* Select2 4.1.0-beta.1
* https://select2.github.io
*
* Released under the MIT license
@@ -26,7 +26,9 @@
text-overflow: ellipsis;
white-space: nowrap; }
.select2-container .select2-selection--single .select2-selection__clear {
position: relative; }
background-color: transparent;
border: none;
font-size: 1em; }
.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
padding-right: 8px;
padding-left: 20px; }
@@ -38,21 +40,22 @@
user-select: none;
-webkit-user-select: none; }
.select2-container .select2-selection--multiple .select2-selection__rendered {
display: inline-block;
overflow: hidden;
padding-left: 8px;
text-overflow: ellipsis;
white-space: nowrap; }
.select2-container .select2-search--inline {
float: left; }
.select2-container .select2-search--inline .select2-search__field {
box-sizing: border-box;
border: none;
font-size: 100%;
margin-top: 5px;
display: inline;
list-style: none;
padding: 0; }
.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
-webkit-appearance: none; }
.select2-container .select2-selection--multiple .select2-selection__clear {
background-color: transparent;
border: none;
font-size: 1em; }
.select2-container .select2-search--inline .select2-search__field {
box-sizing: border-box;
border: none;
font-size: 100%;
margin-top: 5px;
margin-left: 5px;
padding: 0; }
.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
-webkit-appearance: none; }
.select2-dropdown {
background-color: white;
@@ -77,8 +80,9 @@
padding: 6px;
user-select: none;
-webkit-user-select: none; }
.select2-results__option[aria-selected] {
cursor: pointer; }
.select2-results__option--selectable {
cursor: pointer; }
.select2-container--open .select2-dropdown {
left: 0; }
@@ -144,7 +148,10 @@
.select2-container--default .select2-selection--single .select2-selection__clear {
cursor: pointer;
float: right;
font-weight: bold; }
font-weight: bold;
height: 26px;
margin-right: 20px;
padding-right: 0px; }
.select2-container--default .select2-selection--single .select2-selection__placeholder {
color: #999; }
.select2-container--default .select2-selection--single .select2-selection__arrow {
@@ -186,49 +193,64 @@
background-color: white;
border: 1px solid #aaa;
border-radius: 4px;
cursor: text; }
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
box-sizing: border-box;
list-style: none;
margin: 0;
padding: 0 5px;
width: 100%; }
.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
list-style: none; }
cursor: text;
padding-bottom: 5px;
padding-right: 5px; }
.select2-container--default .select2-selection--multiple .select2-selection__clear {
cursor: pointer;
float: right;
font-weight: bold;
margin-top: 5px;
height: 20px;
margin-right: 10px;
margin-top: 5px;
padding: 1px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: #e4e4e4;
border: 1px solid #aaa;
border-radius: 4px;
cursor: default;
float: left;
margin-right: 5px;
display: inline-block;
margin-left: 5px;
margin-top: 5px;
padding: 0 5px; }
padding: 0; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
cursor: default;
padding-left: 2px;
padding-right: 5px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
background-color: transparent;
border: none;
border-right: 1px solid #aaa;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
color: #999;
cursor: pointer;
display: inline-block;
font-size: 1em;
font-weight: bold;
margin-right: 2px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
color: #333; }
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline {
float: right; }
padding: 0 4px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover, .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
background-color: #f1f1f1;
color: #333;
outline: none; }
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
margin-left: 5px;
margin-right: auto; }
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display {
padding-left: 5px;
padding-right: 2px; }
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
margin-left: 2px;
border-left: 1px solid #aaa;
border-right: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px; }
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__clear {
float: left;
margin-left: 10px;
margin-right: auto; }
.select2-container--default.select2-container--focus .select2-selection--multiple {
@@ -264,15 +286,6 @@
max-height: 200px;
overflow-y: auto; }
.select2-container--default .select2-results__option[role=group] {
padding: 0; }
.select2-container--default .select2-results__option[aria-disabled=true] {
color: #999; }
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: #ddd; }
.select2-container--default .select2-results__option .select2-results__option {
padding-left: 1em; }
.select2-container--default .select2-results__option .select2-results__option .select2-results__group {
@@ -293,7 +306,16 @@
margin-left: -5em;
padding-left: 6em; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
.select2-container--default .select2-results__option--group {
padding: 0; }
.select2-container--default .select2-results__option--disabled {
color: #999; }
.select2-container--default .select2-results__option--selected {
background-color: #ddd; }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
background-color: #5897fb;
color: white; }
@@ -321,7 +343,8 @@
cursor: pointer;
float: right;
font-weight: bold;
margin-right: 10px; }
height: 26px;
margin-right: 20px; }
.select2-container--classic .select2-selection--single .select2-selection__placeholder {
color: #999; }
.select2-container--classic .select2-selection--single .select2-selection__arrow {
@@ -398,41 +421,52 @@
border: 1px solid #aaa;
border-radius: 4px;
cursor: text;
outline: 0; }
outline: 0;
padding-bottom: 5px;
padding-right: 5px; }
.select2-container--classic .select2-selection--multiple:focus {
border: 1px solid #5897fb; }
.select2-container--classic .select2-selection--multiple .select2-selection__rendered {
list-style: none;
margin: 0;
padding: 0 5px; }
.select2-container--classic .select2-selection--multiple .select2-selection__clear {
display: none; }
.select2-container--classic .select2-selection--multiple .select2-selection__choice {
background-color: #e4e4e4;
border: 1px solid #aaa;
border-radius: 4px;
cursor: default;
float: left;
margin-right: 5px;
display: inline-block;
margin-left: 5px;
margin-top: 5px;
padding: 0 5px; }
padding: 0; }
.select2-container--classic .select2-selection--multiple .select2-selection__choice__display {
cursor: default;
padding-left: 2px;
padding-right: 5px; }
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
background-color: transparent;
border: none;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
color: #888;
cursor: pointer;
display: inline-block;
font-size: 1em;
font-weight: bold;
margin-right: 2px; }
padding: 0 4px; }
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
color: #555; }
color: #555;
outline: none; }
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
float: right;
margin-left: 5px;
margin-right: auto; }
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display {
padding-left: 5px;
padding-right: 2px; }
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
margin-left: 2px;
margin-right: auto; }
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px; }
.select2-container--classic.select2-container--open .select2-selection--multiple {
border: 1px solid #5897fb; }
@@ -469,13 +503,13 @@
max-height: 200px;
overflow-y: auto; }
.select2-container--classic .select2-results__option[role=group] {
.select2-container--classic .select2-results__option--group {
padding: 0; }
.select2-container--classic .select2-results__option[aria-disabled=true] {
.select2-container--classic .select2-results__option--disabled {
color: grey; }
.select2-container--classic .select2-results__option--highlighted[aria-selected] {
.select2-container--classic .select2-results__option--highlighted.select2-results__option--selectable {
background-color: #3875d7;
color: white; }