forked from mirrors/gecko-dev
Bug 1827204 - Set the right aria roles and attributes for the browser profile selector in the new migration wizard. r=Jamie
Differential Revision: https://phabricator.services.mozilla.com/D175052
This commit is contained in:
parent
1336ced0e4
commit
6969581510
3 changed files with 12 additions and 12 deletions
|
|
@ -48,13 +48,13 @@ export class MigrationWizard extends HTMLElement {
|
||||||
|
|
||||||
<div name="page-selection">
|
<div name="page-selection">
|
||||||
<h1 data-l10n-id="migration-wizard-selection-header"></h1>
|
<h1 data-l10n-id="migration-wizard-selection-header"></h1>
|
||||||
<button id="browser-profile-selector">
|
<button id="browser-profile-selector" aria-haspopup="menu" aria-labelledby="migrator-name profile-name">
|
||||||
<span class="migrator-icon"></span>
|
<span class="migrator-icon" role="img"></span>
|
||||||
<div class="migrator-description">
|
<div class="migrator-description" role="presentation">
|
||||||
<div class="migrator-name"> </div>
|
<div id="migrator-name"> </div>
|
||||||
<div class="profile-name deemphasized-text"></div>
|
<div id="profile-name" class="deemphasized-text"></div>
|
||||||
</div>
|
</div>
|
||||||
<span class="dropdown-icon"></span>
|
<span class="dropdown-icon" role="img"></span>
|
||||||
</button>
|
</button>
|
||||||
<div class="no-resources-found error-message">
|
<div class="no-resources-found error-message">
|
||||||
<span class="error-icon" role="img"></span>
|
<span class="error-icon" role="img"></span>
|
||||||
|
|
@ -362,9 +362,9 @@ export class MigrationWizard extends HTMLElement {
|
||||||
*/
|
*/
|
||||||
#onBrowserProfileSelectionChanged(panelItem) {
|
#onBrowserProfileSelectionChanged(panelItem) {
|
||||||
this.#browserProfileSelector.selectedPanelItem = panelItem;
|
this.#browserProfileSelector.selectedPanelItem = panelItem;
|
||||||
this.#browserProfileSelector.querySelector(".migrator-name").textContent =
|
this.#browserProfileSelector.querySelector("#migrator-name").textContent =
|
||||||
panelItem.displayName;
|
panelItem.displayName;
|
||||||
this.#browserProfileSelector.querySelector(".profile-name").textContent =
|
this.#browserProfileSelector.querySelector("#profile-name").textContent =
|
||||||
panelItem.profile?.name || "";
|
panelItem.profile?.name || "";
|
||||||
|
|
||||||
if (panelItem.brandImage) {
|
if (panelItem.brandImage) {
|
||||||
|
|
|
||||||
|
|
@ -161,11 +161,11 @@
|
||||||
panelItem.click();
|
panelItem.click();
|
||||||
|
|
||||||
is(
|
is(
|
||||||
selector.querySelector(".migrator-name").textContent,
|
selector.querySelector("#migrator-name").textContent,
|
||||||
migratorInstance.displayName,
|
migratorInstance.displayName,
|
||||||
"Selector should show display name"
|
"Selector should show display name"
|
||||||
);
|
);
|
||||||
let profileName = selector.querySelector(".profile-name");
|
let profileName = selector.querySelector("#profile-name");
|
||||||
|
|
||||||
if (migratorInstance.profile) {
|
if (migratorInstance.profile) {
|
||||||
ok(!isHidden(profileName), "Profile name element should be displayed.");
|
ok(!isHidden(profileName), "Profile name element should be displayed.");
|
||||||
|
|
|
||||||
|
|
@ -108,11 +108,11 @@ label:not([hidden]) {
|
||||||
margin-inline-start: 11px;
|
margin-inline-start: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-name:empty {
|
#profile-name:empty {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-name {
|
#profile-name {
|
||||||
font-size: 0.73em;
|
font-size: 0.73em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue