UI accessibility issue with 2.5.x (not sure when it changed) - icon not being changed - only color - affects color blind users

[nneul]

What happened?

Recently upgraded from 2.1 to 2.5.x - yes, I know that's a long jump. This resulted in the dashboard UI effectively becoming non-usable for a colorblind user that can't distinguish red from green.

It looks to me like the failure/warning state icons are supposed to change symbol as well as color (below from src/app/frontend/common/resources/list.ts)

enum IconName {
  error = 'error',
  circle = 'fiber_manual_record',
  help = 'help',
  warning = 'warning',
  none = '',
}

however, in actual deployment, what I'm seeing is that a pod or other resource in error state is still filled in with just 'circle', only changed to red. This does not work.

While I understand that "all the UI is based on material design stuff from Google", I am pretty sure that they would not be in favor of ignoring accessibility guidelines (don't rely solely on color), so have to assume this is a bug and not intentional.

What did you expect to happen?

Error state in pods or other resources should change both the color AND the icon/symbol so that it is visually distinct for color blind users.

How can we reproduce it (as minimally and precisely as possible)?

Try to deploy a failing pod/bad reference/etc. and a good/working pod. Inspect UI HTML.

You'll see:

<mat-icon role="img" class="mat-icon notranslate mat-tooltip-trigger material-icons mat-icon-no-color kd-error" aria-hidden="true" data-mat-icon-type="font" aria-describedby="cdk-describedby-message-81" cdk-describedby-host="0"> fiber_manual_record <!----><!----></mat-icon>

and

<mat-icon role="img" class="mat-icon notranslate mat-tooltip-trigger material-icons mat-icon-no-color kd-success" aria-hidden="true" data-mat-icon-type="font" aria-describedby="cdk-describedby-message-84" cdk-describedby-host="0"> fiber_manual_record <!----><!----></mat-icon>

When the first one really should be:

<mat-icon role="img" class="mat-icon notranslate mat-tooltip-trigger material-icons mat-icon-no-color kd-error" aria-hidden="true" data-mat-icon-type="font" aria-describedby="cdk-describedby-message-81" cdk-describedby-host="0"> error <!----><!----></mat-icon>

Anything else we need to know?

Best guess looking at the code - it looks to me like it's always failing - and is just defaulting to the IconName.circle instead of actually mapping by status.

  protected icon = IconName;
  private readonly bindings_: {[hash: number]: StateBinding<R>} = {};
  private lastHash_: number;
  private readonly unknownStatus: StatusIcon = {
    iconName: IconName.circle,
    iconClass: {'kd-muted': true},
    iconTooltip: 'Unrecognized',
  };

Looking around, and I may not understand the code, it seems like maybe there is nothing that is actually ever defining the mapping from 'kd-error' status to a corresponding icon name - so it's always defaulting.

@danielromlein

What browsers are you seeing the problem on?

Chrome

Kubernetes Dashboard version

2.5.1

Kubernetes version

1.23

Go version

No response

Node.js version

No response

[nneul]

vs what it probably should look like:

[nneul]

Translated to grayscale -- while not an accurate translation for the issue, does show the issue very clearly:

[nneul]

Note - in that example - it's showing the error msg - so it's not as much of a problem, but when it hasn't shown any information yet - and is JUST showing the failure, you have no way to easily see that it's in a different state (green/yellow/red)

[nneul]

For pending:

[afbjorklund]

Also mentioned in #5331

[k8s-triage-robot]

The Kubernetes project currently lacks enough contributors to adequately respond to all issues and PRs.

This bot triages issues and PRs according to the following rules:

• After 90d of inactivity, lifecycle/stale is applied
• After 30d of inactivity since lifecycle/stale was applied, lifecycle/rotten is applied
• After 30d of inactivity since lifecycle/rotten was applied, the issue is closed

You can:

• Mark this issue or PR as fresh with /remove-lifecycle stale
• Mark this issue or PR as rotten with /lifecycle rotten
• Close this issue or PR with /close
• Offer to help out with Issue Triage

Please send feedback to sig-contributor-experience at kubernetes/community.

/lifecycle stale

[nneul]

/remove-lifecycle stale

[k8s-triage-robot]

The Kubernetes project currently lacks enough contributors to adequately respond to all issues and PRs.

This bot triages issues and PRs according to the following rules:

• After 90d of inactivity, lifecycle/stale is applied
• After 30d of inactivity since lifecycle/stale was applied, lifecycle/rotten is applied
• After 30d of inactivity since lifecycle/rotten was applied, the issue is closed

You can:

• Mark this issue or PR as fresh with /remove-lifecycle stale
• Mark this issue or PR as rotten with /lifecycle rotten
• Close this issue or PR with /close
• Offer to help out with Issue Triage

Please send feedback to sig-contributor-experience at kubernetes/community.

/lifecycle stale

[k8s-triage-robot]

The Kubernetes project currently lacks enough active contributors to adequately respond to all issues and PRs.

This bot triages issues and PRs according to the following rules:

• After 90d of inactivity, lifecycle/stale is applied
• After 30d of inactivity since lifecycle/stale was applied, lifecycle/rotten is applied
• After 30d of inactivity since lifecycle/rotten was applied, the issue is closed

You can:

• Mark this issue or PR as fresh with /remove-lifecycle rotten
• Close this issue or PR with /close
• Offer to help out with Issue Triage

Please send feedback to sig-contributor-experience at kubernetes/community.

/lifecycle rotten

[k8s-triage-robot]

The Kubernetes project currently lacks enough active contributors to adequately respond to all issues and PRs.

This bot triages issues according to the following rules:

• After 90d of inactivity, lifecycle/stale is applied
• After 30d of inactivity since lifecycle/stale was applied, lifecycle/rotten is applied
• After 30d of inactivity since lifecycle/rotten was applied, the issue is closed

You can:

• Reopen this issue with /reopen
• Mark this issue as fresh with /remove-lifecycle rotten
• Offer to help out with Issue Triage

Please send feedback to sig-contributor-experience at kubernetes/community.

/close not-planned

[k8s-ci-robot]

@k8s-triage-robot: Closing this issue, marking it as "Not Planned".

In response to this:

The Kubernetes project currently lacks enough active contributors to adequately respond to all issues and PRs.

This bot triages issues according to the following rules:

• After 90d of inactivity, lifecycle/stale is applied
• After 30d of inactivity since lifecycle/stale was applied, lifecycle/rotten is applied
• After 30d of inactivity since lifecycle/rotten was applied, the issue is closed

You can:

• Reopen this issue with /reopen
• Mark this issue as fresh with /remove-lifecycle rotten
• Offer to help out with Issue Triage

Please send feedback to sig-contributor-experience at kubernetes/community.

/close not-planned

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.