Accessibility: Drag handle accessibility and usability

[MaximKipot]

A drag handle on a grid item which appears on hover is visible and accessible in terms of contrast colors only if a corresponding bg color of a grid item is provided.

Steps to reproduce:
hover with a mouse over any grid item / panel in the main area of the interface.

Actual Result:

Expected Result

The implementation would look like:

.theme-dark {
  .react-grid-item > .react-resizable-handle::after {
    border-right-color: #989898;
    border-bottom-color: #989898;
    width: 10px;
    height: 10px;
  }
  .react-grid-item > .react-resizable-handle {
    width: 24px;
    height: 24px;
    background: linear-gradient(
        to bottom right,
        transparent 0%,
        transparent 50%,
        lighten($panel-corner, 6%) 50%,
        lighten($panel-corner, 6%) 100%
    );
  }
}

Relevant WCAG Criteria:
[1.4.3 WCAG Criterion](link to https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast)

Environment:

• Grafana version: 6.7.0-pre
• Data source type & version: TestData DB coming with Simple dummy streaming example
• User OS & Browser: MacOS Mojave, Mozilla and Chrome

[torkelo]

good suggestion!

[MaximKipot]

Same goes for light theme:

.theme-light {
  .react-grid-item > .react-resizable-handle::after {
    border-right-color: #606268;
    border-bottom-color: #606268;
  }
  .react-grid-item > .react-resizable-handle {
    background: linear-gradient(
      to bottom right,
      transparent 0%,
      transparent 50%,
      lighten($panel-corner, 6%) 50%,
      lighten($panel-corner, 6%) 100%
    );
  }
}

Colors used to depict a handle triangle are having enough contrast to be accessible