@afixt/test-utils 1.1.4 → 1.1.6

package/package.json

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

package/src/getAccessibleName.js

@@ -319,6 +319,67 @@ function getAccessibleName(element) {
         }
     }
 
+    // STEP 11-3: object element
+    // Per ACT Rule 8fc3b6, object elements rendering non-text content
+    // can receive accessible name from aria-labelledby, aria-label (handled above),
+    // title attribute, or fallback content (handled at end via getAccessibleText)
+    // STEP 11-3.1: use title attribute
+    // STEP 11-3.2: fallback content is handled at the end via getAccessibleText
+    if (element.tagName.toLowerCase() === "object") {
+        if (element.hasAttribute("title")) {
+            const titleValue = element.getAttribute("title");
+            if (strlen(titleValue) > 0) {
+                return titleValue;
+            }
+        }
+        // Fallback content will be handled by getAccessibleText at the end
+        // 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

@@ -292,4 +292,76 @@ describe('getAccessibleName', () => {
     const select = document.querySelector('select');
     expect(getAccessibleName(select)).toBe(false);
   });
+
+  it('should handle object element with title attribute', () => {
+    document.body.innerHTML = `<object data="chart.pdf" type="application/pdf" title="Q4 Sales Report"></object>`;
+    const obj = document.querySelector('object');
+    expect(getAccessibleName(obj)).toBe('Q4 Sales Report');
+  });
+
+  it('should handle object element with fallback content', () => {
+    document.body.innerHTML = `<object data="diagram.svg" type="image/svg+xml"><p>Network architecture diagram</p></object>`;
+    const obj = document.querySelector('object');
+    expect(getAccessibleName(obj)).toBe('Network architecture diagram');
+  });
+
+  it('should handle object element with aria-label', () => {
+    document.body.innerHTML = `<object data="chart.pdf" aria-label="Annual Revenue Chart"></object>`;
+    const obj = document.querySelector('object');
+    expect(getAccessibleName(obj)).toBe('Annual Revenue Chart');
+  });
+
+  it('should return false for object element without accessible name', () => {
+    document.body.innerHTML = `<object data="chart.pdf" type="application/pdf"></object>`;
+    const obj = document.querySelector('object');
+    expect(getAccessibleName(obj)).toBe(false);
+  });
+
+  it('should handle object element with empty title', () => {
+    document.body.innerHTML = `<object data="chart.pdf" title=""></object>`;
+    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');
+  });
 });