[tor-commits] [tor-browser] 25/311: Bug 1749742 - Fix some a11y problems in the new Firefox Suggest opt-in modal. r=daisuke, a=RyanVM, dsmith
gitolite role
git at cupani.torproject.org
Tue Apr 26 15:27:05 UTC 2022
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 at 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>
--
To stop receiving notification emails like this one, please contact
the administrator of this repository.
More information about the tor-commits
mailing list