fix: resolving storybook a11y issues (#2129)

fixed contrast of html attributes in monaco editor
fixed contrast of numeric css values in monaco editor
added underline to anchor tags in preview frame

Author: gavinbarron

.storybook/preview-body.html

@@ -80,14 +80,21 @@
     color: #0360B9 !important;
   }
 
-  .css-zj0253 * .token.attr-name {
+  /* fix attributes in html rendering */
+  .mtk4, .css-zj0253 * .token.attr-name {
     color: #e50000 !important;
   }
 
+  /* fix number colors in monaco editor */
+  .mtk7 {
+    color: #088155 !important;
+  }
+
   .css-3ltsna:focus-visible {
     outline: auto;
   }
 
+
   @media (max-width: 768px) {
     .story-mgt-root {
       flex-direction: column;

.storybook/preview-head.html

@@ -10,3 +10,8 @@
   };
   awa.init(config);
 </script>
+<style>
+  a {
+    text-decoration: underline !important;
+  }
+</style>

package.json

@@ -93,8 +93,8 @@
     "jest-junit": "^6.3.0",
     "lerna": "^3.22.1",
     "lit-element": "2.5.0",
-    "monaco-editor": "^0.19.3",
-    "monaco-editor-webpack-plugin": "^1.8.2",
+    "monaco-editor": "^0.30.0",
+    "monaco-editor-webpack-plugin": "^6.0.0",
     "node-sass": "npm:sass@^1.44.0",
     "npm-run-all": "^4.1.5",
     "prettier": "2.2.1",

packages/mgt-element/src/utils/GraphHelpers.ts

@@ -6,7 +6,8 @@
  */
 
 import { AuthenticationHandlerOptions, Middleware } from '@microsoft/microsoft-graph-client';
-import { GraphEndpoint, MICROSOFT_GRAPH_ENDPOINTS, Providers } from '..';
+import { Providers } from '../providers/Providers';
+import { GraphEndpoint, MICROSOFT_GRAPH_ENDPOINTS } from '../IGraph';
 
 /**
  * creates an AuthenticationHandlerOptions from scopes array that