named-section-or-region.html | Explore in Territory

<!DOCTYPE HTML>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>

<!-- Unnamed -> named -->
<section id="section1">x</section>
<div id="region1" role="region">x</div>

<!-- Named -> unnamed -->
<section id="section2" aria-label="some label">x</section>
<div id="region2" role="region" aria-label="some label">x</div>

<script>
let section1 = document.getElementById('section1');
let region1 = document.getElementById('region1');
let section2 = document.getElementById('section2');
let region2 = document.getElementById('region2');

test(function(t) {
    assert_not_equals(section1.computedRole, 'region');
    assert_not_equals(region1.computedRole, 'region');
}, "An unnamed section/region does not have a role of region");

test(function(t) {
    assert_equals(section2.computedRole, 'region');
    assert_equals(region2.computedRole, 'region');
}, "A named section/region has a role of region");

async_test((t) => {
    section1.ariaLabel = 'Some label';
    region1.ariaLabel = 'Some label';
    requestAnimationFrame(() => {
        t.step(() => { assert_equals(section1.computedRole, 'region'); });
        t.step(() => { assert_equals(region1.computedRole, 'region'); });
        t.done();
    });
}, "A section/region with a name added must now have a role of region");

async_test((t) => {
    section2.ariaLabel = '';
    region2.ariaLabel = '';
    requestAnimationFrame(() => {
        t.step(() => { assert_not_equals(section2.computedRole, 'region'); });
        t.step(() => { assert_not_equals(region2.computedRole, 'region'); });
        t.done();
    });
}, "A section/region with a name removed must not have a role of region");

</script>
chromium/third_party/blink/web_tests/accessibility/named-section-or-region.html
