@devtools-ds/diagnostic NPM

@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)}
/>;