[DRAFT - DO NOT REVIEW YET] WB-1671: Dropdown: use combobox role in all openers
#4835
jandradenode-ci-pr.yml
on: pull_request
Matrix: Prime node_modules cache for primary configuration
Matrix: Check for .changeset entries for all changed files
Matrix: Publish npm snapshot
Matrix: Check build sizes
Matrix: Lint / Lint
Matrix: Test / Test
Annotations
10 errors and 7 warnings
|
SingleSelect › uncontrolled › opener › can render a Node as a label:
packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx#L164
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:164:45)
|
|
SingleSelect › a11y > aria-invalid › should set aria-invalid to true if error is true:
packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx#L1702
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:1702:45)
|
|
SingleSelect › a11y > aria-invalid › should set aria-invalid to false if error is false:
packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx#L1702
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:1702:45)
|
|
SingleSelect › a11y > aria-invalid › should set aria-invalid to false if error is undefined:
packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx#L1702
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:1702:45)
|
|
SingleSelect › a11y > aria-invalid › should set aria-invalid to true if error is true and there is a custom opener:
packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx#L1729
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:1729:45)
|
|
SingleSelect › a11y > aria-invalid › should set aria-invalid to false if error is false and there is a custom opener:
packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx#L1729
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:1729:45)
|
|
SingleSelect › a11y > aria-invalid › should set aria-invalid to false if error is undefined and there is a custom opener:
packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx#L1729
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:1729:45)
|
|
SingleSelect › validation › when a value is selected › should call validate prop:
packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx#L1819
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:1819:45)
|
|
SingleSelect › validation › when a value is selected › should call onValidate prop:
packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx#L1838
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:1838:45)
|
|
SingleSelect › validation › when a value is selected › should be in an error state when validation fails:
packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx#L1855
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:1855:45)
|
|
Prime node_modules cache for primary configuration (ubuntu-latest, 20.x)
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|
|
Publish npm snapshot (ubuntu-latest, 20.x)
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|
|
Check for .changeset entries for all changed files (ubuntu-latest, 20.x)
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|
|
Lint / Lint (ubuntu-latest, 20.x)
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|
|
Test / Test (ubuntu-latest, 20.x, 1/2)
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|
|
Test / Test (ubuntu-latest, 20.x, 2/2)
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|
|
Check build sizes (ubuntu-latest, 20.x)
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|