Primary button text on notification with theme variant has too little contrast when theme is dark #7487

FrediWa · 2024-06-14T08:37:38Z

What is the problem?

When theme is dark, the text to background contrast on a primary button on a notification with a theme variant is too low.

Minimum reproducible example:

<!DOCTYPE html>
<html lang="en" theme="dark">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Notification</title>
    <script type="module" src="./common.js"></script>
  </head>

  <body>
    <vaadin-notification position="middle" duration="0" theme="primary"></vaadin-notification>

    <script type="module">
      import '@vaadin/button';
      import '@vaadin/notification';

      const notification = document.querySelector('vaadin-notification');
      notification.renderer = (root) => {
        root.innerHTML = `
          Operation completed
          <vaadin-button theme="primary">Undo</vaadin-button>
          <vaadin-button>Close</vaadin-button>
        `
      };
      notification.open();
    </script>
  </body>
</html>

(this is just dev/notification.html with theme="dark" attribute in the html tag)

This a problem for all notification theme variants that have a white background for the primary button, namely primary, primary/error and primary/success.

Browsers

Screen Readers

The text was updated successfully, but these errors were encountered:

FrediWa added a11y Accessibility issue vaadin-button vaadin-notification labels Jun 14, 2024

yuriy-fix added the theme label Jun 20, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Primary button text on notification with theme variant has too little contrast when theme is dark #7487

Primary button text on notification with theme variant has too little contrast when theme is dark #7487

FrediWa commented Jun 14, 2024

Primary button text on notification with theme variant has too little contrast when theme is dark #7487

Primary button text on notification with theme variant has too little contrast when theme is dark #7487

Comments

FrediWa commented Jun 14, 2024

What is the problem?

Minimum reproducible example:

Browsers

Screen Readers