смежных одноуровневых селекторы не работает в Mozilla Firefox 39.0.3

Question

У меня есть этот код: HTML:

<label> 
    <input class="checkable" type="checkbox" value="6" name="Peak"> 
    <button class="button">1</button> 
</label> 
<label> 
    <input class="checkable" type="checkbox" value="12" name="Peak"> 
    <button class="button">2</button> 
</label> 

CSS:

label > .checkable{ 
    display:none; 
} 
label > .checkable + button{ 
    cursor:pointer; 
    margin:1px; 
    border-radius: 16px; 
    border:transparent; 
    width:32px; 
    height:32px;background: rgba(0,0,0,0); 

} 
label > .checkable:checked + button{ 
    background-color:#690b0c; 
    color:white; 
    border-radius: 16px; 
} 

Я комбинируя флажок с элементом. Когда вы нажимаете на одну из этих кнопок, они должны получить красный круглый фон. Это работает, как ожидалось, в IE 11, но в новейшей версии Firefox, похоже, есть некоторые проблемы. Есть ли у кого-нибудь обходные пути?

Fiddle: https://jsfiddle.net/jjqg5apa/

Answer 1

Вот ответ от Тоору Фуджисава:

---

Это не будет проблемой спецификации и не ошибка Firefox, в.

Я считаю, что поведение Firefox 38 + соответствует тому, что говорит спецификация.

https://html.spec.whatwg.org/multipage/forms.html#the-label-element:the-label-element-10

Поведение активации элемента этикетки для событий, направленных на интерактивного контента потомков элемента этикетки, а также любые потомки эти интерактивные содержания потомки, должны быть не сделать ничего.

https://html.spec.whatwg.org/multipage/dom.html#interactive-content-2

Интерактивный контент является контент, который специально предназначен для взаимодействия с пользователем. а, аудио (если атрибут управления присутствует), кнопка, ...

При нажатии на кнопку внутри этикетки, поведение активации лейбла должно быть «ничего не делать», потому что кнопка является интерактивным Это означает, что мы должны думать, что пользователь хочет активировать кнопку, вместо ярлыка, чтобы она не меняла статус флажка, нажав кнопку.

Я думаю, вы могли бы использовать неинтерактивный контент вместо кнопки (не уверен, что это хорошо для a11y tho) или просто установите флажок и используйте его вместо кнопки.

---

см полный отчет об ошибке: bugzilla.mozilla.org/show_bug.cgi?id=1197770