Closed
Description
HTML anatomy of a layer item
<fieldset aria-grabbed="false">
<details class="mapml-control-layers">
<summary>
<label>
<input checked="" type="checkbox" class="leaflet-control-layers-selector" />
<span style="font-style: normal;"> Canada Base Map - Transportation (CBMT)</span>
</label>
</summary>
<details class="mapml-control-layers">
<summary>
<label for="o82">Opacity</label>
</summary>
<input id="o82" type="range" min="0" max="1.0" value="1.0" step="0.1" />
</details>
</details>
</fieldset>
Nesting interactive elements inside <summary>
is problematic:
IIRC this was "fixed" due to Set<summary>
is not keyboard operable if it has descendant<label>
/<input>
when using a screen reader. This is a critical issue. I filed NVDA bug: <summary> not activatable if it has descendant <input> nvaccess/nvda#12008.role="application"
#467.- Nesting interactive elements is generally not recommended.
- Interactive content in
<summary>
specifically may be disallowed in the future: Disallow interactive content in <summary> whatwg/html#2272. <summary>
isn't clickable using a mouse pointer due to nested<label>
, this required settingpointer-events: none
on<label>
.
Refactoring the layer items is not a small task. First we need to decide on a new layout that does not entail nesting interactive elements in <summary>
, sigh.