Fix accessibility of logos in main menubar

[srietkerk]

Fixes microsoft/pxt-arcade#7148

These are pretty much the same changes from #11037, just applied to the main header bar rather than just the skillmap one.

[Copilot]

Pull request overview

This pull request improves the accessibility of logos in the main header bar by replacing non-interactive text spans with interactive Button components when the logo should link to the home page, and by properly managing aria-hidden attributes for decorative elements.

Changes:

• Converted text-based logos to use the Button component when they are interactive (linking to home)
• Changed organization logo from role="presentation" to aria-hidden="true" for better accessibility
• Added conditional logic to determine when logo elements are interactive and should be exposed to assistive technologies
• Updated CSS styling to accommodate buttons within logo containers

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
webapp/src/headerbar.tsx	Replaces text spans with Button components for interactive text logos, adds aria attributes, and updates the isInteractive logic
theme/common.less	Adds CSS rules for button elements within logo containers to override default button margins

Comments suppressed due to low confidence (1)

webapp/src/headerbar.tsx:149

• When the logo is an image (not text), the container div has role="menuitem" and an onClick handler when shouldLinkHome is true, but lacks an accessible label. Screen readers will announce this as an unlabeled menuitem. Consider adding an aria-label to the container div that includes the board name and purpose, similar to how it's done for text logos. For example: aria-label={shouldLinkHome ? lf("MakeCode {0} Logo, return to home page", targetTheme.boardName) : undefined}

        return <div aria-hidden={!isInteractive} role={role} className={`ui item logo brand ${view !== "sandbox" && view !== "home" ? "mobile hide" : ""}`} onClick={onClickHandler}>
            {targetTheme.useTextLogo
            ? (shouldLinkHome
                ? [<Button className="name menu-button" key="org-name"
                    onClick={this.brandIconClick}
                    title={lf("MakeCode {0} Logo, return to home page", targetTheme.boardName)}
                    ariaLabel={lf("MakeCode {0} Logo, return to home page", targetTheme.boardName)}
                    label={targetTheme.organizationText} />,
                <Button className="name-short menu-button" key="org-name-short"
                    onClick={this.brandIconClick}
                    title={lf("MakeCode {0} Logo, return to home page", targetTheme.boardName)}
                    ariaLabel={lf("MakeCode {0} Logo, return to home page", targetTheme.boardName)}
                    label={targetTheme.organizationShortText || targetTheme.organizationText} />]
                : [ <span className="name" key="org-name">{targetTheme.organizationText}</span>,
                    <span className="name-short" key="org-name-short">{targetTheme.organizationShortText || targetTheme.organizationText}</span> ])
            : (targetTheme.logo || targetTheme.portraitLogo
                ? <img className={`ui ${targetTheme.logoWide ? "small" : ""} logo`} src={targetTheme.logo || targetTheme.portraitLogo} alt={lf("{0} Logo", targetTheme.boardName)} />
                : <span className="name">{targetTheme.boardName}</span>)}
        </div>