WB-1780: Refactor combobox to use Announcer [WIP] #4902
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 4 warnings
|
Check for .changeset entries for all changed files (ubuntu-latest, 20.x)
Changeset entry required for @khanacademy/wonder-blocks-accordion, @khanacademy/wonder-blocks-banner, @khanacademy/wonder-blocks-birthday-picker, @khanacademy/wonder-blocks-breadcrumbs, @khanacademy/wonder-blocks-button, @khanacademy/wonder-blocks-cell, @khanacademy/wonder-blocks-clickable, @khanacademy/wonder-blocks-core, @khanacademy/wonder-blocks-data, @khanacademy/wonder-blocks-dropdown, @khanacademy/wonder-blocks-form, @khanacademy/wonder-blocks-grid, @khanacademy/wonder-blocks-icon-button, @khanacademy/wonder-blocks-icon, @khanacademy/wonder-blocks-labeled-field, @khanacademy/wonder-blocks-layout, @khanacademy/wonder-blocks-link, @khanacademy/wonder-blocks-modal, @khanacademy/wonder-blocks-pill, @khanacademy/wonder-blocks-popover, @khanacademy/wonder-blocks-progress-spinner, @khanacademy/wonder-blocks-search-field, @khanacademy/wonder-blocks-switch, @khanacademy/wonder-blocks-testing, @khanacademy/wonder-blocks-toolbar, @khanacademy/wonder-blocks-tooltip, @khanacademy/wonder-blocks-typography because there have been changes since the last release.
|
|
Lint / Lint (ubuntu-latest, 20.x):
packages/wonder-blocks-dropdown/src/components/combobox.tsx#L514
Unexpected console statement
|
|
Lint / Lint (ubuntu-latest, 20.x)
Error: Command failed: yarn lint:ci "__docs__/components/component-info.tsx" "__docs__/components/token-table.tsx" "__docs__/wonder-blocks-accordion/accordion-section.stories.tsx" "__docs__/wonder-blocks-accordion/accordion.stories.tsx" "__docs__/wonder-blocks-banner/banner.stories.tsx" "__docs__/wonder-blocks-birthday-picker/birthday-picker.stories.tsx" "__docs__/wonder-blocks-breadcrumbs/breadcrumbs.stories.tsx" "__docs__/wonder-blocks-button/button.stories.tsx" "__docs__/wonder-blocks-cell/compact-cell.stories.tsx" "__docs__/wonder-blocks-cell/detail-cell.stories.tsx" "__docs__/wonder-blocks-clickable/clickable-behavior.stories.tsx" "__docs__/wonder-blocks-clickable/clickable.stories.tsx" "__docs__/wonder-blocks-core/id.stories.tsx" "__docs__/wonder-blocks-core/initial-fallback.stories.tsx" "__docs__/wonder-blocks-core/view.stories.tsx" "__docs__/wonder-blocks-dropdown/action-item.stories.tsx" "__docs__/wonder-blocks-dropdown/action-menu.stories.tsx" "__docs__/wonder-blocks-dropdown/combobox.stories.tsx" "__docs__/wonder-blocks-dropdown/listbox.stories.tsx" "__docs__/wonder-blocks-dropdown/multi-select.stories.tsx" "__docs__/wonder-blocks-dropdown/option-item.stories.tsx" "__docs__/wonder-blocks-dropdown/single-select.stories.tsx" "__docs__/wonder-blocks-form/checkbox-group.stories.tsx" "__docs__/wonder-blocks-form/checkbox.stories.tsx" "__docs__/wonder-blocks-form/choice.stories.tsx" "__docs__/wonder-blocks-form/labeled-text-field.stories.tsx" "__docs__/wonder-blocks-form/radio-group.stories.tsx" "__docs__/wonder-blocks-form/radio.stories.tsx" "__docs__/wonder-blocks-form/text-area.stories.tsx" "__docs__/wonder-blocks-form/text-field.stories.tsx" "__docs__/wonder-blocks-icon-button/icon-button.stories.tsx" "__docs__/wonder-blocks-icon/phosphor-icon.stories.tsx" "__docs__/wonder-blocks-layout/media-layout.stories.tsx" "__docs__/wonder-blocks-layout/spring.stories.tsx" "__docs__/wonder-blocks-layout/strut.stories.tsx" "__docs__/wonder-blocks-link/link.stories.tsx" "__docs__/wonder-blocks-modal/modal-dialog.stories.tsx" "__docs__/wonder-blocks-modal/modal-footer.stories.tsx" "__docs__/wonder-blocks-modal/modal-header.stories.tsx" "__docs__/wonder-blocks-modal/modal-launcher.stories.tsx" "__docs__/wonder-blocks-modal/modal-panel.stories.tsx" "__docs__/wonder-blocks-modal/one-pane-dialog.stories.tsx" "__docs__/wonder-blocks-pill/pill.stories.tsx" "__docs__/wonder-blocks-popover/popover-content-core.stories.tsx" "__docs__/wonder-blocks-popover/popover-content.stories.tsx" "__docs__/wonder-blocks-popover/popover.stories.tsx" "__docs__/wonder-blocks-progress-spinner/circular-spinner.stories.tsx" "__docs__/wonder-blocks-search-field/search-field.stories.tsx" "__docs__/wonder-blocks-switch/switch-best-practices.stories.tsx" "__docs__/wonder-blocks-switch/switch.stories.tsx" "__docs__/wonder-blocks-timing/with-action-scheduler.stories.tsx" "__docs__/wonder-blocks-toolbar/toolbar.stories.tsx" "__docs__/wonder-blocks-tooltip/tooltip-content.stories.tsx" "__docs__/wonder-blocks-tooltip/tooltip.stories.tsx" "__docs__/wonder-blocks-typography/body-monospace.stories.tsx" "__docs__/wonder-blocks-typography/body-serif-block.stories.tsx" "__docs__/wonder-blocks-typography/body-serif.stories.tsx" "__docs__/wonder-blocks-typography/body.stories.tsx" "__docs__/wonder-blocks-typography/caption.stories.tsx" "__docs__/wonder-blocks-typography/footnote.stories.tsx" "__docs__/wonder-blocks-typography/heading-large.stories.tsx" "__docs__/wonder-blocks-typography/heading-medium.stories.tsx" "__docs__/wonder-blocks-typography/heading-small.stories.tsx" "__docs__/wonder-blocks-typography/heading-xsmall.stories.tsx" "__docs__/wonder-blocks-typography/label-large.stories.tsx" "__docs__/wonder-blocks-typography/label-medium.stories.tsx" "__docs__/wonder-blocks-typography/label-small.stories.tsx" "__docs__/wonder-blocks-typography/label-xsmall.stories.tsx" "__docs__/wonder-blocks-typography/tagline.stories.tsx" "__docs__/wonder-blocks-typography/title.stories.tsx" "__docs__/wonder-blocks-typography/typography.stories.tsx" "packages/wonder-blocks-accord
|
|
Lint / Lint (ubuntu-latest, 20.x):
__docs__/wonder-blocks-announcer/announcer.stories.tsx#L12
Cannot find module '../../.storybook/components/component-info' or its corresponding type declarations.
|
|
Lint / Lint (ubuntu-latest, 20.x)
Process completed with exit code 2.
|
|
Combobox › multiple selection › LiveRegion › should announce when an item is selected:
packages/wonder-blocks-dropdown/src/components/__tests__/combobox.test.tsx#L906
TestingLibraryElementError: Found multiple elements with the role "log"
Here are the matching elements:
Ignored nodes: comments, script, style
<div
aria-live="assertive"
class="wbARegion"
data-testid="wbARegion-assertive0"
id="wbARegion-assertive0"
role="log"
/>
Ignored nodes: comments, script, style
<div
aria-live="assertive"
class="wbARegion"
data-testid="wbARegion-assertive1"
id="wbARegion-assertive1"
role="log"
/>
Ignored nodes: comments, script, style
<div
aria-live="polite"
class="wbARegion"
data-testid="wbARegion-polite0"
id="wbARegion-polite0"
role="log"
/>
Ignored nodes: comments, script, style
<div
aria-live="polite"
class="wbARegion"
data-testid="wbARegion-polite1"
id="wbARegion-polite1"
role="log"
>
<p>
Combobox is closed
</p>
</div>
(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).
Ignored nodes: comments, script, style
<body>
<div
data-testid="wbAnnounce"
id="wbAnnounce"
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); overflow: hidden; padding: 0px; position: absolute;"
>
<div
id="wbAWrap-assertive"
>
<div
aria-live="assertive"
class="wbARegion"
data-testid="wbARegion-assertive0"
id="wbARegion-assertive0"
role="log"
/>
<div
aria-live="assertive"
class="wbARegion"
data-testid="wbARegion-assertive1"
id="wbARegion-assertive1"
role="log"
/>
</div>
<div
id="wbAWrap-polite"
>
<div
aria-live="polite"
class="wbARegion"
data-testid="wbARegion-polite0"
id="wbARegion-polite0"
role="log"
/>
<div
aria-live="polite"
class="wbARegion"
data-testid="wbARegion-polite1"
id="wbARegion-polite1"
role="log"
>
<p>
Combobox is closed
</p>
</div>
</div>
</div>
<div>
<div
class=""
style="align-items: center; box-sizing: border-box; display: flex; flex-direction: row; margin: 0px; padding: 0px; position: relative; z-index: 0; min-height: 0; min-width: 0; width: 100%; max-width: 100%; flex-wrap: wrap; background: rgb(255, 255, 255); border-radius: 4px; padding-inline: 8px; border: 1px solid #1865f2;"
>
<div
class=""
id=":r39:-pill-"
role="group"
style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: row; margin: 0px; padding: 0px; position: relative; z-index: 0; min-height: 0; min-width: 0; flex-wrap: wrap;"
>
<button
aria-disabled="false"
aria-label="Remove Option 1"
class=""
id=":r39:-pill-0"
style="margin: 0px; padding: 0px 8px 0px 8px; overflow: visible; background: transparent; text-decoration: none; color: rgb(33, 36, 44); box-sizing: border-box; user-select: none; outline: none; line-height: normal; cursor: pointer; display: inline-flex; background-color: rgba(33, 36, 44, 0.08); align-items: center; justify-content: space-between; border-radius: 6px; height: 20px; font-size: 14px; margin-block-start: 4px; margin-inline-end: 4px; padding-inline-end: 4px;"
tabindex="-1"
type="button"
>
Option 1
<span
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: currentColor; width: 16px; height: 16px; mask-image: url(x.svg);"
/>
</button>
<button
aria-disabled="false"
aria-label="Remove Option 2"
class=""
id=":r39:-pill-1"
style="margin: 0px; padding: 0px 8px 0px 8px; overflow: visible; background: transparent; text-decoration: none; color: rgb(33, 36, 44); box-sizing: border-box; user-select: none; outline: none; line-height: normal; cursor: pointer; dis
|
|
Combobox › multiple selection › LiveRegion › should announce when there are no items associated with the combobox input value:
packages/wonder-blocks-dropdown/src/components/__tests__/combobox.test.tsx#L929
TestingLibraryElementError: Found multiple elements with the role "log"
Here are the matching elements:
Ignored nodes: comments, script, style
<div
aria-live="assertive"
class="wbARegion"
data-testid="wbARegion-assertive0"
id="wbARegion-assertive0"
role="log"
/>
Ignored nodes: comments, script, style
<div
aria-live="assertive"
class="wbARegion"
data-testid="wbARegion-assertive1"
id="wbARegion-assertive1"
role="log"
/>
Ignored nodes: comments, script, style
<div
aria-live="polite"
class="wbARegion"
data-testid="wbARegion-polite0"
id="wbARegion-polite0"
role="log"
>
<p>
Option 2, 2 of 3. 3 results available.
</p>
</div>
Ignored nodes: comments, script, style
<div
aria-live="polite"
class="wbARegion"
data-testid="wbARegion-polite1"
id="wbARegion-polite1"
role="log"
/>
(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).
Ignored nodes: comments, script, style
<body>
<div
data-testid="wbAnnounce"
id="wbAnnounce"
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); overflow: hidden; padding: 0px; position: absolute;"
>
<div
id="wbAWrap-assertive"
>
<div
aria-live="assertive"
class="wbARegion"
data-testid="wbARegion-assertive0"
id="wbARegion-assertive0"
role="log"
/>
<div
aria-live="assertive"
class="wbARegion"
data-testid="wbARegion-assertive1"
id="wbARegion-assertive1"
role="log"
/>
</div>
<div
id="wbAWrap-polite"
>
<div
aria-live="polite"
class="wbARegion"
data-testid="wbARegion-polite0"
id="wbARegion-polite0"
role="log"
>
<p>
Option 2, 2 of 3. 3 results available.
</p>
</div>
<div
aria-live="polite"
class="wbARegion"
data-testid="wbARegion-polite1"
id="wbARegion-polite1"
role="log"
/>
</div>
</div>
<div>
<div
class=""
style="align-items: center; box-sizing: border-box; display: flex; flex-direction: row; margin: 0px; padding: 0px; position: relative; z-index: 0; min-height: 0; min-width: 0; width: 100%; max-width: 100%; flex-wrap: wrap; background: rgb(255, 255, 255); border-radius: 4px; padding-inline: 8px; border: 1px solid #1865f2;"
>
<input
aria-activedescendant=":r3c:-pill--1"
aria-autocomplete="list"
aria-controls=":r3c:-pill-"
aria-disabled="false"
aria-expanded="true"
aria-invalid="false"
autocomplete="off"
class=""
id=":r3d:"
role="combobox"
style="width: auto; height: 40px; border-radius: 4px; box-sizing: border-box; margin: 0px; display: inline-grid; font-family: Lato, \"Noto Sans\", sans-serif; font-weight: 400; font-size: 16px; line-height: 20px; background: none; color: rgb(33, 36, 44); appearance: none; outline: none; padding: 0px; min-width: 4px; grid-area: 1 / 2;"
type="text"
value="not-found"
/>
<button
aria-disabled="false"
aria-label="Clear selection"
class=""
style="margin: 0px; position: absolute; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0px; cursor: pointer; outline: none; text-decoration: none; background: none; height: 32px; width: 32px; color: rgba(33, 36, 44, 0.64); border-radius: 4px; right: 40px; top: 4px;"
type="button"
>
<span
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: currentColor; width: 24px; height: 24px; mask-image: url(x.svg);"
/>
</button>
<button
aria-controls=":r3c:"
aria-disabled="false"
aria-expanded="true"
aria-label="Toggle listbox"
class=""
style="margin: 0px; position: absolute; display:
|
|
Test / Test (ubuntu-latest, 20.x, 1/2)
Process completed with exit code 1.
|
|
Test / Test (ubuntu-latest, 20.x, 2/2)
The job was canceled because "ubuntu-latest_20_x_1_2" failed.
|
|
Test / Test (ubuntu-latest, 20.x, 2/2)
The operation was canceled.
|
|
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
|
|
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
|
|
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
|
|
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
|