@afixt/test-utils 1.1.5 → 1.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@afixt/test-utils",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "Various utilities for accessibility testing",
   "main": "src/index.js",
   "scripts": {

package/src/getAccessibleName.js

@@ -336,6 +336,50 @@ function getAccessibleName(element) {
         // So we don't return false here - let it fall through
     }
 
+    // STEP 11-4: meter element (native or role="meter")
+    // Per Axe aria-meter-name rule, meter elements need accessible name from
+    // aria-labelledby, aria-label (handled above), title, or associated label
+    // Text content inside meter is NOT a valid accessible name (it's fallback content)
+    // STEP 11-4.1: use title attribute
+    // STEP 11-4.2: for native meter, use associated label
+    // STEP 11-4.3: return false (don't use text content)
+    if (element.tagName.toLowerCase() === "meter" || element.getAttribute("role") === "meter") {
+        if (element.hasAttribute("title")) {
+            const titleValue = element.getAttribute("title");
+            if (strlen(titleValue) > 0) {
+                return titleValue;
+            }
+        }
+
+        // For native meter elements, check for associated label
+        if (element.tagName.toLowerCase() === "meter") {
+            // Check for label with for attribute
+            if (element.id) {
+                const label = document.querySelector('label[for="' + element.id + '"]');
+                if (label && strlen(getAccessibleText(label)) > 0) {
+                    return getAccessibleText(label);
+                }
+            }
+
+            // Check for wrapping label
+            const parentLabel = element.closest("label");
+            if (parentLabel) {
+                // Get label text excluding the meter's own content
+                const clone = parentLabel.cloneNode(true);
+                const meterInClone = clone.querySelector("meter");
+                if (meterInClone) {
+                    meterInClone.remove();
+                }
+                if (strlen(clone.textContent) > 0) {
+                    return clone.textContent.trim();
+                }
+            }
+        }
+
+        // Meter text content is not an accessible name, return false
+        return false;
+    }
+
     // STEP 12: table element
     // STEP 12.1: caption element
     // STEP 12.2: use the title attribute

package/test/getAccessibleName.test.js

@@ -322,4 +322,46 @@ describe('getAccessibleName', () => {
     const obj = document.querySelector('object');
     expect(getAccessibleName(obj)).toBe(false);
   });
+
+  it('should handle ARIA meter with aria-label', () => {
+    document.body.innerHTML = `<div role="meter" aria-label="Disk usage" aria-valuenow="75"></div>`;
+    const meter = document.querySelector('[role="meter"]');
+    expect(getAccessibleName(meter)).toBe('Disk usage');
+  });
+
+  it('should handle ARIA meter with title attribute', () => {
+    document.body.innerHTML = `<div role="meter" title="Battery level" aria-valuenow="50"></div>`;
+    const meter = document.querySelector('[role="meter"]');
+    expect(getAccessibleName(meter)).toBe('Battery level');
+  });
+
+  it('should handle native meter with associated label', () => {
+    document.body.innerHTML = `<label for="cpu">CPU usage</label><meter id="cpu" value="0.6">60%</meter>`;
+    const meter = document.querySelector('meter');
+    expect(getAccessibleName(meter)).toBe('CPU usage');
+  });
+
+  it('should handle native meter wrapped in label', () => {
+    document.body.innerHTML = `<label>Memory: <meter value="0.8">80%</meter></label>`;
+    const meter = document.querySelector('meter');
+    expect(getAccessibleName(meter)).toBe('Memory:');
+  });
+
+  it('should return false for meter without accessible name', () => {
+    document.body.innerHTML = `<div role="meter" aria-valuenow="50">50%</div>`;
+    const meter = document.querySelector('[role="meter"]');
+    expect(getAccessibleName(meter)).toBe(false);
+  });
+
+  it('should return false for native meter without label', () => {
+    document.body.innerHTML = `<meter value="0.5">50%</meter>`;
+    const meter = document.querySelector('meter');
+    expect(getAccessibleName(meter)).toBe(false);
+  });
+
+  it('should handle meter with aria-labelledby', () => {
+    document.body.innerHTML = `<span id="signal-label">Signal strength</span><div role="meter" aria-labelledby="signal-label" aria-valuenow="4"></div>`;
+    const meter = document.querySelector('[role="meter"]');
+    expect(getAccessibleName(meter)).toBe('Signal strength');
+  });
 });