'Is there a way to add custom attributes to slimselect?
In Lighthouse report I have an error: "ARIA items do not have accessible names" and it looks like div.ss-list is the problem (because it has role="listbox" attribute which fails aria-input-field-name audit). Unfortunately my slimselect doesn't copy custom attributes from select when initialized, for example aria-label="category".
Is there a way to copy/add custom attributes to slimselect div.ss-list element when initializing (without injection html after initializing) or do you have any other good solutions to that issue?
Here is sample code from devtools with already created slimselect:
<select name="category" aria-label="Category" class="search__select" tabindex="-1" data-ssid="ss-59594" aria-hidden="true" style="display: none;">
<option value="">All</option>
<option value="5576">Category 1</option>
<option value="10">Category 2</option>
<option value="82">Category 3</option>
<option value="199">Category 4</option>
</select>
<div class="ss-59594 ss-main search__select" style="">
<div class="ss-single-selected ss-open-below">
<span class="placeholder">All</span>
<span class="ss-deselect ss-hide">x</span>
<span class="ss-arrow"><span class="arrow-up"></span></span>
</div>
<div class="ss-content ss-open">
<div class="ss-search">
<input type="search" placeholder="Search" tabindex="0" aria-label="Search" autocapitalize="off" autocomplete="off" autocorrect="off">
</div>
<div class="ss-list" role="listbox">
<div class="ss-option ss-disabled ss-option-selected" role="option" data-id="97962314">All</div>
<div class="ss-option" role="option" data-id="79478522">Category 1</div>
<div class="ss-option" role="option" data-id="32989768">Category 2</div>
<div class="ss-option" role="option" data-id="53607703">Category 3</div>
<div class="ss-option" role="option" data-id="31214879">Category 4</div>
</div>
</div>
</div>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
