baseline status for html elements and attributes (#113)

Author: rviscomi

web-data/css/mdn/mdn-browser-compat-data-importer.mjs

@@ -150,7 +150,7 @@ function toCompatString(bcdProperty) {
   return s.join(',');
 }
 
-function supportToShortCompatString(support, browserAbbrev) {
+export function supportToShortCompatString(support, browserAbbrev) {
   let version_added;
   if (Array.isArray(support) && support[0] && support[0].version_added) {
     version_added = support[0].version_added;

web-data/data/browsers.html-data.json

@@ -6,6 +6,7 @@
 import fs from 'fs';
 import path from 'path';
 import bcd from '@mdn/browser-compat-data' with { type: 'json' };
+import { getStatus } from 'compute-baseline';
 import htmlTags from './htmlTags.json' with { type: 'json' };
 import htmlTagDescriptions from './mdnTagDescriptions.json'  with { type: 'json' };
 import htmlGlobalAttributes from './htmlGlobalAttributes.json' with { type: 'json' };
@@ -14,6 +15,35 @@ import oldEvents from './oldEvents.json' with { type: 'json' };
 import ariaData from './ariaData.json' with { type: 'json' };
 import ariaSpec from './ariaSpec.json' with { type: 'json' };
 import valueSets from './valueSets.json' with { type: 'json' };
+import { supportToShortCompatString } from '../css/mdn/mdn-browser-compat-data-importer.mjs';
+
+
+function getFeatureId(compat) {
+  return compat?.tags?.find(tag => {
+    const parts = tag.split(':');
+    return parts.length == 2 && parts[0] == 'web-features';
+  })?.split(':')[1];
+}
+
+const BaselineBrowserAbbreviations = {
+  "chrome": "C",
+  "chrome_android": "CA",
+  "edge": "E",
+  "firefox": "FF",
+  "firefox_android": "FFA",
+  "safari": "S",
+  "safari_ios": "SM"
+};
+
+function getBrowserCompatString(support) {
+  if (!support) {
+    return;
+  }
+  return Object.entries(support).map(([browser, version_added]) => {
+    const abbreviation = BaselineBrowserAbbreviations[browser];
+    return supportToShortCompatString({version_added}, abbreviation);
+  });
+}
 
 /*---------------------------------------------------------------------------------------------
  * Tags
@@ -67,6 +97,35 @@ htmlTags.forEach(t => {
         name: 'MDN Reference',
         url: bcdMatchingTag.__compat.mdn_url
       });
+
+      // Add the Baseline status to the HTML element
+      const featureId = getFeatureId(bcdMatchingTag.__compat);
+      if (!featureId) {
+        return;
+      }
+      const status = getStatus(featureId, `html.elements.${t.name}`);
+      if (!status) {
+        return;
+      }
+      t.browsers = getBrowserCompatString(status.support);
+      delete status.support;
+      t.status = status;
+
+      // Add the Baseline status to each attribute
+      t.attributes.forEach(a => {
+        const bcdMatchingAttr = bcdHTMLElements[t.name][a.name];
+        if (!bcdMatchingAttr) {
+          return;
+        }
+        const attrFeatureId = getFeatureId(bcdMatchingAttr.__compat) || featureId;
+        const attrStatus = getStatus(attrFeatureId, `html.elements.${t.name}.${a.name}`);
+        if (!attrStatus) {
+          return;
+        }
+        a.browsers = getBrowserCompatString(attrStatus.support);
+        delete attrStatus.support;
+        a.status = attrStatus;
+      });
     }
   }
 });
@@ -84,19 +143,28 @@ htmlGlobalAttributes.forEach(a => {
       value: a.description
     };
   }
-  if (
-    bcdGlobalAttributes[a.name] &&
-    bcdGlobalAttributes[a.name].__compat &&
-    bcdGlobalAttributes[a.name].__compat.mdn_url
-  ) {
+  const bcdMatchingAttr = bcdGlobalAttributes[a.name];
+  if (bcdMatchingAttr?.__compat?.mdn_url) {
     if (!a.references) {
       a.references = [];
     }
     a.references.push({
       name: 'MDN Reference',
-      url: bcdGlobalAttributes[a.name].__compat.mdn_url
+      url: bcdMatchingAttr.__compat.mdn_url
     });
   }
+
+  const featureId = getFeatureId(bcdMatchingAttr?.__compat);
+  if (!featureId) {
+    return;
+  }
+  const status = getStatus(featureId, `html.global_attributes.${a.name}`);
+  if (!status) {
+    return;
+  }
+  a.browsers = getBrowserCompatString(status.support);
+  delete status.support;
+  a.status = status;
 });
 
 /*---------------------------------------------------------------------------------------------

web-data/html/generateData.mjs

@@ -7,6 +7,15 @@
     "name": "autocapitalize",
     "description": "Controls whether and how text input is automatically capitalized as it is entered/edited by the user. It can have the following values:\n\n*   `off` or `none`, no autocapitalization is applied (all letters default to lowercase)\n*   `on` or `sentences`, the first letter of each sentence defaults to a capital letter; all other letters default to lowercase\n*   `words`, the first letter of each word defaults to a capital letter; all other letters default to lowercase\n*   `characters`, all letters should default to uppercase"
   },
+  {
+    "name": "autocorrect",
+    "description": "Controls whether autocorrection of editable text is enabled for spelling and/or punctuation errors.",
+    "valueSet": "o"
+  },
+  {
+    "name": "autofocus",
+    "description": "Indicates that an element should be focused on page load, or when the [`<dialog>`](https://developer.mozilla.org/docs/Web/HTML/Element/dialog) that it is part of is displayed."
+  },
   {
     "name": "class",
     "description": "A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the [class selectors](https://developer.mozilla.org/docs/Web/CSS/Class_selectors) or functions like the method [`Document.getElementsByClassName()`](https://developer.mozilla.org/docs/Web/API/Document/getElementsByClassName \"returns an array-like object of all child elements which have all of the given class names.\")."
@@ -33,6 +42,11 @@
     "name": "dropzone",
     "description": "An enumerated attribute indicating what types of content can be dropped on an element, using the [Drag and Drop API](https://developer.mozilla.org/docs/DragDrop/Drag_and_Drop). It can have the following values:\n\n*   `copy`, which indicates that dropping will create a copy of the element that was dragged\n*   `move`, which indicates that the element that was dragged will be moved to this new location.\n*   `link`, will create a link to the dragged data."
   },
+  {
+    "name": "enterkeyhint",
+    "description": "An enumerated attribute defining what action label (or icon) to present for the enter key on virtual keyboards.",
+    "valueSet": "enterkeyhint"
+  },
   {
     "name": "exportparts",
     "description": "Used to transitively export shadow parts from a nested shadow tree into a containing light tree."
@@ -46,6 +60,10 @@
     "name": "id",
     "description": "Defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS)."
   },
+  {
+    "name": "inert",
+    "description": "Indicates that the element and all of its flat tree descendants become _inert_. Modal `<dialog>`s generated with [`showModal()`](https://developer.mozilla.org/docs/Web/API/HTMLDialogElement/showModal) escape inertness, meaning that they don't inherit inertness from their ancestors, but can only be made inert by having the `inert` attribute explicitly set on themselves."
+  },
   {
     "name": "inputmode",
     "description": "Provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents. Used primarily on [`<input>`](https://developer.mozilla.org/docs/Web/HTML/Element/input \"The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent.\") elements, but is usable on any element while in `[contenteditable](https://developer.mozilla.org/docs/Web/HTML/Global_attributes#attr-contenteditable)` mode."
@@ -79,10 +97,19 @@
     "name": "lang",
     "description": "Helps define the language of an element: the language that non-editable elements are in, or the language that editable elements should be written in by the user. The attribute contains one “language tag” (made of hyphen-separated “language subtags”) in the format defined in [_Tags for Identifying Languages (BCP47)_](https://www.ietf.org/rfc/bcp/bcp47.txt). [**xml:lang**](#attr-xml:lang) has priority over it."
   },
+  {
+    "name": "nonce",
+    "description": "Defines a cryptographic nonce (\"number used once\") which can be used by [Content Security Policy](https://developer.mozilla.org/docs/Web/HTTP/Guides/CSP) to determine whether or not a given fetch will be allowed to proceed for a given element."
+  },
   {
     "name": "part",
     "description": "A space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the [`::part`](https://developer.mozilla.org/docs/Web/CSS/::part \"The ::part CSS pseudo-element represents any element within a shadow tree that has a matching part attribute.\") pseudo-element."
   },
+  {
+    "name": "popover",
+    "description": "Designates an element as a popover element.",
+    "valueSet": "popover"
+  },
   {
     "name": "role",
     "valueSet": "roles"
@@ -112,5 +139,10 @@
     "name": "translate",
     "description": "An enumerated attribute that is used to specify whether an element's attribute values and the values of its [`Text`](https://developer.mozilla.org/docs/Web/API/Text \"The Text interface represents the textual content of Element or Attr. If an element has no markup within its content, it has a single child implementing Text that contains the element's text. However, if the element contains markup, it is parsed into information items and Text nodes that form its children.\") node children are to be translated when the page is localized, or whether to leave them unchanged. It can have the following values:\n\n*   empty string and `yes`, which indicates that the element will be translated.\n*   `no`, which indicates that the element will not be translated.",
     "valueSet": "y"
+  },
+  {
+    "name": "virtualkeyboardpolicy",
+    "description": "When specified on an element that the element's content is editable (for example, it is an `<input>` or `<textarea>` element, or an element with the `contenteditable` attribute set), it controls the on-screen virtual keyboard behavior on devices such as tablets, mobile phones, or other devices where a hardware keyboard may not be available.",
+    "valueSet": "b"
   }
 ]

web-data/html/htmlGlobalAttributes.json

@@ -543,6 +543,10 @@
           "value": "Indicates how the browser should load the image."
         }
       },
+      {
+        "name": "fetchpriority",
+        "valueSet": "fetchpriority"
+      },
       {
         "name": "referrerpolicy",
         "valueSet": "referrerpolicy"
@@ -1040,6 +1044,12 @@
       {
         "name": "placeholder"
       },
+      {
+        "name": "popovertarget"
+      },
+      {
+        "name": "popovertargetaction"
+      },
       {
         "name": "readonly",
         "valueSet": "v"
@@ -1105,6 +1115,12 @@
       {
         "name": "name"
       },
+      {
+        "name": "popovertarget"
+      },
+      {
+        "name": "popovertargetaction"
+      },
       {
         "name": "type",
         "valueSet": "bt"
@@ -1416,5 +1432,30 @@
     "name": "menu",
     "description": "The menu element represents an unordered list of interactive items.",
     "attributes": []
+  },
+  {
+    "name": "search",
+    "description": "The search element represents the parts of the document or application with form controls or other content related to performing a search or filtering operation.",
+    "attributes": []
+  },
+  {
+    "name": "fencedframe",
+    "description": "The fencedframe element represents a nested browsing context, embedding another HTML page into the current one.",
+    "attributes": [
+      {
+        "name": "allow"
+      },
+      {
+        "name": "height"
+      },
+      {
+        "name": "width"
+      }
+    ]
+  },
+  {
+    "name": "selectedcontent",
+    "description": "The selectedcontent element can be used to display the content of the currently selected option element inside of a closed select element.",
+    "attributes": []
   }
 ]

web-data/html/htmlTags.json

@@ -315,6 +315,14 @@
         "name": "name",
         "description": "The name of the button, which is submitted with the form data."
       },
+      {
+        "name": "popovertarget",
+        "description": "Turns the button into a popover control button; takes the ID of the popover element to control as its value."
+      },
+      {
+        "name": "popovertargetaction",
+        "description": "Specifies the action to be performed on a popover element being controlled by the button."
+      },
       {
         "name": "type",
         "description": "The type of the button. Possible values are:\n\n*   `submit`: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.\n*   `reset`: The button resets all the controls to their initial values.\n*   `button`: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur."
@@ -734,6 +742,10 @@
         "name": "decoding",
         "description": "`sync`\n\nDecode the image synchronously for atomic presentation with other content.\n\n`async`\n\nDecode the image asynchronously to reduce delay in presenting other content.\n\n`auto`\n\nDefault mode, which indicates no preference for the decoding mode. The browser decides what is best for the user."
       },
+      {
+        "name": "fetchpriority",
+        "description": "Provides a hint of the relative priority to use when fetching the image."
+      },
       {
         "name": "height",
         "description": "The intrinsic height of the image in pixels."

web-data/html/mdnTagDescriptions.json

@@ -1268,5 +1268,59 @@
         "name": "unsafe-url"
       }
     ]
+  },
+  {
+    "name": "enterkeyhint",
+    "values": [
+      {
+        "name": "enter"
+      },
+      {
+        "name": "done"
+      },
+      {
+        "name": "go"
+      },
+      {
+        "name": "next"
+      },
+      {
+        "name": "previous"
+      },
+      {
+        "name": "search"
+      },
+      {
+        "name": "send"
+      }
+    ]
+  },
+  {
+    "name": "popover",
+    "values": [
+      {
+        "name": "auto"
+      },
+      {
+        "name": "hint"
+      },
+      {
+        "name": "manual"
+      }
+    ]
+  },
+  {
+    "name": "fetchpriority",
+    "values": [
+      {
+        "name": "high"
+      },
+      {
+        "name": "low"
+      },
+      {
+        "name": "auto"
+      }
+    ]
   }
 ]