<!DOCTYPE HTML>
<html>
<head>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<input id="filetype1" type="file">
<label>label<input id="filetype2" type="file"></label>
<input id="filetype3" aria-label="aria label" type="file">
<script type="module">
import '/resources/mock-file-chooser.js';
async_test((t) => {
testRunner.waitUntilDone();
// Initially the name is just the button title.
var fileChooser = document.getElementById("filetype1");
let axFileChooser = accessibilityController.accessibleElementById("filetype1");
assert_equals(axFileChooser.name, "Choose File: No file chosen");
assert_equals(axFileChooser.stringValue, "AXValue: No file chosen");
// After a file is selected, the value should be the file chosen,
// and the name should concatenate both - because ATs think of this as a single
// control and they're only going to read the name.
axFileChooser.addNotificationListener((e) => {
assert_equals(axFileChooser.name, "Choose File: cake.png");
assert_equals(axFileChooser.stringValue, "AXValue: cake.png");
t.done();
});
// Simulate dragging a file to the file control.
eventSender.beginDragWithFiles(['resources/cake.png']);
var centerX = fileChooser.offsetLeft + fileChooser.offsetWidth / 2;
var centerY = fileChooser.offsetTop + fileChooser.offsetHeight / 2;
eventSender.mouseMoveTo(centerX, centerY);
eventSender.mouseUp();
}, "Test that the accessible name of an unlabelled file control changes when you choose a file.");
async_test((t) => {
testRunner.waitUntilDone();
// Initially the name is just the button title.
var fileChooser = document.getElementById("filetype2");
let axFileChooser = accessibilityController.accessibleElementById("filetype2");
assert_equals(axFileChooser.name, "label: No file chosen");
assert_equals(axFileChooser.stringValue, "AXValue: No file chosen");
// After a file is selected, the value should be the file chosen,
// and the name should concatenate both - because ATs think of this as a single
// control and they're only going to read the name.
axFileChooser.addNotificationListener((e) => {
assert_equals(axFileChooser.name, "label: cake.png");
assert_equals(axFileChooser.stringValue, "AXValue: cake.png");
t.done();
});
// Simulate dragging a file to the file control.
eventSender.beginDragWithFiles(['resources/cake.png']);
var centerX = fileChooser.offsetLeft + fileChooser.offsetWidth / 2;
var centerY = fileChooser.offsetTop + fileChooser.offsetHeight / 2;
eventSender.mouseMoveTo(centerX, centerY);
eventSender.mouseUp();
}, "Test that the accessible name of a file control with a label changes when you choose a file.");
async_test((t) => {
testRunner.waitUntilDone();
// Initially the name is just the button title.
var fileChooser = document.getElementById("filetype3");
let axFileChooser = accessibilityController.accessibleElementById("filetype3");
assert_equals(axFileChooser.name, "aria label: No file chosen");
assert_equals(axFileChooser.stringValue, "AXValue: No file chosen");
// After a file is selected, the value should be the file chosen,
// and the name should concatenate both - because ATs think of this as a single
// control and they're only going to read the name.
axFileChooser.addNotificationListener((e) => {
assert_equals(axFileChooser.name, "aria label: cake.png");
assert_equals(axFileChooser.stringValue, "AXValue: cake.png");
t.done();
});
// Simulate dragging a file to the file control.
eventSender.beginDragWithFiles(['resources/cake.png']);
var centerX = fileChooser.offsetLeft + fileChooser.offsetWidth / 2;
var centerY = fileChooser.offsetTop + fileChooser.offsetHeight / 2;
eventSender.mouseMoveTo(centerX, centerY);
eventSender.mouseUp();
}, "Test that the accessible name of a file control with aria-label changes when you choose a file.");
</script>
</body>
</html>