[✨ Triage] dotnet/aspire#10427 by IEvangelist - The message bar intent styles could be improved

[MihuBot]

Triage for dotnet/aspire#10427.
Repo filter: area-dashboard issues.
MihuBot version: 4431de.
Ping MihaZupan for any issues.

This is a test triage report generated by AI, aimed at helping the triage team quickly identify past issues/PRs that may be related.
Take any conclusions with a large grain of salt.

dotnet/aspire#10427: The message bar intent styles could be improved by IEvangelist
[Tool] Searching for message bar intent styles, message bar colors, notification bar, message bar API naming, message bar dark theme, message bar contrast, message bar confirmation color, message bar information color, message bar warning color, message bar error color (IncludeOpen=True, IncludeClosed=True, IncludeIssues=True, IncludePullRequests=True, Repository=dotnet/aspire)
[Tool] Found 93 issues, 202 comments, 93 returned results (18522 ms)

Here is a list of related issues and discussions relevant to issue #10427, "The message bar intent styles could be improved" by IEvangelist. The issue raises concerns about the visual distinction and color choices for message bar intents (Information, Confirmation, Error, Warning), especially in dark theme, and also suggests a possible API naming improvement from "message bar" to "notification bar".

---

Closely Related Issues and PRs

1. Issue #1464 (Dec 2023) - Error UI is hard to read in dark theme

• Link
• Summary: Reports that error messages and overlays are hard to read in dark theme due to poor contrast. Includes screenshots showing the problem.
• Resolution: Addressed by PR #1527 (see below).

2. PR #1527 (Jan 2024) - Restyle error ui and reconnection ui

• Link
• Summary: Directly addresses dark theme contrast issues for error and reconnection UI. Includes before/after screenshots and discussion about color choices and contrast. Some debate about which color tokens to use for backgrounds and foregrounds, and the need to meet accessibility standards.
• Key Comments:
  • Discussion about using appropriate color tokens for contrast.
  • Feedback that the background in dark mode is still too bright, but constrained by contrast requirements.
  • Suggestion to consult accessibility experts for further improvements.

3. Issue #1627 (Jan 2024) - Contrast is bad when showing errors in dark mode

• Link
• Summary: Reports that black text on bright red is rough on the eyes in dark mode, suggesting white text or a softer red.
• Resolution: Closed, likely addressed by the same set of changes as above.

4. PR #1240 (Dec 2023) - Override fluentui-blazor error hex, darken trace duration background

• Link
• Summary: Changes error color to be more readable, especially in dark theme. Discussion about color contrast, accessibility, and the limitations of the FluentUI color system.
• Key Comments:
  • Feedback that the new colors are too light/dark, and suggestions to use colors from other parts of the app.
  • Accessibility requirements (WCAG 1.4.11) are a recurring theme.

5. Issue #690 (Nov 2023) - Error indicator on span in /Traces is hard to see in dark mode

• Link
• Summary: Reports that error indicators lack contrast in dark mode. Suggests adjusting icon or color for better visibility.
• Resolution: Addressed by PR #1240 above.

6. PR #10034 (June 2025) - Add Aspire upgrade check

• Link
• Summary: Contains a comment about message bar styling: "The message bar uses the built-in FluentUI control. There are limited options on message bar colors and no equivalent of VS's gold bar. If we want another color/icon then either some hacks will be required, or we ask FluentUI people to add new options, or we replace the control with our own one (which I don't want to do)."
• Key Comments:
  • Suggests that customization is limited by the underlying FluentUI component.
  • Acknowledges the need for more distinctive styling but notes technical constraints.

7. Issue #10330 (July 2025) - Add a top-level message bar error when the container runtime is unhealthy

• Link
• Summary: Suggests using the message bar for prominent error notifications. Discussion is more about usage than styling, but relevant to the notification/message bar concept.

8. PR #10234 (July 2025) - Decrease message bar button text size

• Link
• Summary: Minor visual tweak to message bar button text size. No discussion about intent colors, but shows ongoing UI refinement.

9. PR #10189 (July 2025) - Add support for markdown formatting in interaction message

