Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui5-shellbar): accessibility enhancements #11238

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

kgogov
Copy link
Member

@kgogov kgogov commented Apr 1, 2025

Description: to be added later..

@kgogov kgogov requested a review from Copilot April 1, 2025 15:27
Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR introduces accessibility enhancements for the ShellBar component, specifically to improve how branding information is conveyed via ARIA attributes.

  • Added ARIA attributes for branding in the ShellBar template
  • Introduced new type definitions and getter functions for branding accessibility
  • Extended the ShellBar configuration to include a branding block for consistent accessibility data

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File Description
packages/fiori/src/ShellBarTemplate.tsx Updated ARIA attributes for header and logo elements to include branding information
packages/fiori/src/ShellBar.ts Added branding accessibility types, getter, and incorporated branding attributes in the configuration
Comments suppressed due to low confidence (1)

packages/fiori/src/ShellBarTemplate.tsx:32

  • The fallback value for the aria-label in the header (using 'this.primaryTitle') differs from the combined logo's fallback ('this._logoAreaText'). Consider unifying the fallback text across components to ensure consistent accessibility behavior.
aria-label={this.accessibilityAttributes.branding?.name || this.primaryTitle}

branding: {
"title": this._brandingText,
"accessibilityAttributes": {
role: this.accessibilityAttributes.branding?.role,
Copy link
Preview

Copilot AI Apr 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The branding 'role' attribute in the ShellBar configuration does not have a fallback if 'accessibilityAttributes.branding?.role' is undefined. Consider providing a default value (e.g. using a value similar to 'this.accLogoRole') to avoid potential undefined behavior.

Suggested change
role: this.accessibilityAttributes.branding?.role,
role: this.accessibilityAttributes.branding?.role || this.accLogoRole,

Copilot is powered by AI, so mistakes are possible. Review output carefully before use.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant