IssueTracker

Problem:

The current design for read-only text fields in Material 3 is visually similar to editable text fields, which can lead to confusion for users. According to Material 3 guidelines, a read-only text field is styled the same as a regular text field and is clearly labeled as read-only using supporting text. However, this creates visual ambiguity, as users may mistakenly believe they can edit the text.

Additionally, displaying a "read-only" label as part of the supporting text feels redundant and awkward, especially when the field is already non-interactive. This design could be improved to make the read-only state more intuitive and visually distinct from editable fields.

Current Design:

1. Read-only fields are styled like editable text fields, which can create confusion about their interactivity.
2. Supporting text is used to label the field as "read-only," but this can feel redundant. For more information, see the Material 3 guidelines for read-only text fields: https://m3.material.io/components/text-fields/guidelines#f572b53d-1a15-4ede-881a-80adbbdc24a5

Proposed Solution:

1. Alternative Design for Read-Only Fields: Introduce a new design where read-only fields are visually distinct from editable fields and do not resemble text input fields. For example:

• Use only a label and value displayed beneath it (without a border or background color).
• Remove borders and background color to make it clear that the field is non-interactive.

2. Cleaner, Minimalist Approach: Instead of using a "read-only" label or supporting text, display the value in a simple text format (label + value), with no text input field style. This would present the information more clearly and create a more minimalist design focused on content rather than input.

3. Improved Accessibility: Ensure that the read-only state is properly communicated to screen readers. The screen reader should announce the field as "read-only" (e.g., "label, value, read-only") rather than announcing it as an editable text field.

Benefits:

1. Clearer Visual Distinction: Users will immediately understand that the field is non-editable, reducing the risk of confusion.
2. Simpler, Cleaner Design: A minimalist approach that eliminates unnecessary borders, background colors, and labels.
3. Better Accessibility: Screen readers will clearly communicate the non-editable state, improving navigation for users with visual impairments.