Add support for ARIA attributes (props) (#37)

* Add `aria-attributes` dependency

* Inline ARIA props and document why

* Generate ARIA props

For now, they are all given the `String` type. After spot checking a few
on MDN, that is mostly accurate, even for seemingly numeric values such
`aria-valuemin`:
https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaValueMin#value

NOTE: Despite React using `camelCase` for most props, ARIA props are
indeed `kebab-case`:
- https://react.dev/learn/writing-markup-with-jsx#3-camelcase-salls-most-of-the-things:~:text=the%20browser%20console.-,Pitfall,-For%20historical%20reasons
- https://legacy.reactjs.org/docs/accessibility.html#wai-aria

This could be improved with the following type definitions, but we’ll
leave this to the implementing developer now to check support in the
browser:
https://use-form.netlify.app/interfaces/_node_modules__types_react_index_d_.react.ariaattributes

* Quote `aria-*` props

Co-authored-by: Fyodor Soikin <[email protected]>

* Add line to changelog

---------

Co-authored-by: Fyodor Soikin <[email protected]>
Co-authored-by: Shannon Broekhoven <[email protected]>

CHANGELOG.md

@@ -1,5 +1,11 @@
 # purescript-elmish-html
 
+## 0.8.3
+
+### Added
+
+- Support for ARIA attributes
+
 ## 0.8.2
 
 ### Changed

codegen/aria-attributes.json

@@ -0,0 +1,51 @@
+[
+  "aria-activedescendant",
+  "aria-atomic",
+  "aria-autocomplete",
+  "aria-busy",
+  "aria-checked",
+  "aria-colcount",
+  "aria-colindex",
+  "aria-colspan",
+  "aria-controls",
+  "aria-current",
+  "aria-describedby",
+  "aria-details",
+  "aria-disabled",
+  "aria-dropeffect",
+  "aria-errormessage",
+  "aria-expanded",
+  "aria-flowto",
+  "aria-grabbed",
+  "aria-haspopup",
+  "aria-hidden",
+  "aria-invalid",
+  "aria-keyshortcuts",
+  "aria-label",
+  "aria-labelledby",
+  "aria-level",
+  "aria-live",
+  "aria-modal",
+  "aria-multiline",
+  "aria-multiselectable",
+  "aria-orientation",
+  "aria-owns",
+  "aria-placeholder",
+  "aria-posinset",
+  "aria-pressed",
+  "aria-readonly",
+  "aria-relevant",
+  "aria-required",
+  "aria-roledescription",
+  "aria-rowcount",
+  "aria-rowindex",
+  "aria-rowspan",
+  "aria-selected",
+  "aria-setsize",
+  "aria-sort",
+  "aria-valuemax",
+  "aria-valuemin",
+  "aria-valuenow",
+  "aria-valuetext",
+  "role"
+]

codegen/consts.js

@@ -36,11 +36,17 @@
 //  See the License for the specific language governing permissions and
 //  limitations under the License.
 
-// For now, we are using a local copy of react-html-attributes.
+// For now, we are using a local copy of 'react-html-attributes'.
 // Eventually, the relative path here should be removed, and
 // the version number of react-html-attributes should be bumped.
 module.exports.props = require("./react-html-attributes")
 
+// For now, we are using a local copy of 'aria-attributes' to avoid dealing
+// with ESM vs CommonJS incompatibility.
+// Eventually, the relative path here should be removed and the actual
+// package should be used.
+module.exports.ariaProps = require("./aria-attributes")
+
 module.exports.voids = [
   "area",
   "base",

codegen/html.js

@@ -1,4 +1,4 @@
-const { props, voids, types, typesByElement, reserved } = require("./consts")
+const { ariaProps, props, voids, types, typesByElement, reserved } = require("./consts")
 
 module.exports = () => ({
   path: "Elmish/HTML/Generated.purs",
@@ -36,6 +36,9 @@ const printRow = (e, elProps) =>
   elProps.length > 0
     ? `
   ( _data :: Object String
+  -- ARIA
+  , ${ariaProps.map(p => `"${p}" :: String`).join("\n  , ")}
+  -- Props
   , ${elProps.map(p => `${p} :: ${propType(e, p)}`).join("\n  , ")}
   )`
     : "()"

codegen/package.json

@@ -7,6 +7,7 @@
     "codegen": "node index.js"
   },
   "dependencies": {
+    "aria-attributes": "^2.0.1",
     "react-html-attributes": "^1.4.6"
   }
 }