fix(core): properly render 'for' attribute for labelable elements (#228)

Author: logaretm

.changeset/tangy-plums-boil.md

@@ -0,0 +1,5 @@
+---
+'@formwerk/core': patch
+---
+
+fix(core): properly render 'for' attribute for labelable elements

packages/core/src/a11y/useLabel.ts

@@ -1,6 +1,6 @@
 import { MaybeRefOrGetter, computed, toValue, shallowRef } from 'vue';
 import { Maybe, AriaLabelProps, AriaLabelableProps } from '../types';
-import { createRefCapture, isInputElement, isLabelElement } from '../utils/common';
+import { createRefCapture, isLabelableElement, isLabelElement, warn } from '../utils/common';
 
 interface LabelProps {
   for: MaybeRefOrGetter<string>;
@@ -13,17 +13,29 @@ export function useLabel(props: LabelProps) {
   const labelRef = shallowRef<HTMLElement>();
   const refCapture = createRefCapture(labelRef);
 
+  const shouldRenderFor = () => isLabelElement(labelRef.value) && isLabelableElement(toValue(props.targetRef));
+
   const labelProps = computed<AriaLabelProps>(() => {
+    const hasFor = shouldRenderFor();
+
+    if (__DEV__) {
+      if (!hasFor && labelRef.value && isLabelElement(labelRef.value)) {
+        warn(
+          'Skipping `for` attribute on <label /> element because it is not associated with a labelable element.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Content_categories#labelable',
+        );
+      }
+    }
+
     return {
       ref: refCapture,
       id: `${toValue(props.for)}-l`,
-      for: isLabelElement(labelRef.value) && isInputElement(toValue(props.targetRef)) ? toValue(props.for) : undefined,
+      for: hasFor ? toValue(props.for) : undefined,
       onClick: props.handleClick || undefined,
     } as AriaLabelProps;
   });
 
   const labelledByProps = computed<AriaLabelableProps>(() => {
-    if (isLabelElement(labelRef.value) && isInputElement(toValue(props.targetRef))) {
+    if (shouldRenderFor()) {
       return {};
     }
 

packages/core/src/utils/common.ts

@@ -304,6 +304,19 @@ export function isInputElement(el: Maybe<HTMLElement>): el is HTMLInputElement {
   return isComponent(el) || ['INPUT', 'TEXTAREA', 'SELECT'].includes(el.tagName);
 }
 
+/**
+ * Checks if an element is labelable.
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Content_categories#labelable
+ */
+export function isLabelableElement(el: Maybe<HTMLElement | ComponentPublicInstance>): boolean {
+  return (
+    isComponent(el) ||
+    isInputElement(el) ||
+    isButtonElement(el) ||
+    ['METER', 'OUTPUT', 'PROGRESS'].includes(el?.tagName ?? '')
+  );
+}
+
 export function isLabelElement(el: Maybe<HTMLElement | ComponentPublicInstance>): el is HTMLLabelElement {
   if (!el) {
     return false;
@@ -320,7 +333,7 @@ export function isComponent(ref: Maybe<HTMLElement | ComponentPublicInstance>):
   return '$' in ref;
 }
 
-export function isButtonElement(el: Maybe<HTMLElement>): el is HTMLButtonElement {
+export function isButtonElement(el: Maybe<HTMLElement | ComponentPublicInstance>): el is HTMLButtonElement {
   return isComponent(el) || el?.tagName === 'BUTTON';
 }