• Link
• Summary: Adds markdown support to message bar content. Some discussion about API naming for this feature, which is tangentially related to the "message bar" vs "notification bar" naming concern.

10. PR #9943 (June 2025) - Interaction service

• Link
• Summary: Introduces the InteractionService used to prompt users in the dashboard. Some discussion about dialog and message box UI, including icon placement and button text, but not specifically about intent colors.

11. Issue #4122 (May 2024) - Naming conventions

• Link
• Summary: Discusses API naming conventions in general, not specifically about the message bar, but relevant to the suggestion to rename "message bar" to "notification bar". The team has had multiple API reviews about naming, weighing consistency and clarity.

---

Additional Related Issues

• Issue #4391 (June 2024) - Resources state error indicator trubs

  • Link
  • Reports alignment and color issues with badges/icons, which is related to visual clarity and contrast.

• PR #1378 (Dec 2023) - Adds orange/red warning/error icons for exited resources

  • Link
  • Discussion about icon and color choices for warning/error states, with accessibility and colorblind-friendliness in mind.

• PR #3401 (Apr 2024) - Make status column icons colorblind friendly

  • Link
  • Ensures icons are differentiated by shape as well as color, for accessibility.

---

Key Takeaways

• Color and Intent Distinction: There is a recurring theme of insufficient distinction between message bar intents (info, confirm, warning, error), especially in dark mode. Multiple issues and PRs have addressed color contrast and iconography, often constrained by the FluentUI component's capabilities.
• Accessibility: Many discussions reference WCAG guidelines and the need for color/contrast improvements for accessibility, especially in dark theme.
• API Naming: There is some precedent for reviewing and updating API names for clarity and consistency, but no specific decision or proposal yet to rename "message bar" to "notification bar".
• Technical Constraints: The use of FluentUI's message bar limits customization. More distinctive styling may require either hacks, upstream changes to FluentUI, or a custom control.

---

Summary Table

Issue/PR #	Date	Title/Topic	Key Points
#1464	Dec 2023	Error UI is hard to read in dark theme	Poor contrast in dark mode; fixed by #1527
#1527	Jan 2024	Restyle error ui and reconnection ui	Improved contrast, color choices, accessibility; ongoing debate about best color tokens
#1627	Jan 2024	Contrast is bad when showing errors in dark mode	Black on red is hard to read; closed after improvements
#1240	Dec 2023	Override fluentui-blazor error hex, darken trace duration bg	Adjusted error color for better contrast; discussed WCAG compliance
#690	Nov 2023	Error indicator on span in /Traces is hard to see in dark mode	Improved error icon contrast; fixed by #1240
#10034	June 2025	Add Aspire upgrade check	Message bar styling limited by FluentUI; more styles would require hacks or custom control
#10330	July 2025	Add a top-level message bar error	Message bar used for prominent errors; not about styling
#10234	July 2025	Decrease message bar button text size	Minor visual tweak
#10189	July 2025	Add support for markdown formatting in interaction message	Some API naming discussion
#9943	June 2025	Interaction service	Dialog/message box UI, icon placement, button text
#4122	May 2024	Naming conventions	General API naming review, not specific to message bar
#4391	June 2024	Resources state error indicator trubs	Badge/icon color and alignment issues
#1378	Dec 2023	Adds orange/red warning/error icons for exited resources	Icon and color choices for warning/error, accessibility
#3401	Apr 2024	Make status column icons colorblind friendly	Icons differentiated by shape as well as color

---

Conclusion

• There is strong precedent and ongoing work to improve the visual distinction and accessibility of message bar intent styles, especially in dark theme.
• Customization is currently limited by the FluentUI component, and further improvements may require upstream changes or a custom implementation.
• API naming is periodically reviewed, and your suggestion to rename "message bar" to "notification bar" aligns with ongoing discussions about clarity and consistency, though no specific action has been taken yet.

If you are triaging this issue, it is highly related to previous accessibility and UI/UX work, and may benefit from coordination with those who have worked on the above issues and PRs, especially regarding FluentUI limitations and accessibility standards.