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:
Mike Conley 2023-04-18 14:31:50 +00:00
parent 1336ced0e4
commit 6969581510
3 changed files with 12 additions and 12 deletions

View file

@ -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">&nbsp;</div> <div id="migrator-name">&nbsp;</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) {

View file

@ -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.");

View file

@ -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;
} }