WB-1671: Dropdown: use combobox role in all openers
#4929
Annotations
11 errors
|
|
|
Run jest tests with coverage:
packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx#L165
Unable to find role="button"
Ignored nodes: comments, script, style
<body>
<div>
<div
class=""
style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 0px; position: relative; z-index: 0; min-height: 0; min-width: 0;"
>
<span
aria-atomic="true"
aria-live="polite"
aria-relevant="additions text"
class=""
data-testid="dropdown-live-region"
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
/>
<button
aria-controls=":r8:"
aria-disabled="false"
aria-expanded="false"
aria-haspopup="listbox"
aria-invalid="false"
aria-label="Default placeholder"
class=""
id=":r9:"
role="combobox"
style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: space-between; color: rgb(33, 36, 44); height: 40px; padding-left: 16px; padding-right: 12px; border-width: 1px; border-radius: 4px; border-style: solid; outline: none; text-decoration: none; box-sizing: border-box; white-space: nowrap; background: rgb(255, 255, 255); border-color: rgba(33,36,44,0.50);"
>
<span
class=""
style="display: block; font-family: Lato, \"Noto Sans\", sans-serif; font-weight: 400; font-size: 16px; line-height: 20px; margin-right: 8px; white-space: nowrap; user-select: none; overflow: hidden; text-overflow: ellipsis;"
>
<div>
custom item A
</div>
</span>
<span
aria-hidden="true"
class=""
style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgba(33, 36, 44, 0.64); width: 16px; height: 16px; mask-image: url(caret-down-bold.svg); min-width: 16px;"
/>
</button>
</div>
</div>
</body>
at waitForWrapper (node_modules/@testing-library/dom/dist/wait-for.js:163:27)
at node_modules/@testing-library/dom/dist/query-helpers.js:86:33
at Object.findByRole (packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx:165:45)
|
|
Run jest tests with coverage:
packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx#L1703
Unable to find role="button"
Ignored nodes: comments, script, style
<body>
<div>
<div
class=""
style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 0px; position: relative; z-index: 0; min-height: 0; min-width: 0;"
>
<span
aria-atomic="true"
aria-live="polite"
aria-relevant="additions text"
class=""
data-testid="dropdown-live-region"
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
/>
<button
aria-controls=":r4k:"
aria-disabled="true"
aria-expanded="false"
aria-haspopup="listbox"
aria-invalid="true"
aria-label="Choose"
class=""
id=":r4l:"
role="combobox"
style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: space-between; color: rgba(33, 36, 44, 0.64); height: 40px; padding-left: 16px; padding-right: 12px; border-width: 1px; border-radius: 4px; border-style: solid; outline: none; text-decoration: none; box-sizing: border-box; white-space: nowrap; background: rgb(247, 248, 250); border-color: rgba(33,36,44,0.16); cursor: not-allowed;"
>
<span
class=""
style="display: block; font-family: Lato, \"Noto Sans\", sans-serif; font-weight: 400; font-size: 16px; line-height: 20px; margin-right: 8px; white-space: nowrap; user-select: none; overflow: hidden; text-overflow: ellipsis;"
>
Choose
</span>
<span
aria-hidden="true"
class=""
style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgba(33, 36, 44, 0.32); width: 16px; height: 16px; mask-image: url(caret-down-bold.svg); min-width: 16px;"
/>
</button>
</div>
</div>
</body>
at waitForWrapper (node_modules/@testing-library/dom/dist/wait-for.js:163:27)
at node_modules/@testing-library/dom/dist/query-helpers.js:86:33
at findByRole (packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx:1703:45)
|
|
Run jest tests with coverage:
packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx#L1703
Unable to find role="button"
Ignored nodes: comments, script, style
<body>
<div>
<div
class=""
style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 0px; position: relative; z-index: 0; min-height: 0; min-width: 0;"
>
<span
aria-atomic="true"
aria-live="polite"
aria-relevant="additions text"
class=""
data-testid="dropdown-live-region"
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
/>
<button
aria-controls=":r4m:"
aria-disabled="true"
aria-expanded="false"
aria-haspopup="listbox"
aria-invalid="false"
aria-label="Choose"
class=""
id=":r4n:"
role="combobox"
style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: space-between; color: rgba(33, 36, 44, 0.64); height: 40px; padding-left: 16px; padding-right: 12px; border-width: 1px; border-radius: 4px; border-style: solid; outline: none; text-decoration: none; box-sizing: border-box; white-space: nowrap; background: rgb(247, 248, 250); border-color: rgba(33,36,44,0.16); cursor: not-allowed;"
>
<span
class=""
style="display: block; font-family: Lato, \"Noto Sans\", sans-serif; font-weight: 400; font-size: 16px; line-height: 20px; margin-right: 8px; white-space: nowrap; user-select: none; overflow: hidden; text-overflow: ellipsis;"
>
Choose
</span>
<span
aria-hidden="true"
class=""
style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgba(33, 36, 44, 0.32); width: 16px; height: 16px; mask-image: url(caret-down-bold.svg); min-width: 16px;"
/>
</button>
</div>
</div>
</body>
at waitForWrapper (node_modules/@testing-library/dom/dist/wait-for.js:163:27)
at node_modules/@testing-library/dom/dist/query-helpers.js:86:33
at findByRole (packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx:1703:45)
|
|
Run jest tests with coverage:
packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx#L1703
Unable to find role="button"
Ignored nodes: comments, script, style
<body>
<div>
<div
class=""
style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 0px; position: relative; z-index: 0; min-height: 0; min-width: 0;"
>
<span
aria-atomic="true"
aria-live="polite"
aria-relevant="additions text"
class=""
data-testid="dropdown-live-region"
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
/>
<button
aria-controls=":r4o:"
aria-disabled="true"
aria-expanded="false"
aria-haspopup="listbox"
aria-invalid="false"
aria-label="Choose"
class=""
id=":r4p:"
role="combobox"
style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: space-between; color: rgba(33, 36, 44, 0.64); height: 40px; padding-left: 16px; padding-right: 12px; border-width: 1px; border-radius: 4px; border-style: solid; outline: none; text-decoration: none; box-sizing: border-box; white-space: nowrap; background: rgb(247, 248, 250); border-color: rgba(33,36,44,0.16); cursor: not-allowed;"
>
<span
class=""
style="display: block; font-family: Lato, \"Noto Sans\", sans-serif; font-weight: 400; font-size: 16px; line-height: 20px; margin-right: 8px; white-space: nowrap; user-select: none; overflow: hidden; text-overflow: ellipsis;"
>
Choose
</span>
<span
aria-hidden="true"
class=""
style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgba(33, 36, 44, 0.32); width: 16px; height: 16px; mask-image: url(caret-down-bold.svg); min-width: 16px;"
/>
</button>
</div>
</div>
</body>
at waitForWrapper (node_modules/@testing-library/dom/dist/wait-for.js:163:27)
at node_modules/@testing-library/dom/dist/query-helpers.js:86:33
at findByRole (packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx:1703:45)
|
|
Run jest tests with coverage:
packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx#L1730
Unable to find role="button"
Ignored nodes: comments, script, style
<body>
<div>
<div
class=""
style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 0px; position: relative; z-index: 0; min-height: 0; min-width: 0;"
>
<span
aria-atomic="true"
aria-live="polite"
aria-relevant="additions text"
class=""
data-testid="dropdown-live-region"
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
/>
<button
aria-controls=":r4q:"
aria-expanded="false"
aria-haspopup="listbox"
aria-invalid="true"
aria-label="Search"
disabled=""
id=":r4r:"
role="combobox"
tabindex="0"
/>
</div>
</div>
</body>
at waitForWrapper (node_modules/@testing-library/dom/dist/wait-for.js:163:27)
at node_modules/@testing-library/dom/dist/query-helpers.js:86:33
at findByRole (packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx:1730:45)
|
|
Run jest tests with coverage:
packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx#L1730
Unable to find role="button"
Ignored nodes: comments, script, style
<body>
<div>
<div
class=""
style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 0px; position: relative; z-index: 0; min-height: 0; min-width: 0;"
>
<span
aria-atomic="true"
aria-live="polite"
aria-relevant="additions text"
class=""
data-testid="dropdown-live-region"
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
/>
<button
aria-controls=":r4s:"
aria-expanded="false"
aria-haspopup="listbox"
aria-invalid="false"
aria-label="Search"
disabled=""
id=":r4t:"
role="combobox"
tabindex="0"
/>
</div>
</div>
</body>
at waitForWrapper (node_modules/@testing-library/dom/dist/wait-for.js:163:27)
at node_modules/@testing-library/dom/dist/query-helpers.js:86:33
at findByRole (packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx:1730:45)
|
|
Run jest tests with coverage:
packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx#L1730
Unable to find role="button"
Ignored nodes: comments, script, style
<body>
<div>
<div
class=""
style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 0px; position: relative; z-index: 0; min-height: 0; min-width: 0;"
>
<span
aria-atomic="true"
aria-live="polite"
aria-relevant="additions text"
class=""
data-testid="dropdown-live-region"
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
/>
<button
aria-controls=":r4u:"
aria-expanded="false"
aria-haspopup="listbox"
aria-invalid="false"
aria-label="Search"
disabled=""
id=":r4v:"
role="combobox"
tabindex="0"
/>
</div>
</div>
</body>
at waitForWrapper (node_modules/@testing-library/dom/dist/wait-for.js:163:27)
at node_modules/@testing-library/dom/dist/query-helpers.js:86:33
at findByRole (packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx:1730:45)
|
|
Run jest tests with coverage:
packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx#L1820
Unable to find role="button"
Ignored nodes: comments, script, style
<body>
<div>
<div
class=""
style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 0px; position: relative; z-index: 0; min-height: 0; min-width: 0;"
>
<span
aria-atomic="true"
aria-live="polite"
aria-relevant="additions text"
class=""
data-testid="dropdown-live-region"
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
/>
<button
aria-controls=":r54:"
aria-disabled="false"
aria-expanded="false"
aria-haspopup="listbox"
aria-invalid="false"
aria-label="Choose"
class=""
id=":r55:"
role="combobox"
style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: space-between; color: rgba(33, 36, 44, 0.64); height: 40px; padding-left: 16px; padding-right: 12px; border-width: 1px; border-radius: 4px; border-style: solid; outline: none; text-decoration: none; box-sizing: border-box; white-space: nowrap; background: rgb(255, 255, 255); border-color: rgba(33,36,44,0.50);"
>
<span
class=""
style="display: block; font-family: Lato, \"Noto Sans\", sans-serif; font-weight: 400; font-size: 16px; line-height: 20px; margin-right: 8px; white-space: nowrap; user-select: none; overflow: hidden; text-overflow: ellipsis;"
>
Choose
</span>
<span
aria-hidden="true"
class=""
style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgba(33, 36, 44, 0.64); width: 16px; height: 16px; mask-image: url(caret-down-bold.svg); min-width: 16px;"
/>
</button>
</div>
</div>
</body>
at waitForWrapper (node_modules/@testing-library/dom/dist/wait-for.js:163:27)
at node_modules/@testing-library/dom/dist/query-helpers.js:86:33
at Object.findByRole (packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx:1820:45)
|
|
Run jest tests with coverage:
packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx#L1839
Unable to find role="button"
Ignored nodes: comments, script, style
<body>
<div>
<div
class=""
style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 0px; position: relative; z-index: 0; min-height: 0; min-width: 0;"
>
<span
aria-atomic="true"
aria-live="polite"
aria-relevant="additions text"
class=""
data-testid="dropdown-live-region"
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
/>
<button
aria-controls=":r56:"
aria-disabled="false"
aria-expanded="false"
aria-haspopup="listbox"
aria-invalid="false"
aria-label="Choose"
class=""
id=":r57:"
role="combobox"
style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: space-between; color: rgba(33, 36, 44, 0.64); height: 40px; padding-left: 16px; padding-right: 12px; border-width: 1px; border-radius: 4px; border-style: solid; outline: none; text-decoration: none; box-sizing: border-box; white-space: nowrap; background: rgb(255, 255, 255); border-color: rgba(33,36,44,0.50);"
>
<span
class=""
style="display: block; font-family: Lato, \"Noto Sans\", sans-serif; font-weight: 400; font-size: 16px; line-height: 20px; margin-right: 8px; white-space: nowrap; user-select: none; overflow: hidden; text-overflow: ellipsis;"
>
Choose
</span>
<span
aria-hidden="true"
class=""
style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgba(33, 36, 44, 0.64); width: 16px; height: 16px; mask-image: url(caret-down-bold.svg); min-width: 16px;"
/>
</button>
</div>
</div>
</body>
at waitForWrapper (node_modules/@testing-library/dom/dist/wait-for.js:163:27)
at node_modules/@testing-library/dom/dist/query-helpers.js:86:33
at Object.findByRole (packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx:1839:45)
|
|
Run jest tests with coverage:
packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx#L1856
Unable to find role="button"
Ignored nodes: comments, script, style
<body>
<div>
<div
class=""
style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 0px; position: relative; z-index: 0; min-height: 0; min-width: 0;"
>
<span
aria-atomic="true"
aria-live="polite"
aria-relevant="additions text"
class=""
data-testid="dropdown-live-region"
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
/>
<button
aria-controls=":r58:"
aria-disabled="false"
aria-expanded="false"
aria-haspopup="listbox"
aria-invalid="false"
aria-label="Choose"
class=""
id=":r59:"
role="combobox"
style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: space-between; color: rgba(33, 36, 44, 0.64); height: 40px; padding-left: 16px; padding-right: 12px; border-width: 1px; border-radius: 4px; border-style: solid; outline: none; text-decoration: none; box-sizing: border-box; white-space: nowrap; background: rgb(255, 255, 255); border-color: rgba(33,36,44,0.50);"
>
<span
class=""
style="display: block; font-family: Lato, \"Noto Sans\", sans-serif; font-weight: 400; font-size: 16px; line-height: 20px; margin-right: 8px; white-space: nowrap; user-select: none; overflow: hidden; text-overflow: ellipsis;"
>
Choose
</span>
<span
aria-hidden="true"
class=""
style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgba(33, 36, 44, 0.64); width: 16px; height: 16px; mask-image: url(caret-down-bold.svg); min-width: 16px;"
/>
</button>
</div>
</div>
</body>
at waitForWrapper (node_modules/@testing-library/dom/dist/wait-for.js:163:27)
at node_modules/@testing-library/dom/dist/query-helpers.js:86:33
at Object.findByRole (packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx:1856:45)
|
Loading