Skip to content

In high contrast modes toggle buttons are not visible. #18242

@msftedad

Description

@msftedad

What happened?

Windows Test Environment:
OS: Windows 11 Enterprise Insider Preview Version 24H2 (OS Build 26100.6584)
Browser Microsoft Edge Version 140.3485.54
Application URL: https://quasar.dev/vue-components/toggle#with-icons

User Impact:
Users with low vision or those who rely on high contrast settings to distinguish interface elements may struggle to locate or interact with these controls. This lack of visibility can lead to missed actions, confusion, and reduced confidence in using the interface.

Actual Result:
In high contrast modes toggle buttons are not visible.
throughout the page toggle buttons are not visible in contrast modes.

Refer Attachment:
1.In high contrast modes toggle buttons are not visible.png
2.In high contrast modes toggle buttons are not visible.mp4

https://github.com/user-attachments/assets/babd7ef9-fa11-4c45-9537-8522a92414db
Image

What did you expect to happen?

In high contrast modes toggle buttons should be visible.

Reproduction URL

https://quasar.dev/vue-components/toggle#with-icons

How to reproduce?

  1. Open URL: https://quasar.dev/vue-components/toggle#with-icons in latest edge browser.
  2. Toggle Quasar framework page will be opened.
  3. Press tab key to reach till 'Basic' heading.
  4. Verify whether in high contrast modes, toggle buttons are visible or not.

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

Chrome, Microsoft Edge

Quasar info output

Relevant log output

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions