Conversation
…eb-components into conversation-ai-pattern
|
📚 Branch Preview Links🔍 First Generation Visual Regression Test ResultsWhen a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
Deployed to Azure Blob Storage: If the changes are expected, update the |
TarunAdobe
force-pushed
the
ttomar/conversation-ai
branch
from
efa98e1 to
38ba0ce
Compare
nikkimk
left a comment
nikkimk
left a comment
There was a problem hiding this comment.
Let's chat about status and conversation turn accessibility.
|
|
||
| // ────────────────────────── | ||
| // OPTIONS STORIES | ||
| // ────────────────────────── |
There was a problem hiding this comment.
We need a behaviors section with examples to show how consumers use the event to change the status.
| ); | ||
| } | ||
|
|
||
| protected override render(): TemplateResult { |
There was a problem hiding this comment.
I'd recommend using arrow key navigation here view the new focusgroup controller
| private _renderLoadingRow(label: string): TemplateResult { | ||
| return html` | ||
| <div class="swc-ResponseStatus-row"> | ||
| <span | ||
| class="swc-ResponseStatus-loadingSlot" | ||
| role="status" | ||
| aria-label=${label} | ||
| > | ||
| <swc-progress-circle | ||
| size="s" | ||
| indeterminate | ||
| aria-hidden="true" | ||
| ></swc-progress-circle> | ||
| </span> | ||
| <span class="swc-ResponseStatus-label">${label}</span> | ||
| </div> | ||
| `; | ||
| } |
There was a problem hiding this comment.
The screenreader reads the label twic. I recommend the following
| private _renderLoadingRow(label: string): TemplateResult { | |
| return html` | |
| <div class="swc-ResponseStatus-row"> | |
| <span | |
| class="swc-ResponseStatus-loadingSlot" | |
| role="status" | |
| aria-label=${label} | |
| > | |
| <swc-progress-circle | |
| size="s" | |
| indeterminate | |
| aria-hidden="true" | |
| ></swc-progress-circle> | |
| </span> | |
| <span class="swc-ResponseStatus-label">${label}</span> | |
| </div> | |
| `; | |
| } | |
| private _renderLoadingRow(label: string): TemplateResult { | |
| return html` | |
| <div class="swc-ResponseStatus-row"> | |
| <span | |
| class="swc-ResponseStatus-loadingSlot" | |
| role="status" | |
| > | |
| <swc-progress-circle | |
| size="s" | |
| indeterminate | |
| aria-hidden="true" | |
| ></swc-progress-circle> | |
| </span> | |
| <span class="swc-ResponseStatus-label">${label}</span> | |
| </div> | |
| `; | |
| } |
| `; | ||
| } | ||
|
|
||
| private _renderCompleteRow(label: string): TemplateResult { |
There was a problem hiding this comment.
Completed status won't update the screenreader without being inside the status role. Let's talk through how we can implement this. Also see https://www.figma.com/design/42VzvpW262EAUbYsadO4e8/Loading-animation-discover for guidelines on loaders.
|
|
||
| protected override render(): TemplateResult { | ||
| return html` | ||
| <div class="swc-ConversationTurn"> |
There was a problem hiding this comment.
Sighted users can tell which turn is from the user and which one is from the AI. We need a way to communicate this to screenreaders as well.
4 participants
Description
Motivation and context
Related issue(s)
Screenshots (if appropriate)
Author's checklist
Reviewer's checklist
patch,minor, ormajorfeaturesManual review test cases
Descriptive Test Statement
Descriptive Test Statement
Device review
Accessibility testing checklist
Required: Complete each applicable item and document your testing steps (replace the placeholders with your component-specific instructions).
Keyboard (required — document steps below) — What to test for: Focus order is logical; Tab reaches the component and all interactive descendants; Enter/Space activate where appropriate; arrow keys work for tabs, menus, sliders, etc.; no focus traps; Escape dismisses when applicable; focus indicator is visible.
Screen reader (required — document steps below) — What to test for: Role and name are announced correctly; state changes (e.g. expanded, selected) are announced; labels and relationships are clear; no unnecessary or duplicate announcements.