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">
<h1 data-l10n-id="migration-wizard-selection-header"></h1>
<button id="browser-profile-selector">
<span class="migrator-icon"></span>
<div class="migrator-description">
<div class="migrator-name">&nbsp;</div>
<div class="profile-name deemphasized-text"></div>
<button id="browser-profile-selector" aria-haspopup="menu" aria-labelledby="migrator-name profile-name">
<span class="migrator-icon" role="img"></span>
<div class="migrator-description" role="presentation">
<div id="migrator-name">&nbsp;</div>
<div id="profile-name" class="deemphasized-text"></div>
</div>
<span class="dropdown-icon"></span>
<span class="dropdown-icon" role="img"></span>
</button>
<div class="no-resources-found error-message">
<span class="error-icon" role="img"></span>
@ -362,9 +362,9 @@ export class MigrationWizard extends HTMLElement {
*/
#onBrowserProfileSelectionChanged(panelItem) {
this.#browserProfileSelector.selectedPanelItem = panelItem;
this.#browserProfileSelector.querySelector(".migrator-name").textContent =
this.#browserProfileSelector.querySelector("#migrator-name").textContent =
panelItem.displayName;
this.#browserProfileSelector.querySelector(".profile-name").textContent =
this.#browserProfileSelector.querySelector("#profile-name").textContent =
panelItem.profile?.name || "";
if (panelItem.brandImage) {

View file

@ -161,11 +161,11 @@
panelItem.click();
is(
selector.querySelector(".migrator-name").textContent,
selector.querySelector("#migrator-name").textContent,
migratorInstance.displayName,
"Selector should show display name"
);
let profileName = selector.querySelector(".profile-name");
let profileName = selector.querySelector("#profile-name");
if (migratorInstance.profile) {
ok(!isHidden(profileName), "Profile name element should be displayed.");

View file

@ -108,11 +108,11 @@ label:not([hidden]) {
margin-inline-start: 11px;
}
.profile-name:empty {
#profile-name:empty {
display: none;
}
.profile-name {
#profile-name {
font-size: 0.73em;
text-transform: uppercase;
}