@devtools-ds/diagnostic

@devtools-ds/diagnostic

The Diagnostic component displays errors and warnings from code, similar to errors produced by tools like webpack. It can also be used to display errors produced by a Language Server.

Installation

npm i @devtools-ds/diagnostic
# or with yarn
yarn add @devtools-ds/diagnostic

Accessibility Approach

The Diagnostic is a block of preformatted text that can be difficult for screen readers to read. Based on this, we followed the MDN suggestion to treat the component as a figure. There is an auto-generated caption describing the error in a screen-reader friendly way.

Usage

import { Diagnostic } from "@devtools-ds/diagnostic";

Basic Diagnostic

<Diagnostic message={message} lines={lines} severity={severity} />

Diagnostic Using Language Server

import { DiagnosticSeverity } from "vscode-languageserver-types";

<Diagnostic
  message={message}
  lines={lines}
  severity={transformLanguageServer(DiagnosticSeverity.Error)}
/>;

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Shelby Cohen 💻 🎨

Tyler Krupicka 💻 📖 🎨 🚇 💡 ⚠️

Adam Dierkens 🎨 🤔

This project follows the all-contributors specification. Contributions of any kind welcome!