An ADA issue: the drop-down arrow button for items per page is not visible when viewed in high contrast mode

[dmitrii-fediuk]

kitchencollection.com/small-appliances/blenders-juicers

Code snippet

<div class="control"><select id="limiter" data-role="limiter" class="limiter-options"> <option value="21" selected="selected">21</option> <option value="42">42</option> <option value="63">63</option> <option value="84">84</option> <option value="all">All</option></select></div>

Rationale

High contrast settings benefit users with low vision, color blindness or other visual disabilities.
The High Contrast themes present in Windows change or invert web page background and text colors.
If there are elements/controls present on the webpage which gets truncate, gets disappear or shows different states while high contrast mode is ON, then the affected functionality will become inaccessible or hard to use for a user having low vision, or other visual disabilities and relies on high contrast mode for accessing web applications.

Recommendations

Provide a different background to the having id="limiter" or use same background using high contrast media query.

[dmitrii-fediuk]

It is a regression of An ADA issue: «The drop-down arrow button for items per page is not visible when viewed in high contrast mode».