ui5-shellbar: h1 not inside a button

[JarrettChan]

Bug Description

<h1> must not be inside the menu button

Expected Behavior

<h1> should wrap the menu button

Steps to Reproduce

1. Go to https://sap.github.io/ui5-webcomponents/playground/components/ShellBar/
2. Inspect Menu button to see <h1> inside <button>

Context

• UI5 Web Components version: 1.3.0
• OS/Platform: macOS 12.4
• Browser: Chrome 102.0.5005.61 (Official Build) (x86_64)
• Affected component: ui5-shellbar
  

  ui5-webcomponents/packages/fiori/src/ShellBar.hbs

  Lines 43 to 47 in 31a86e2

  	{{#if showTitleInMenuButton}}
  	<h1 class="ui5-shellbar-menu-button-title">
  	<bdi>{{primaryTitle}}</bdi>
  	</h1>
  	{{/if}}

  
  https://html.spec.whatwg.org/multipage/dom.html#phrasing-content-2

Most elements that are categorized as phrasing content can only contain elements that are themselves categorized as phrasing content, not any flow content.

• https://jira.tools.sap/browse/FLPCOREANDUX-5455 - Improve ACC of ShellAppTitle

Priority

• Low
• Medium
• High
• Very High

The priority indicates the severity of the issue. To set the appropriate priority consider the following criteria:

• Breaks entire application or system - High or Very High
• Accessibility issue - Medium or High
• Functional issue - Medium or High
• Visual issue - Low or Medium

Note: The priority might be re-evaluated by the issue processor.

Stakeholder Info (if applicable)

• Organization: SuccessFactors

[niyap]

Hello @SAP/ui5-webcomponents-topic-p,

Could you please analyse whether it is correct to render h1 element for the menu button title?

Thank you in advance for your support!

Kind Regards,
Niya

[nnaydenow]

Hi @JarrettChan,

Current implementation is based on structure proposed to our accessibility experts. Issue is forwarded to them and it will be blocked until they give back some feedback about it.

Regards,
Nayden

[anuvenkatesh1]

Hi Team, the same issue existed with SAP UI5 also which was fixed recently

Thanks