99606ce3ee
The motivation for this change is to improve the screen reader user experience when navigating through moz-checkbox and moz-radio elements. When a screen reader encounters and focuses a moz-checkbox or moz-radio element, only the label is announced. Previously the label and the support-link element would be announced which is confusing since it is not clear what will happen when activating one of these moz elements. Additionally, we remove the display flex and width rules from sidebar-customize.css to prevent sidebar test breakage and create a larger click surface for moz-radio and moz-checkbox when used in the sidebar. The moz-input-common.css change makes moz-label behave more like XUL labels where the click area for the label and control span the entire width unless there is a support link in the moz-label. In this case, clicking on the other side of the support link will not activate the respective control. We needed to add "label: 'A label'" to the verifySupportPage function otherwise debug assertions would be thrown and cause test_moz_radio.html to fail. I'm still not entirely sure why there are debug assertions failing here, someone with a greater depth of knowledge around layout reflows would need to investigate. Differential Revision: https://phabricator.services.mozilla.com/D226181
97 lines
2.0 KiB
CSS
97 lines
2.0 KiB
CSS
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
|
|
|
|
.sidebar-panel {
|
|
font: menu;
|
|
|
|
> * + * {
|
|
margin-top: var(--space-xlarge);
|
|
}
|
|
|
|
> sidebar-panel-header + * {
|
|
margin-top: var(--space-medium);
|
|
}
|
|
}
|
|
|
|
.customize-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
color: currentColor;
|
|
|
|
.customize-close-button::part(button) {
|
|
background-image: url("chrome://global/skin/icons/close-12.svg");
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
width: var(--icon-size-default);
|
|
height: var(--icon-size-default);
|
|
}
|
|
|
|
.extensions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: var(--space-small);
|
|
padding-inline: var(--space-medium);
|
|
background-color: var(--sidebar-box-background);
|
|
color: var(--sidebar-box-color);
|
|
border: var(--sidebar-box-border);
|
|
border-radius: var(--border-radius-medium);
|
|
}
|
|
|
|
.extension-item {
|
|
display: flex;
|
|
gap: var(--space-small);
|
|
padding-block: var(--space-medium);
|
|
box-sizing: border-box;
|
|
|
|
&:not(:last-of-type){
|
|
border-bottom: 0.5px solid var(--panel-separator-color);
|
|
}
|
|
}
|
|
|
|
.customize-extensions-heading {
|
|
margin: 0;
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
moz-radio-group,
|
|
moz-fieldset {
|
|
display: block;
|
|
|
|
&::part(inputs) {
|
|
background-color: var(--sidebar-box-background);
|
|
color: var(--sidebar-box-color);
|
|
border: var(--sidebar-box-border);
|
|
border-radius: var(--border-radius-medium);
|
|
gap: 0;
|
|
padding-inline: var(--space-medium);
|
|
}
|
|
}
|
|
|
|
moz-radio,
|
|
moz-checkbox {
|
|
padding-block: var(--space-medium);
|
|
|
|
&:not(:last-of-type) {
|
|
border-bottom: 0.5px solid var(--panel-separator-color);
|
|
}
|
|
|
|
}
|
|
|
|
#manage-settings {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-large);
|
|
}
|
|
|
|
.customize-group {
|
|
margin-block-end: var(--space-xlarge);
|
|
}
|