1687198 - Inspector doesn't understand "aria-labelled-by"

Status: RESOLVED INVALID

(DevTools :: Accessibility Tools, defect)

Description

[Mike Taylor [:miketaylr]]

Attachment: Screen Shot 2021-01-17 at 2.52.17 PM.png

This came up in https://github.com/webcompat/webcompat.com/pull/3516

For the following pattern:

<div class="circle">
        <div class="number">2</div>
        <div class="icon"></div>
</div>
<div id="step-label-address" class="description">Web address</div>

and

.step.complete .icon {
    content: url(dd8ea4f7ca33ade7ec066633757f1926.svg);
    display: none;
    height: auto;
    width: 8px;
}

I want to mark <div class="icon"></div> as labelled by step-label-address and not get an error in the accessbility inspector.

If I duplicate the description via aria-label, it stops complaining at me. But that seems bad to repeat the same text twice.

Comment 1

[Mike Taylor [:miketaylr]]

Turns out this is invalid, due to a typo. Wee!