Fix UX inconsistencies between audio and camera input #11699
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
🎉 Snyk checks have passed. No issues have been found so far.✅ security/snyk check is complete. No issues have been found. (View Details) ✅ license/snyk check is complete. No issues have been found. (View Details) |
Contributor
✅ PR preview is ready!
|
4 tasks
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR fixes several UX inconsistencies between audio and camera input components.
- In CameraInput, the "Learn how to allow access" link is restyled to use theme colors and an underline.
- In AudioInput, the link now opens in a new tab, and the disabled state management for the WidgetLabel and clear button has been updated for consistency.
Reviewed Changes
Copilot reviewed 3 out of 5 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| frontend/lib/src/components/widgets/CameraInput/styled-components.ts | Updated link styling to use theme.colors.link and underline text. |
| frontend/lib/src/components/widgets/AudioInput/NoMicPermissions.tsx | Added rel, target attributes to ensure links open in new tab securely. |
| frontend/lib/src/components/widgets/AudioInput/AudioInput.tsx | Adjusted disabled logic for WidgetLabel and clear button to align with the desired UX. |
Comments suppressed due to low confidence (1)
frontend/lib/src/components/widgets/AudioInput/AudioInput.tsx:434
- Changing the WidgetLabel's disabled prop to solely use 'disabled' ensures the label remains active even if microphone permissions are missing, aligning its UX with CameraInput. Please confirm that this distinction between the label and interactive elements (clear button) is intentional and well documented.
disabled={disabled}
frontend/lib/src/components/widgets/CameraInput/styled-components.ts
Outdated
Show resolved
Hide resolved
lukasmasuch
reviewed
Jun 19, 2025
frontend/lib/src/components/widgets/CameraInput/styled-components.ts
Outdated
Show resolved
Hide resolved
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Describe your changes
Fixes a few small UX inconsistencies between audio and camera input:
Note that there's one inconsistency left (the label of camera input isn't gray/disabled) but that's a bigger implementation since the state isn't available where we set the label.
Before:
After:
GitHub Issue Link (if applicable)
Closes #11700
Testing Plan
Updated snapshots.
Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.