Add ARIA props

Author: fhammerschmidt

examples/src/examples/ExampleSlider.bs.js

@@ -52,16 +52,6 @@ type props = {
     */
   @as("open")
   open_: bool,
-  /**
-    * The id(s) of the element(s) that describe the dialog.
-    */
-  @as("aria-describedby")
-  ariaDescribedby?: string,
-  /**
-    * The id(s) of the element(s) that label the dialog.
-    */
-  @as("aria-labelledby")
-  ariaLabelledby?: string,
   /**
     * Dialog children, usually the included sub-components.
     */

packages/rescript-mui-material/src/components/Dialog.res

@@ -58,7 +58,6 @@ type inputBaseComponentProps = {
   min?: int,
   max?: int,
   @as("type") type_?: string,
-  @as("aria-labelledby") ariaLabelledby?: string,
   @as("disableunderline") disableUnderline?: string,
   maxLength?: int,
 } // FIXME: there is more
@@ -98,7 +97,6 @@ type slots = {
 
 type publicProps<'value> = {
   ...CommonProps.t_NoId,
-  @as("aria-describedby") ariaDescribedby?: string,
   /**
     * This prop helps users to fill forms faster, especially on mobile devices.
     * The name can be confusing, as it's more like an autofill.

packages/rescript-mui-material/src/components/InputBase.res

@@ -125,21 +125,6 @@ type valueLabelFormat<'value> =
 
 type sliderProps<'value> = {
   ...CommonProps.t,
-  /**
-    * The label of the slider.
-    */
-  @as("aria-label")
-  ariaLabel?: string,
-  /**
-    * The id of the element containing a label for the slider.
-    */
-  @as("aria-labelledby")
-  ariaLabelledby?: string,
-  /**
-    * A string value that provides a user-friendly name for the current value of the slider.
-    */
-  @as("aria-valuetext")
-  ariaValuetext?: string,
   /**
     * Override or extend the styles applied to the component.
     */

packages/rescript-mui-material/src/components/Slider.res

@@ -36,11 +36,6 @@ type openReason =
 
 type props = {
   ...CommonProps.t,
-  /**
-    * The aria-label of the button element.
-    * Also used to provide the `id` for the `SpeedDial` element and its children.
-    */
-  ariaLabel: string,
   /**
     * SpeedDialActions to display when the SpeedDial is `open`.
     */

packages/rescript-mui-material/src/components/SpeedDial.res

@@ -89,16 +89,6 @@ type publicProps = {
     * @default false
     */
   allowScrollButtonsMobile?: bool,
-  /**
-    * The label for the Tabs as a string.
-    */
-  @as("aria-label")
-  ariaLabel?: string,
-  /**
-    * An id or list of ids separated by a space that label the Tabs.
-    */
-  @as("aria-labelledby")
-  ariaLabelledby?: string,
   /**
     * If `true`, the tabs are centered.
     * This prop is intended for large views.

packages/rescript-mui-material/src/components/Tabs.res

@@ -1,4 +1,108 @@
+type ariaProps = {
+  /* accessibility */
+  /* https://www.w3.org/TR/wai-aria-1.1/ */
+  /* https://accessibilityresources.org/<aria-tag> is a great resource for these */
+  @as("aria-current")
+  ariaCurrent?: [#page | #step | #location | #date | #time | #"true" | #"false"],
+  @as("aria-details")
+  ariaDetails?: string,
+  @as("aria-disabled")
+  ariaDisabled?: bool,
+  @as("aria-hidden")
+  ariaHidden?: bool,
+  @as("aria-invalid") ariaInvalid?: [#grammar | #"false" | #spelling | #"true"],
+  @as("aria-keyshortcuts")
+  ariaKeyshortcuts?: string,
+  @as("aria-label")
+  ariaLabel?: string,
+  @as("aria-roledescription")
+  ariaRoledescription?: string,
+  /* Widget Attributes */
+  @as("aria-autocomplete") ariaAutocomplete?: [#inline | #list | #both | #none],
+  /* https://www.w3.org/TR/wai-aria-1.1/#valuetype_tristate */
+  @as("aria-checked")
+  ariaChecked?: [#"true" | #"false" | #mixed],
+  @as("aria-expanded")
+  ariaExpanded?: bool,
+  @as("aria-haspopup")
+  ariaHaspopup?: [#menu | #listbox | #tree | #grid | #dialog | #"true" | #"false"],
+  @as("aria-level")
+  ariaLevel?: int,
+  @as("aria-modal")
+  ariaModal?: bool,
+  @as("aria-multiline")
+  ariaMultiline?: bool,
+  @as("aria-multiselectable")
+  ariaMultiselectable?: bool,
+  @as("aria-orientation") ariaOrientation?: [#horizontal | #vertical | #undefined],
+  @as("aria-placeholder")
+  ariaPlaceholder?: string,
+  /* https://www.w3.org/TR/wai-aria-1.1/#valuetype_tristate */
+  @as("aria-pressed") ariaPressed?: [#"true" | #"false" | #mixed],
+  @as("aria-readonly")
+  ariaReadonly?: bool,
+  @as("aria-required")
+  ariaRequired?: bool,
+  @as("aria-selected")
+  ariaSelected?: bool,
+  @as("aria-sort")
+  ariaSort?: string,
+  @as("aria-valuemax")
+  ariaValuemax?: float,
+  @as("aria-valuemin")
+  ariaValuemin?: float,
+  @as("aria-valuenow")
+  ariaValuenow?: float,
+  @as("aria-valuetext")
+  ariaValuetext?: string,
+  /* Live Region Attributes */
+  @as("aria-atomic")
+  ariaAtomic?: bool,
+  @as("aria-busy")
+  ariaBusy?: bool,
+  @as("aria-live") ariaLive?: [#off | #polite | #assertive | #rude],
+  @as("aria-relevant")
+  ariaRelevant?: string,
+  /* Drag-and-Drop Attributes */
+  @as("aria-dropeffect") ariaDropeffect?: [#copy | #move | #link | #execute | #popup | #none],
+  @as("aria-grabbed")
+  ariaGrabbed?: bool,
+  /* Relationship Attributes */
+  @as("aria-activedescendant")
+  ariaActivedescendant?: string,
+  @as("aria-colcount")
+  ariaColcount?: int,
+  @as("aria-colindex")
+  ariaColindex?: int,
+  @as("aria-colspan")
+  ariaColspan?: int,
+  @as("aria-controls")
+  ariaControls?: string,
+  @as("aria-describedby")
+  ariaDescribedby?: string,
+  @as("aria-errormessage")
+  ariaErrormessage?: string,
+  @as("aria-flowto")
+  ariaFlowto?: string,
+  @as("aria-labelledby")
+  ariaLabelledby?: string,
+  @as("aria-owns")
+  ariaOwns?: string,
+  @as("aria-posinset")
+  ariaPosinset?: int,
+  @as("aria-rowcount")
+  ariaRowcount?: int,
+  @as("aria-rowindex")
+  ariaRowindex?: int,
+  @as("aria-rowspan")
+  ariaRowspan?: int,
+  @as("aria-setsize")
+  ariaSetsize?: int,
+}
+
 type t_NoId = {
+  // Cannot spread whole dom props since overwriting is not possible.
+  ...ariaProps,
   className?: string,
   style?: ReactDOM.Style.t,
   ref?: ReactDOM.domRef,