Accessibility changes for the top navbar tabs and settings tabs (#20107)

* Accessibility changes for the top navbar tabs and settings tabs

* fix indention

---------

Co-authored-by: Mads Rasmussen <[email protected]>

Author: Abdjulaziz

src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-header-sections.element.ts

@@ -54,6 +54,10 @@ export class UmbBackofficeHeaderSectionsElement extends UmbLitElement {
 		);
 	}
 
+	#getSectionName(section: UmbExtensionManifestInitializer<ManifestSection>) {
+		return section.manifest?.meta.label ? this.localize.string(section.manifest?.meta.label) : section.manifest?.name;
+	}
+
 	#getSectionPath(manifest: ManifestSection | undefined) {
 		return `section/${manifest?.meta.pathname}`;
 	}
@@ -108,12 +112,10 @@ export class UmbBackofficeHeaderSectionsElement extends UmbLitElement {
 							?active="${this._currentSectionAlias === section.alias}"
 							@click=${(event: PointerEvent) => this.#onSectionClick(event, section.manifest)}
 							href="${this.#getSectionPath(section.manifest)}"
-							label="${ifDefined(
-								section.manifest?.meta.label
-									? this.localize.string(section.manifest?.meta.label)
-									: section.manifest?.name,
-							)}"
-							data-mark="section-link:${section.alias}"></uui-tab>
+							label="${ifDefined(this.#getSectionName(section))}"
+							data-mark="section-link:${section.alias}"
+							>${this.#getSectionName(section)}</uui-tab
+						>
 					`,
 				)}
 			</uui-tab-group>

src/Umbraco.Web.UI.Client/src/packages/core/section/section-main-views/section-main-views.element.ts

@@ -111,6 +111,10 @@ export class UmbSectionMainViewElement extends UmbLitElement {
 			: nothing;
 	}
 
+	#getDashboardName(dashboard: ManifestDashboard) {
+		return dashboard.meta?.label ? this.localize.string(dashboard.meta.label) : (dashboard.name ?? dashboard.alias);
+	}
+
 	#renderDashboards() {
 		// Only show dashboards if there are more than one dashboard or if there are both dashboards and views
 		return (this._dashboards.length > 0 && this._views.length > 0) || this._dashboards.length > 1
@@ -124,10 +128,10 @@ export class UmbSectionMainViewElement extends UmbLitElement {
 							return html`
 								<uui-tab
 									href="${this._routerPath}/${dashboardPath}"
-									label="${dashboard.meta.label
-										? this.localize.string(dashboard.meta.label)
-										: (dashboard.name ?? dashboard.alias)}"
-									?active="${isActive}"></uui-tab>
+									label="${this.#getDashboardName(dashboard)}"
+									?active="${isActive}"
+									>${this.#getDashboardName(dashboard)}</uui-tab
+								>
 							`;
 						})}
 					</uui-tab-group>