wcag: Add attribute, edge, and provenance icons to editors. #317

Author: benloh

app/assets/images/icn_attributes.svg

@@ -147,6 +147,19 @@ svg#netgraph .nodes text {
   font-size: 0.8em;
   padding: 0.1rem 0.2rem;
 }
+/* NC Utils ---------------------------------------------------------------- */
+.tabselectors button {
+  line-height: 10px;
+}
+.tabselectors button > img {
+  opacity: 0.5;
+  width: 16px;
+  height: 16px;
+  padding-left: 0.25rem;
+}
+.tabselectors button.selected > img {
+  opacity: 1;
+}
 /* Buttons ----------------------------------------------------------------- */
 button {
   border-radius: 8px;

app/assets/images/icn_edges.svg

@@ -184,6 +184,11 @@ function m_UICancelInsertImageURL() {
 function RenderTabSelectors(TABS, state, onclick) {
   const { uSelectedTab, uViewMode, degrees } = state;
   const columnsDef = `repeat(${Object.keys(TABS).length}, 1fr)`;
+  const icn = {
+    ATTRIBUTES: 'icn_attributes.svg',
+    EDGES: 'icn_edges.svg',
+    PROVENANCE: 'icn_provenance.svg'
+  };
   return (
     <div
       className="tabselectors"
@@ -201,6 +206,7 @@ function RenderTabSelectors(TABS, state, onclick) {
             disabled={uViewMode === VIEWMODE.EDIT}
           >
             {TABS[k] === 'EDGES' ? `${TABS[k]} (${degrees})` : TABS[k]}
+            <img src={`images/${icn[k]}`} />
           </button>
         );
       })}