ref #367, browser compat tables WIP

Author: kkellydesign

Diff for: client/src/app.scss

@@ -61,9 +61,12 @@ main {
   min-height: 80vh;
 }
 
-// !!! This is not an accessible way to hide content
 .visually-hidden {
-  display: none;
+  font: 0/0 a;
+  padding: 0 !important;
+  margin: 0 !important;
+  height: 0;
+  color: transparent;
 }
 
 pre {

Diff for: client/src/assets/icons/desktop.svg

@@ -88,7 +88,7 @@ function StatusIcons({ status }: { status: bcd.StatusBlock }) {
     },
   ].filter(isTruthy);
   return icons.length === 0 ? null : (
-    <div className="bc-icons">
+    <div className="bc-icons" data-test={icons.length}>
       {icons.map((icon) => (
         <abbr key={icon.iconClassName} className="only-icon" title={icon.title}>
           <span>{icon.text}</span>
@@ -206,15 +206,21 @@ const CellText = React.memo(
 
     return (
       <>
-        <abbr
-          className={`bc-level-${getSupportClassName(
-            currentSupport
-          )} only-icon`}
-          title={title}
-        >
-          <span>{title}</span>
-        </abbr>
-        <span>{label}</span>
+        <span className="icon-wrap">
+          <abbr
+            className={`
+            bc-level-${getSupportClassName(currentSupport)}
+            icon
+            icon-${getSupportClassName(currentSupport)}`}
+            title={title}
+          >
+            <span className="bc-support-level">{title}</span>
+          </abbr>
+          <span className="bc-version-label">
+            {" "}
+            {browser} {label}
+          </span>
+        </span>
       </>
     );
   }
@@ -224,7 +230,7 @@ function Icon({ name }: { name: string }) {
   return (
     <abbr className="only-icon" title={name}>
       <span>{name}</span>
-      <i className={`ic-${name}`} />
+      <i className={`icon icon-${name}`} />
     </abbr>
   );
 }
@@ -239,7 +245,6 @@ function CellIcons({ support }: { support: bcd.SupportStatement | undefined }) {
       {supportItem.prefix && <Icon name="prefix" />}
       {supportItem.alternative_name && <Icon name="altname" />}
       {supportItem.flags && <Icon name="disabled" />}
-      {supportItem.notes && <Icon name="footnote" />}
     </div>
   );
 }
@@ -305,7 +310,7 @@ function getNotes(
       const supportNotes = [
         item.version_removed
           ? {
-              iconName: "footnote",
+              iconName: "disabled",
               label: (
                 <>
                   Removed in {labelFromString(item.version_removed, browser)}{" "}
@@ -334,7 +339,7 @@ function getNotes(
           : null,
         item.flags
           ? {
-              iconName: "footnote",
+              iconName: "disabled",
               label: <FlagsNote browser={browser} supportItem={item} />,
             }
           : null,
@@ -374,7 +379,7 @@ function getNotes(
                 )} bc-supports`}
               >
                 <CellText support={item} browser={browser} />
-                <CellIcons support={item} />
+                {/**<CellIcons support={item} /> */}
               </dt>
               {supportNotes.map(({ iconName, label }, i) => {
                 return (
@@ -425,7 +430,7 @@ function CompatCell({
   return (
     <>
       <td
-        className={`bc-browser-${browser} bc-supports-${supportClassName} ${
+        className={`bc-icon-cell bc-browser-${browser} bc-supports-${supportClassName} ${
           hasNotes ? "bc-has-history" : ""
         }`}
         aria-expanded={showNotes ? "true" : "false"}
@@ -441,7 +446,7 @@ function CompatCell({
           browserReleaseDate ? `Released ${browserReleaseDate}` : undefined
         }
       >
-        <span className="bc-browser-name">
+        <span className="bc-browser-name visually-hidden">
           <BrowserName id={browser} />
         </span>
         <CellText {...{ support }} browser={browser} />
@@ -450,7 +455,7 @@ function CompatCell({
           <button
             type="button"
             title="Open implementation notes"
-            className={`bc-history-link only-icon ${
+            className={`bc-history-link ${
               showNotes ? "bc-history-link-inverse" : ""
             }`}
           >

Diff for: client/src/assets/icons/disabled.svg

@@ -34,7 +34,8 @@ function PlatformHeaders({ platforms, browsers }) {
             className={`bc-platform-${platformId}`}
             colSpan={browserCount}
           >
-            <span>{platform}</span>
+            <span className={`icon icon-${platformId}`}></span>
+            <span className="visually-hidden">{platform}</span>
           </th>
         );
       })}

Diff for: client/src/assets/icons/footnote.svg

@@ -1,4 +1,116 @@
 @use "~@mdn/minimalist/sass/mixins/utils" as *;
+@use "../../../ui/vars" as *;
+
+.bc {
+  &-table {
+    border: 1px solid var(--border-primary);
+    border-collapse: collapse;
+    width: 100%;
+
+    td,
+    th {
+      border: 1px solid var(--border-primary);
+      font: var(--type-body-m);
+      padding: 0.5rem;
+    }
+
+    th {
+      vertical-align: bottom;
+      text-align: center;
+    }
+
+    tbody th {
+      min-width: 20%;
+    }
+  }
+
+  &-head-txt-label {
+    -ms-writing-mode: tb-rl;
+    -webkit-writing-mode: vertical-rl;
+    writing-mode: vertical-rl;
+    transform: rotate(180deg);
+    white-space: nowrap;
+  }
+
+  &-icon-cell {
+    text-align: center;
+    vertical-align: middle;
+
+    .bc-version-label,
+    .bc-support-level {
+      display: none;
+    }
+  }
+
+  &-history-link {
+    @include visually-hidden;
+    position: absolute; // messing up layout otherwise
+  }
+
+  &-level-no {
+    background-color: var(--icon-critical);
+  }
+
+  &-level-preview {
+    background-color: var(--icon-information);
+  }
+}
+
+.bc-platforms {
+  th {
+    text-align: center;
+  }
+}
+
+.bc-notes-list {
+  margin-left: 20%;
+  position: relative;
+
+  &:before {
+    position: absolute;
+    z-index: -1;
+    height: 100%;
+    left: 7px;
+    width: 2px;
+    background: var(--border-primary);
+    content: "";
+  }
+
+  .bc-level-yes.icon.icon-yes {
+    // override icon
+    background-color: var(--icon-success);
+    mask-image: url("../../../assets/icons/yes-circle.svg");
+  }
+
+  .icon.icon-footnote {
+    mask-image: none;
+    border-radius: 50%;
+    border: 3px solid var(--background-primary);
+    background: var(--border-primary);
+  }
+
+  .icon.icon-disabled {
+    background-color: var(--icon-information);
+  }
+
+  .bc-support-level {
+    display: none;
+  }
+
+  .icon-wrap {
+    background: var(--background-primary);
+  }
+
+  abbr {
+    margin-right: 4px;
+  }
+
+  dd {
+    margin-bottom: 1rem;
+    padding-left: 1.5rem;
+    text-indent: -1.5rem;
+  }
+}
 
 .offscreen,
 .only-icon span {
@@ -17,7 +129,7 @@
     overflow: hidden;
   }
 
-  /* Can only flex-shrink and not flex-grow 
+  /* Can only flex-shrink and not flex-grow
   ie the "slider" in a sliding glass door */
   .left-side {
     flex: 0 1 auto;
@@ -29,3 +141,25 @@
     flex: 1 0 auto;
   }
 }
+
+@media screen and (min-width: $screen-md) {
+  .bc-icon-cell {
+    &[aria-expanded="true"] {
+      position: relative;
+
+      &:after {
+        position: absolute;
+        left: 0;
+        bottom: -1px;
+        height: 2px;
+        width: 100%;
+        background: #fff;
+        content: "";
+      }
+
+      .bc-history-mobile {
+        display: none;
+      }
+    }
+  }
+}

Diff for: client/src/assets/icons/mobile.svg

@@ -1,17 +1,20 @@
 $icons: "add-filled", "add", "bell-filled", "bell", "bookmark-filled",
-  "bookmark", "cancel", "checkmark", "chevron", "critical", "edit", "ellipses",
-  "external", "eye-filled", "eye", "firefox", "github-mark-small", "information",
-  "language", "menu-filled", "menu", "search", "sidebar", "small-arrow",
-  "star-filled", "star", "theme", "trash", "twitter", "warning";
+  "bookmark", "cancel", "checkmark", "chevron", "critical", "desktop",
+  "disabled", "edit", "ellipses", "external", "eye-filled", "eye", "firefox",
+  "footnote", "github-mark-small", "information", "language", "menu-filled",
+  "menu", "mobile", "no", "preview", "search", "server", "sidebar",
+  "small-arrow", "star-filled", "star", "theme", "trash", "twitter", "warning",
+  "yes", "yes-circle";
 
 .icon {
   --size: var(--icon-size, 1rem);
-
   background-color: var(--icon-primary);
   display: inline-block;
   height: var(--size);
   width: var(--size);
   vertical-align: middle;
+  mask-position: center;
+  mask-repeat: no-repeat;
 }
 
 .icon {