commit 14a5b18a7b1e5a12400cadabfb3fbff074200df5 parent 2bfe32c8f3e18414164c2631e61464ade983fb05 Author: Irene Ni <ini@mozilla.com> Date: Thu, 2 Oct 2025 15:00:46 +0000 Bug 1989982 - Fix New Tab Report dialog header font size and spacing. r=home-newtab-reviewers,desktop-theme-reviewers,hjones,nbarrett Differential Revision: https://phabricator.services.mozilla.com/D265652 Diffstat:
7 files changed, 27 insertions(+), 3 deletions(-)
diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/ReportContent/ReportContent.jsx b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/ReportContent/ReportContent.jsx @@ -186,6 +186,7 @@ export const ReportContent = spocs => { id="report-group" data-l10n-id="newtab-report-ads-why-reporting" className="report-ads-options" + headingLevel="3" > <moz-radio data-l10n-id="newtab-report-ads-reason-not-interested" @@ -209,6 +210,7 @@ export const ReportContent = spocs => { id="report-group" data-l10n-id="newtab-report-content-why-reporting-this" className="report-content-options" + headingLevel="3" > <moz-radio data-l10n-id="newtab-report-content-wrong-category" diff --git a/browser/extensions/newtab/data/content/activity-stream.bundle.js b/browser/extensions/newtab/data/content/activity-stream.bundle.js @@ -6019,7 +6019,8 @@ const ReportContent = spocs => { ref: radioGroupRef, id: "report-group", "data-l10n-id": "newtab-report-ads-why-reporting", - className: "report-ads-options" + className: "report-ads-options", + headingLevel: "3" }, /*#__PURE__*/external_React_default().createElement("moz-radio", { "data-l10n-id": "newtab-report-ads-reason-not-interested", value: "not_interested" @@ -6034,7 +6035,8 @@ const ReportContent = spocs => { ref: radioGroupRef, id: "report-group", "data-l10n-id": "newtab-report-content-why-reporting-this", - className: "report-content-options" + className: "report-content-options", + headingLevel: "3" }, /*#__PURE__*/external_React_default().createElement("moz-radio", { "data-l10n-id": "newtab-report-content-wrong-category", value: "wrong_category" diff --git a/toolkit/content/widgets/lit-select-control.mjs b/toolkit/content/widgets/lit-select-control.mjs @@ -52,6 +52,7 @@ export class SelectControlBaseElement extends MozLitElement { label: { type: String, fluent: true }, name: { type: String }, value: { type: String }, + headingLevel: { type: Number }, }; static queries = { @@ -293,6 +294,7 @@ export class SelectControlBaseElement extends MozLitElement { role=${this.type == "radio" ? "radiogroup" : "listbox"} ?disabled=${this.disabled} label=${this.label} + headinglevel=${this.headingLevel} exportparts="inputs, support-link" aria-orientation=${ifDefined(this.constructor.orientation)} > diff --git a/toolkit/content/widgets/moz-fieldset/moz-fieldset.css b/toolkit/content/widgets/moz-fieldset/moz-fieldset.css @@ -72,6 +72,10 @@ h6 { :is(legend, #description) ~ & { margin-top: var(--space-small); } + + :host([headinglevel]) :is(legend, #description) ~ & { + margin-top: var(--space-large); + } } a[is="moz-support-link"], diff --git a/toolkit/content/widgets/moz-fieldset/moz-fieldset.mjs b/toolkit/content/widgets/moz-fieldset/moz-fieldset.mjs @@ -33,7 +33,7 @@ export default class MozFieldset extends MozLitElement { supportPage: { type: String, attribute: "support-page" }, ariaLabel: { type: String, fluent: true, mapped: true }, ariaOrientation: { type: String, mapped: true }, - headingLevel: { type: Number }, + headingLevel: { type: Number, reflect: true }, disabled: { type: Boolean, reflect: true }, iconSrc: { type: String }, }; diff --git a/toolkit/content/widgets/moz-radio-group/moz-radio-group.mjs b/toolkit/content/widgets/moz-radio-group/moz-radio-group.mjs @@ -18,6 +18,7 @@ import { MozBaseInputElement } from "../lit-utils.mjs"; * @property {string} label - Label for the group of moz-radio elements. * @property {string} description - Description for the group of moz-radio elements. * @property {string} supportPage - Support page for the group of moz-radio elements. + * @property {number} headingLevel - Render the label in a heading of this level. * @property {string} name * Input name of the radio group. Propagates to moz-radio children. * @property {string} value diff --git a/toolkit/content/widgets/moz-radio-group/moz-radio-group.stories.mjs b/toolkit/content/widgets/moz-radio-group/moz-radio-group.stories.mjs @@ -39,6 +39,10 @@ export default { accesskeys: { if: { arg: "showAccesskeys", truthy: true }, }, + headingLevel: { + options: ["", "1", "2", "3", "4", "5", "6"], + control: { type: "select" }, + }, }, parameters: { actions: { @@ -102,6 +106,7 @@ const Template = ({ groupSlottedSupportLink, nestedFields, ellipsized, + headingLevel, }) => html` <moz-radio-group name=${groupName} @@ -109,6 +114,7 @@ const Template = ({ support-page=${ifDefined(groupSupportPage)} ?disabled=${disabled} value=${value} + .headingLevel=${headingLevel} > ${groupSlottedSupportLink ? html`<a href="/" slot="support-link">Slotted support link</a>` @@ -160,6 +166,7 @@ Default.args = { groupSupportPage: "", hasSlottedSupportLinks: false, groupSlottedSupportLink: false, + headingLevel: "", }; export const AllUnchecked = Template.bind({}); @@ -242,3 +249,9 @@ WithEllipsizedLabel.args = { ellipsized: true, l10nId: "moz-checkbox-long-label", }; + +export const WithHeadingLabel = Template.bind({}); +WithHeadingLabel.args = { + ...WithRadioGroupDescription.args, + headingLevel: "2", +};