test(combobox): add accessibility tests

packages/combobox/stories/index.ts

@@ -0,0 +1,274 @@
+/*
+Copyright 2024 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import { ComboboxOption } from '..';
+
+export const countries: ComboboxOption[] = [
+    { id: 'af', value: 'Afghanistan' },
+    { id: 'ax', value: 'Aland Islands' },
+    { id: 'al', value: 'Albania' },
+    { id: 'dz', value: 'Algeria' },
+    { id: 'as', value: 'American Samoa' },
+    { id: 'ad', value: 'Andorra' },
+    { id: 'ao', value: 'Angola' },
+    { id: 'ai', value: 'Anguilla' },
+    { id: 'aq', value: 'Antarctica' },
+    { id: 'ag', value: 'Antigua and Barbuda' },
+    { id: 'ar', value: 'Argentina' },
+    { id: 'ar', value: 'Armenia' },
+    { id: 'aw', value: 'Aruba' },
+    { id: 'au', value: 'Australia' },
+    { id: 'at', value: 'Austria' },
+    { id: 'az', value: 'Azerbaijan' },
+    { id: 'bs', value: 'Bahamas' },
+    { id: 'bh', value: 'Bahrain' },
+    { id: 'bd', value: 'Bangladesh' },
+    { id: 'bb', value: 'Barbados' },
+    { id: 'by', value: 'Belarus' },
+    { id: 'be', value: 'Belgium' },
+    { id: 'bz', value: 'Belize' },
+    { id: 'bj', value: 'Benin' },
+    { id: 'bm', value: 'Bermuda' },
+    { id: 'bt', value: 'Bhutan' },
+    { id: 'bo', value: 'Bolivia' },
+    { id: 'ba', value: 'Bosnia and Herzegovina' },
+    { id: 'bw', value: 'Botswana' },
+    { id: 'bv', value: 'Bouvet Island' },
+    { id: 'br', value: 'Brazil' },
+    { id: 'io', value: 'British Indian Ocean Territory' },
+    { id: 'bn', value: 'Brunei Darussalam' },
+    { id: 'bg', value: 'Bulgaria' },
+    { id: 'bf', value: 'Burkina Faso' },
+    { id: 'bi', value: 'Burundi' },
+    { id: 'kh', value: 'Cambodia' },
+    { id: 'cm', value: 'Cameroon' },
+    { id: 'ca', value: 'Canada' },
+    { id: 'cv', value: 'Cape Verde' },
+    { id: 'ky', value: 'Cayman Islands' },
+    { id: 'cf', value: 'Central African Republic' },
+    { id: 'td', value: 'Chad' },
+    { id: 'cl', value: 'Chile' },
+    { id: 'cn', value: 'China' },
+    { id: 'cx', value: 'Christmas Island' },
+    { id: 'cc', value: 'Cocos (Keeling) Islands' },
+    { id: 'co', value: 'Colombia' },
+    { id: 'km', value: 'Comoros' },
+    { id: 'cg', value: 'Congo' },
+    { id: 'cd', value: 'Congo, The Democratic Republic of the' },
+    { id: 'ck', value: 'Cook Islands' },
+    { id: 'cr', value: 'Costa Rica' },
+    { id: 'ci', value: "Cote D'Ivoire" },
+    { id: 'hr', value: 'Croatia' },
+    { id: 'cu', value: 'Cuba' },
+    { id: 'cy', value: 'Cyprus' },
+    { id: 'cz', value: 'Czech Republic' },
+    { id: 'dk', value: 'Denmark' },
+    { id: 'dj', value: 'Djibouti' },
+    { id: 'dm', value: 'Dominica' },
+    { id: 'do', value: 'Dominican Republic' },
+    { id: 'ec', value: 'Ecuador' },
+    { id: 'eg', value: 'Egypt' },
+    { id: 'sv', value: 'El Salvador' },
+    { id: 'gq', value: 'Equatorial Guinea' },
+    { id: 'er', value: 'Eritrea' },
+    { id: 'ee', value: 'Estonia' },
+    { id: 'et', value: 'Ethiopia' },
+    { id: 'fk', value: 'Falkland Islands (Malvinas)' },
+    { id: 'fo', value: 'Faroe Islands' },
+    { id: 'fj', value: 'Fiji' },
+    { id: 'fi', value: 'Finland' },
+    { id: 'fr', value: 'France' },
+    { id: 'gf', value: 'French Guiana' },
+    { id: 'pf', value: 'French Polynesia' },
+    { id: 'tf', value: 'French Southern Territories' },
+    { id: 'ga', value: 'Gabon' },
+    { id: 'gm', value: 'Gambia' },
+    { id: 'ge', value: 'Georgia' },
+    { id: 'de', value: 'Germany' },
+    { id: 'gh', value: 'Ghana' },
+    { id: 'gi', value: 'Gibraltar' },
+    { id: 'gr', value: 'Greece' },
+    { id: 'gl', value: 'Greenland' },
+    { id: 'gd', value: 'Grenada' },
+    { id: 'gp', value: 'Guadeloupe' },
+    { id: 'gu', value: 'Guam' },
+    { id: 'gt', value: 'Guatemala' },
+    { id: 'gg', value: 'Guernsey' },
+    { id: 'gn', value: 'Guinea' },
+    { id: 'gw', value: 'Guinea-Bissau' },
+    { id: 'gy', value: 'Guyana' },
+    { id: 'ht', value: 'Haiti' },
+    { id: 'hm', value: 'Heard Island and Mcdonald Islands' },
+    { id: 'va', value: 'Holy See (Vatican City State)' },
+    { id: 'hn', value: 'Honduras' },
+    { id: 'hk', value: 'Hong Kong' },
+    { id: 'hu', value: 'Hungary' },
+    { id: 'is', value: 'Iceland' },
+    { id: 'in', value: 'India' },
+    { id: 'id', value: 'Indonesia' },
+    { id: 'ir', value: 'Iran, Islamic Republic Of' },
+    { id: 'iq', value: 'Iraq' },
+    { id: 'ie', value: 'Ireland' },
+    { id: 'im', value: 'Isle of Man' },
+    { id: 'il', value: 'Israel' },
+    { id: 'it', value: 'Italy' },
+    { id: 'jm', value: 'Jamaica' },
+    { id: 'jp', value: 'Japan' },
+    { id: 'je', value: 'Jersey' },
+    { id: 'jo', value: 'Jordan' },
+    { id: 'kz', value: 'Kazakhstan' },
+    { id: 'ke', value: 'Kenya' },
+    { id: 'ki', value: 'Kiribati' },
+    { id: 'kp', value: "Korea, Democratic People's Republic of" },
+    { id: 'kr', value: 'Korea, Republic of' },
+    { id: 'kw', value: 'Kuwait' },
+    { id: 'kg', value: 'Kyrgyzstan' },
+    { id: 'la', value: 'Laos' },
+    { id: 'lv', value: 'Latvia' },
+    { id: 'lb', value: 'Lebanon' },
+    { id: 'ls', value: 'Lesotho' },
+    { id: 'lr', value: 'Liberia' },
+    { id: 'ly', value: 'Libyan Arab Jamahiriya' },
+    { id: 'li', value: 'Liechtenstein' },
+    { id: 'lt', value: 'Lithuania' },
+    { id: 'lu', value: 'Luxembourg' },
+    { id: 'mo', value: 'Macao' },
+    { id: 'mk', value: 'Macedonia, The Former Yugoslav Republic of' },
+    { id: 'mg', value: 'Madagascar' },
+    { id: 'mw', value: 'Malawi' },
+    { id: 'my', value: 'Malaysia' },
+    { id: 'mv', value: 'Maldives' },
+    { id: 'ml', value: 'Mali' },
+    { id: 'mt', value: 'Malta' },
+    { id: 'mh', value: 'Marshall Islands' },
+    { id: 'mq', value: 'Martinique' },
+    { id: 'mr', value: 'Mauritania' },
+    { id: 'mu', value: 'Mauritius' },
+    { id: 'yt', value: 'Mayotte' },
+    { id: 'mx', value: 'Mexico' },
+    { id: 'fm', value: 'Micronesia, Federated States of' },
+    { id: 'md', value: 'Moldova, Republic of' },
+    { id: 'mc', value: 'Monaco' },
+    { id: 'mn', value: 'Mongolia' },
+    { id: 'me', value: 'Montenegro' },
+    { id: 'ms', value: 'Montserrat' },
+    { id: 'ma', value: 'Morocco' },
+    { id: 'mz', value: 'Mozambique' },
+    { id: 'mm', value: 'Myanmar' },
+    { id: 'na', value: 'Namibia' },
+    { id: 'nr', value: 'Nauru' },
+    { id: 'np', value: 'Nepal' },
+    { id: 'nl', value: 'Netherlands' },
+    { id: 'an', value: 'Netherlands Antilles' },
+    { id: 'nc', value: 'New Caledonia' },
+    { id: 'nz', value: 'New Zealand' },
+    { id: 'ni', value: 'Nicaragua' },
+    { id: 'ne', value: 'Niger' },
+    { id: 'ng', value: 'Nigeria' },
+    { id: 'nu', value: 'Niue' },
+    { id: 'nf', value: 'Norfolk Island' },
+    { id: 'mp', value: 'Northern Mariana Islands' },
+    { id: 'no', value: 'Norway' },
+    { id: 'om', value: 'Oman' },
+    { id: 'pk', value: 'Pakistan' },
+    { id: 'pw', value: 'Palau' },
+    { id: 'ps', value: 'Palestinian Territory, Occupied' },
+    { id: 'pa', value: 'Panama' },
+    { id: 'pg', value: 'Papua New Guinea' },
+    { id: 'py', value: 'Paraguay' },
+    { id: 'pe', value: 'Peru' },
+    { id: 'ph', value: 'Philippines' },
+    { id: 'pn', value: 'Pitcairn' },
+    { id: 'pl', value: 'Poland' },
+    { id: 'pt', value: 'Portugal' },
+    { id: 'pr', value: 'Puerto Rico' },
+    { id: 'qa', value: 'Qatar' },
+    { id: 're', value: 'Reunion' },
+    { id: 'ro', value: 'Romania' },
+    { id: 'ru', value: 'Russian Federation' },
+    { id: 'rw', value: 'RWANDA' },
+    { id: 'sh', value: 'Saint Helena' },
+    { id: 'kn', value: 'Saint Kitts and Nevis' },
+    { id: 'lc', value: 'Saint Lucia' },
+    { id: 'pm', value: 'Saint Pierre and Miquelon' },
+    { id: 'vc', value: 'Saint Vincent and the Grenadines' },
+    { id: 'ws', value: 'Samoa' },
+    { id: 'sm', value: 'San Marino' },
+    { id: 'st', value: 'Sao Tome and Principe' },
+    { id: 'sa', value: 'Saudi Arabia' },
+    { id: 'sn', value: 'Senegal' },
+    { id: 'rs', value: 'Serbia' },
+    { id: 'sc', value: 'Seychelles' },
+    { id: 'sl', value: 'Sierra Leone' },
+    { id: 'sg', value: 'Singapore' },
+    { id: 'sk', value: 'Slovakia' },
+    { id: 'si', value: 'Slovenia' },
+    { id: 'sb', value: 'Solomon Islands' },
+    { id: 'so', value: 'Somalia' },
+    { id: 'za', value: 'South Africa' },
+    { id: 'gs', value: 'South Georgia and the South Sandwich Islands' },
+    { id: 'es', value: 'Spain' },
+    { id: 'lk', value: 'Sri Lanka' },
+    { id: 'sd', value: 'Sudan' },
+    { id: 'sr', value: 'Suriname' },
+    { id: 'sj', value: 'Svalbard and Jan Mayen' },
+    { id: 'sz', value: 'Swaziland' },
+    { id: 'se', value: 'Sweden' },
+    { id: 'ch', value: 'Switzerland' },
+    { id: 'sy', value: 'Syrian Arab Republic' },
+    { id: 'tw', value: 'Taiwan' },
+    { id: 'tj', value: 'Tajikistan' },
+    { id: 'tz', value: 'Tanzania, United Republic of' },
+    { id: 'th', value: 'Thailand' },
+    { id: 'tl', value: 'Timor-Leste' },
+    { id: 'tg', value: 'Togo' },
+    { id: 'tk', value: 'Tokelau' },
+    { id: 'to', value: 'Tonga' },
+    { id: 'tt', value: 'Trinidad and Tobago' },
+    { id: 'tn', value: 'Tunisia' },
+    { id: 'tr', value: 'Turkey' },
+    { id: 'tm', value: 'Turkmenistan' },
+    { id: 'tc', value: 'Turks and Caicos Islands' },
+    { id: 'tv', value: 'Tuvalu' },
+    { id: 'ug', value: 'Uganda' },
+    { id: 'ua', value: 'Ukraine' },
+    { id: 'ae', value: 'United Arab Emirates' },
+    { id: 'gb', value: 'United Kingdom' },
+    { id: 'us', value: 'United States' },
+    { id: 'um', value: 'United States Minor Outlying Islands' },
+    { id: 'uy', value: 'Uruguay' },
+    { id: 'uz', value: 'Uzbekistan' },
+    { id: 'vu', value: 'Vanuatu' },
+    { id: 've', value: 'Venezuela' },
+    { id: 'vn', value: 'Vietnam' },
+    { id: 'vg', value: 'Virgin Islands, British' },
+    { id: 'vi', value: 'Virgin Islands, U.S.' },
+    { id: 'wf', value: 'Wallis and Futuna' },
+    { id: 'eh', value: 'Western Sahara' },
+    { id: 'ye', value: 'Yemen' },
+    { id: 'zm', value: 'Zambia' },
+    { id: 'zw', value: 'Zimbabwe' },
+];
+
+export const fruits: ComboboxOption[] = [
+    { id: 'apple', value: 'Apple' },
+    { id: 'banana', value: 'Banana' },
+    { id: 'cherry', value: 'Cherry' },
+    { id: 'coconut', value: 'Coconut' },
+    { id: 'durian', value: 'Durian' },
+    { id: 'lemon', value: 'Lemon' },
+    { id: 'lychee', value: 'Lychee' },
+    { id: 'mango', value: 'Mango' },
+    { id: 'orange', value: 'Orange' },
+    { id: 'peach', value: 'Peach' },
+    { id: 'pear', value: 'Pear' },
+    { id: 'persimmon', value: 'Persimmon' },
+];

packages/combobox/test/benchmark/basic-test.ts

@@ -14,11 +14,11 @@ import '@spectrum-web-components/combobox/sp-combobox.js';
 import '@spectrum-web-components/menu/sp-menu-item.js';
 import { html } from '@spectrum-web-components/base';
 import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
-import { comboboxOptions } from '../index.js';
+import { benchmarkOptions } from '../index.js';
 
 measureFixtureCreation(html`
     <sp-combobox
         .autocomplete=${'none'}
-        .options=${comboboxOptions}
+        .options=${benchmarkOptions}
     ></sp-combobox>
 `);

packages/combobox/test/index.ts

@@ -10,8 +10,10 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { expect } from '@open-wc/testing';
+import { expect, fixture } from '@open-wc/testing';
+import { html } from '@open-wc/testing';
 import { Combobox, ComboboxItem, ComboboxOption } from '..';
+import { fruits } from '../stories/index.js';
 
 export const countryList = [
     'Afghanistan',
@@ -265,7 +267,7 @@ export const countryList = [
     'Åland Islands',
 ];
 
-export const comboboxOptions = countryList.map((value, index) => ({
+export const benchmarkOptions = countryList.map((value, index) => ({
     id: index.toString(),
     value: value,
 }));
@@ -275,6 +277,18 @@ export type TestableCombobox = Combobox & {
     availableOptions: ComboboxOption[];
 };
 
+export const comboboxFixture = async (): Promise<TestableCombobox> => {
+    const el = await fixture<TestableCombobox>(
+        html`
+            <sp-combobox label="Combobox" .options=${fruits}>
+                Combobox
+            </sp-combobox>
+        `
+    );
+
+    return el;
+};
+
 export const testActiveElement = (
     el: TestableCombobox,
     testId: string
@@ -285,3 +299,7 @@ export const testActiveElement = (
     ) as ComboboxItem;
     expect(activeElement.getAttribute('aria-selected')).to.equal('true');
 };
+
+export const isWebKit =
+    /AppleWebKit/.test(window.navigator.userAgent) &&
+    !/Chrome/.test(window.navigator.userAgent);