mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-08 08:52:19 +02:00
ADA accessibility label fixes (#642)
* Update incorrect 'label-for' in demo index.html file. * Use placeholder value for search input aria label. * Updated input template test. * Adding the compiled, uglified JS.
This commit is contained in:
parent
37db45e651
commit
5cf226f166
|
@ -767,9 +767,9 @@ var TEMPLATES = {
|
||||||
var localClasses = (0, _classnames.default)(globalClasses.item, globalClasses.itemChoice, (_classNames5 = {}, _defineProperty(_classNames5, globalClasses.itemDisabled, data.disabled), _defineProperty(_classNames5, globalClasses.itemSelectable, !data.disabled), _defineProperty(_classNames5, globalClasses.placeholder, data.placeholder), _classNames5));
|
var localClasses = (0, _classnames.default)(globalClasses.item, globalClasses.itemChoice, (_classNames5 = {}, _defineProperty(_classNames5, globalClasses.itemDisabled, data.disabled), _defineProperty(_classNames5, globalClasses.itemSelectable, !data.disabled), _defineProperty(_classNames5, globalClasses.placeholder, data.placeholder), _classNames5));
|
||||||
return (0, _utils.strToEl)("\n <div\n class=\"".concat(localClasses, "\"\n data-select-text=\"").concat(itemSelectText, "\"\n data-choice\n data-id=\"").concat(data.id, "\"\n data-value=\"").concat(data.value, "\"\n ").concat(data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable', "\n id=\"").concat(data.elementId, "\"\n ").concat(role, "\n >\n ").concat(data.label, "\n </div>\n "));
|
return (0, _utils.strToEl)("\n <div\n class=\"".concat(localClasses, "\"\n data-select-text=\"").concat(itemSelectText, "\"\n data-choice\n data-id=\"").concat(data.id, "\"\n data-value=\"").concat(data.value, "\"\n ").concat(data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable', "\n id=\"").concat(data.elementId, "\"\n ").concat(role, "\n >\n ").concat(data.label, "\n </div>\n "));
|
||||||
},
|
},
|
||||||
input: function input(globalClasses) {
|
input: function input(globalClasses, placeholderValue) {
|
||||||
var localClasses = (0, _classnames.default)(globalClasses.input, globalClasses.inputCloned);
|
var localClasses = (0, _classnames.default)(globalClasses.input, globalClasses.inputCloned);
|
||||||
return (0, _utils.strToEl)("\n <input\n type=\"text\"\n class=\"".concat(localClasses, "\"\n autocomplete=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n role=\"textbox\"\n aria-autocomplete=\"list\"\n >\n "));
|
return (0, _utils.strToEl)("\n <input\n type=\"text\"\n class=\"".concat(localClasses, "\"\n autocomplete=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n role=\"textbox\"\n aria-autocomplete=\"list\"\n aria-label=\"").concat(placeholderValue, "\"\n >\n "));
|
||||||
},
|
},
|
||||||
dropdown: function dropdown(globalClasses) {
|
dropdown: function dropdown(globalClasses) {
|
||||||
var localClasses = (0, _classnames.default)(globalClasses.list, globalClasses.listDropdown);
|
var localClasses = (0, _classnames.default)(globalClasses.list, globalClasses.listDropdown);
|
||||||
|
@ -3538,7 +3538,7 @@ function () {
|
||||||
position: this.config.position
|
position: this.config.position
|
||||||
});
|
});
|
||||||
this.input = new _components.Input({
|
this.input = new _components.Input({
|
||||||
element: this._getTemplate('input'),
|
element: this._getTemplate('input', this._placeholderValue),
|
||||||
classNames: this.config.classNames,
|
classNames: this.config.classNames,
|
||||||
type: this.passedElement.element.type
|
type: this.passedElement.element.type
|
||||||
});
|
});
|
||||||
|
|
2
public/assets/scripts/choices.min.js
vendored
2
public/assets/scripts/choices.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -149,7 +149,7 @@
|
||||||
<option value="Choice 4" disabled>Choice 4</option>
|
<option value="Choice 4" disabled>Choice 4</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<label for="label-event">Use label in event (add/remove)</label>
|
<label for="choices-multiple-labels">Use label in event (add/remove)</label>
|
||||||
<p id="message"></p>
|
<p id="message"></p>
|
||||||
<select id="choices-multiple-labels" multiple></select>
|
<select id="choices-multiple-labels" multiple></select>
|
||||||
<hr>
|
<hr>
|
||||||
|
|
|
@ -1811,7 +1811,7 @@ class Choices {
|
||||||
});
|
});
|
||||||
|
|
||||||
this.input = new Input({
|
this.input = new Input({
|
||||||
element: this._getTemplate('input'),
|
element: this._getTemplate('input', this._placeholderValue),
|
||||||
classNames: this.config.classNames,
|
classNames: this.config.classNames,
|
||||||
type: this.passedElement.element.type,
|
type: this.passedElement.element.type,
|
||||||
});
|
});
|
||||||
|
|
|
@ -174,7 +174,7 @@ export const TEMPLATES = {
|
||||||
</div>
|
</div>
|
||||||
`);
|
`);
|
||||||
},
|
},
|
||||||
input(globalClasses) {
|
input(globalClasses, placeholderValue) {
|
||||||
const localClasses = classNames(
|
const localClasses = classNames(
|
||||||
globalClasses.input,
|
globalClasses.input,
|
||||||
globalClasses.inputCloned,
|
globalClasses.inputCloned,
|
||||||
|
@ -189,6 +189,7 @@ export const TEMPLATES = {
|
||||||
spellcheck="false"
|
spellcheck="false"
|
||||||
role="textbox"
|
role="textbox"
|
||||||
aria-autocomplete="list"
|
aria-autocomplete="list"
|
||||||
|
aria-label="${placeholderValue}"
|
||||||
>
|
>
|
||||||
`);
|
`);
|
||||||
},
|
},
|
||||||
|
|
|
@ -508,9 +508,10 @@ describe('templates', () => {
|
||||||
spellcheck="false"
|
spellcheck="false"
|
||||||
role="textbox"
|
role="textbox"
|
||||||
aria-autocomplete="list"
|
aria-autocomplete="list"
|
||||||
|
aria-label="test placeholder"
|
||||||
>
|
>
|
||||||
`);
|
`);
|
||||||
const actualOutput = templates.input(classes);
|
const actualOutput = templates.input(classes, 'test placeholder');
|
||||||
|
|
||||||
expect(getType(actualOutput)).to.equal('HTMLInputElement');
|
expect(getType(actualOutput)).to.equal('HTMLInputElement');
|
||||||
expect(stripElement(actualOutput)).to.equal(stripElement(expectedOutput));
|
expect(stripElement(actualOutput)).to.equal(stripElement(expectedOutput));
|
||||||
|
|
Loading…
Reference in a new issue