This is an automated email from the git hooks/post-receive script.
pierov pushed a commit to branch geckoview-99.0.1-11.0-1 in repository tor-browser.
commit 9e842ec685a501ffe630d90acfccfd33662db7a9 Author: Drew Willcoxon adw@mozilla.com AuthorDate: Thu Jan 13 00:53:32 2022 +0000
Bug 1749742 - Fix some a11y problems in the new Firefox Suggest opt-in modal. r=daisuke, a=RyanVM,dsmith
There are a couple of problems:
(1) When a radio button has the keyboard focus, the corresponding title and description are not read. This seems to be because the `<label>` doesn't have any content to read. The actual content is in a different div.
I fixed this by moving the title and description inside the `<label>`.
(2) The options' titles and descriptions are not read on hover/mouseover. This seems to be related to how the `<label>` has an absolute position and is layed out on top of or underneath the titles and descriptions. It interferes with the screenreader.
I fixed that by removing the absolute position. With that change combined with the fix mentioned above, you can still click the title and description text to select the radio button, but it breaks the ability to click outside the text to select the button, for example clicking directly underneath the radio button. To fix that, I gave the `<label>` a positive padding and negative margin so that its padding extends to the border of the option.
* * *
I tested this on all three platforms and with the NVDA screenreader on Windows.
This revision makes one other change that isn't strictly necessary: Instead of setting the width of the options to 100% - some margin, we can set `align-items: stretch` on the section, which I think is a little nicer. We also don't have to specify the widths of the images that way, only the heights. However, it also makes the the buttons and not-now link take up the entire width of the section, but we can fix that by putting them inside a div, which I called `.buttonBox`.
Differential Revision: https://phabricator.services.mozilla.com/D135753 --- .../urlbar/content/quicksuggestOnboarding.css | 61 +++++++--------------- .../urlbar/content/quicksuggestOnboarding.html | 52 +++++++++--------- 2 files changed, 46 insertions(+), 67 deletions(-)
diff --git a/browser/components/urlbar/content/quicksuggestOnboarding.css b/browser/components/urlbar/content/quicksuggestOnboarding.css index 0fbd0963b53f2..63d4fc755e408 100644 --- a/browser/components/urlbar/content/quicksuggestOnboarding.css +++ b/browser/components/urlbar/content/quicksuggestOnboarding.css @@ -8,13 +8,9 @@ */
:root { - --introduction-magglass-logo-width: 176px; --introduction-magglass-logo-height: 128px; - --introduction-firefox-logo-width: 72px; --introduction-firefox-logo-height: 72px; - --main-magglass-logo-width: 88px; --main-magglass-logo-height: 64px; - --main-firefox-logo-width: 50px; --main-firefox-logo-height: 50px; --x-large-margin: 40px; --large-margin: 24px; @@ -27,9 +23,7 @@ }
body.compact { - --main-magglass-logo-width: 66px; --main-magglass-logo-height: 48px; - --main-firefox-logo-width: 32px; --main-firefox-logo-height: 32px; --x-large-margin: 20px; --large-margin: 12px; @@ -48,7 +42,7 @@ section {
section { display: flex; - align-items: center; + align-items: stretch; justify-content: center; flex-direction: column; text-align: center; @@ -101,14 +95,12 @@ a {
#introduction-section .logo { background-image: url("quicksuggestOnboarding_magglass.svg"); - width: var(--introduction-magglass-logo-width); height: var(--introduction-magglass-logo-height); margin-block-end: var(--large-margin); }
#introduction-section .logo.firefox { background-image: url("chrome://branding/content/about-logo.svg"); - width: var(--introduction-firefox-logo-width); height: var(--introduction-firefox-logo-height); }
@@ -138,24 +130,18 @@ a { fill: currentColor; }
-#main-section { - display: flex; -} - #main-section:not(.active) { display: none; }
#main-section .logo { background-image: url("quicksuggestOnboarding_magglass.svg"); - width: var(--main-magglass-logo-width); height: var(--main-magglass-logo-height); margin-block-end: var(--large-margin); }
#main-section .logo.firefox { background-image: url("chrome://branding/content/about-logo.svg"); - width: var(--main-firefox-logo-width); height: var(--main-firefox-logo-height); }
@@ -165,8 +151,8 @@ a {
#main-section .description-section { /* The effective visual margin between the description and first option should - be --large-margin-const. Each child in the description has a bottom margin - of --small-margin, so subtract it from --large-margin-const. */ + be --large-margin-const. Each child in the description has a bottom margin + of --small-margin, so subtract it from --large-margin-const. */ margin-block: 0 calc(var(--large-margin-const) - var(--small-margin)); }
@@ -197,10 +183,7 @@ a { radio button and text are too close to the left and right edges of the option's border otherwise. */ padding: var(--small-margin) var(--small-margin-const); - width: 100% - calc(2 * var(--section-horizontal-padding)); - box-sizing: border-box; flex-direction: row; - position: relative; }
#main-section .option.selected { @@ -216,12 +199,14 @@ a { }
#main-section .option > label { - /* Make whole option area selectable for the radio button. */ - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; + /* Make the whole option area selectable for the radio button. 22px is the + width of the radio button and its inline margin. */ + padding-block: var(--small-margin); + padding-inline-start: calc(22px + var(--small-margin-const)); + padding-inline-end: var(--small-margin-const); + margin-block: calc(-1 * var(--small-margin)); + margin-inline-start: calc(-1 * (22px + var(--small-margin-const))); + margin-inline-end: calc(-1 * var(--small-margin-const)); }
body:not(.compact) #main-section .option > input { @@ -229,30 +214,22 @@ body:not(.compact) #main-section .option > input { margin-block-start: 0.25em; }
-#main-section .option > div { - /* Make this area be front than label to make the link included clickable. - And, make this area not recieve pointer-events so that this area as well - will be selectable area for the radio. */ - z-index: 1; - pointer-events: none; -} - -#main-section .option > div a { - /* Make a clickable explicitly since the parent element might not receive the - event. */ - pointer-events: auto; -} - -#main-section .option > div > .option-label { +#main-section .option-label { font-size: 1.1em; font-weight: 600; margin-block-end: 2px; }
-#main-section .option > div > .option-description { +#main-section .option-description { font-size: 1em; }
+.buttonBox { + display: flex; + flex-direction: column; + align-items: center; +} + button { margin-block-end: var(--large-margin); } diff --git a/browser/components/urlbar/content/quicksuggestOnboarding.html b/browser/components/urlbar/content/quicksuggestOnboarding.html index 5e30e2891fe08..f179674131941 100644 --- a/browser/components/urlbar/content/quicksuggestOnboarding.html +++ b/browser/components/urlbar/content/quicksuggestOnboarding.html @@ -31,14 +31,16 @@ class="title" aria-live="polite" data-l10n-id="firefox-suggest-onboarding-introduction-title-1"></h1> - <button id="onboardingNext" - class="primary" - tabindex="1" - data-l10n-id="firefox-suggest-onboarding-introduction-next-button-1"> - </button> - <div class="pager"> - <span class="current"></span> - <span></span> + <div class="buttonBox"> + <button id="onboardingNext" + class="primary" + tabindex="1" + data-l10n-id="firefox-suggest-onboarding-introduction-next-button-1"> + </button> + <div class="pager"> + <span class="current"></span> + <span></span> + </div> </div> </section> <section id="main-section"> @@ -57,12 +59,11 @@ data-l10n-id="firefox-suggest-onboarding-main-privacy-first"></h2> </div> <div class="option accept"> - <label for="onboardingAccept"></label> <input id="onboardingAccept" type="radio" tabindex="3" name="search-experience"></input> - <div> + <label for="onboardingAccept"> <div class="option-label" data-l10n-id="firefox-suggest-onboarding-main-accept-option-label"> <a id="onboardingLearnMore" @@ -73,15 +74,14 @@ class="option-description" data-l10n-id="firefox-suggest-onboarding-main-accept-option-description-1"> </div> - </div> + </label> </div> <div class="option reject"> - <label for="onboardingReject"></label> <input id="onboardingReject" type="radio" tabindex="5" name="search-experience"></input> - <div> + <label for="onboardingReject"> <div class="option-label" data-l10n-id="firefox-suggest-onboarding-main-reject-option-label"> </div> @@ -89,19 +89,21 @@ class="option-description" data-l10n-id="firefox-suggest-onboarding-main-reject-option-description-1"> </div> - </div> + </label> </div> - <button id="onboardingSubmit" - class="primary" - disabled="true" - tabindex="6" - data-l10n-id="firefox-suggest-onboarding-main-submit-button"></button> - <a id="onboardingSkipLink" - tabindex="7" - data-l10n-id="firefox-suggest-onboarding-main-skip-link"></a> - <div class="pager"> - <span></span> - <span class="current"></span> + <div class="buttonBox"> + <button id="onboardingSubmit" + class="primary" + disabled="true" + tabindex="6" + data-l10n-id="firefox-suggest-onboarding-main-submit-button"></button> + <a id="onboardingSkipLink" + tabindex="7" + data-l10n-id="firefox-suggest-onboarding-main-skip-link"></a> + <div class="pager"> + <span></span> + <span class="current"></span> + </div> </div> </section> </body>