SF_ACC Successfactors: ui5-responsive-popover has A11y issue for mobile web

[mydavidzhang]

Describe the bug
When ui5-responsive-popover is mobile web mode it has A11y issue in unit test case

expect(received).toHaveNoViolations(expected)

    Expected the HTML found at $('ui5-responsive-popover,ui5-button[icon="decline"],button') to have no violations:

    <button type="button" class="ui5-button-root" data-sap-focus-ref="" part="button" tabindex="0"><!----><ui5-icon class="ui5-button-icon" style="" name="decline" show-tooltip="" ui5-icon=""></ui5-icon><span class="ui5-button-text" id="ui5wc_5-content"><bdi><slot></slot></bdi></span><!----></button>

    Received:

    "Buttons must have discernible text (button-name)"

    Fix any of the following:
      Element does not have inner text that is visible to screen readers
      aria-label attribute does not exist or is empty
      aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      Element's default semantics were not overridden with role="presentation"
      Element's default semantics were not overridden with role="none"
      Element has no title attribute or the title attribute is empty

    You can find more information on this issue here: 
    https://dequeuniversity.com/rules/axe/3.5/button-name?application=axeAPI

    ────────

    Expected the HTML found at $('ui5-responsive-popover,ui5-dialog,h2') to have no violations:

    <h2 class="ui5-popup-header-text"><!----><!----></h2>

    Received:

    "Headings must not be empty (empty-heading)"

    Fix any of the following:
      Element does not have text that is visible to screen readers

    You can find more information on this issue here: 
    https://dequeuniversity.com/rules/axe/3.5/empty-heading?application=axeAPI

    Expected the HTML found at $('ui5-responsive-popover,ui5-title,h5') to have no violations:

    <h5 class="ui5-title-root"><span id="ui5wc_4-inner"><slot></slot></span></h5>

    Received:

    "Headings must not be empty (empty-heading)"

    Fix any of the following:
      Element does not have text that is visible to screen readers

    You can find more information on this issue here: 
    https://dequeuniversity.com/rules/axe/3.5/empty-heading?application=axeAPI

    ────────

    Expected the HTML found at $('ui5-responsive-popover,ui5-title,h5') to have no violations:

    <h5 class="ui5-title-root"><span id="ui5wc_4-inner"><slot></slot></span></h5>

    Received:

    "Heading levels should only increase by one (heading-order)"

    Fix any of the following:
      Heading order invalid

    You can find more information on this issue here: 
    https://dequeuniversity.com/rules/axe/3.5/heading-order?application=axeAPI

      45 |   expect(overflowButtonPopover.childNodes.length).toEqual(NB_OF_BUTTONS);
      46 | 
    > 47 |   await expect(container).toHaveNoA11yViolations();

To reproduce
Steps to reproduce the behavior:
Create unit test for ui5-responsive-popover

Expected behavior
No A11y issue

Context

• UI5 Web Components version 0.29.1

Affected components
ui5-responsive-popove

Organization:
Successfactors

Priority:
High because block unit tests.

[ilhan007]

Hello @mydavidzhang can you provide the exact markup so we can recreate your set up and look for those DOM elements and what they potentially miss. I can see that there are some ui5-title, ui5-button in the test, which might nothing to do with the ui5-responsive-popover itself. In order to investigate these errors we will need the markup to see what you are testing, for
example I expect to provide us something like this:

<ui5-responsive-popover>
		<div slot="header">
			<ui5-title>Hello World</ui5-title>
		</div>

		<div>
			<ui5-label>Email: </ui5-label>
		</div>

		<div slot="footer">
			<ui5-button>Subscribe</ui5-button>
		</div>
</ui5-responsive-popover>

[mydavidzhang]

Thanks @ilhan007,
This issue happens when in mobile web version which shows empty dialog title with a close x button.
Please see below UI and source code which has been marked 1, 2, and 3 issues there.


Thanks

[ilhan007]

Hello @SAP/ui5-webcomponents-topic-rd could you investigate the following ACC errors, related to the ResponsivePopover (and Dialog):

On mobile, the ResponsivePopover renders Dialog and displays Title and Button in header that causes some errors.
To test the setup you can use an empty ResponsivePopover that is opened (as dialog) in mobile .

If no headerText is provided, the Title (can be found in the ResponsivePopover.hbs) remains empty and it causes this error

1. "Headings must not be empty (empty-heading)"
   Fix any of the following: Element does not have text that is visible to screen readers
   <h5 class="ui5-title-root"><span id="ui5wc_4-inner"><slot></slot></span></h5>

Same goes for the title rendered in the Dialog.hbs

2. "Headings must not be empty (empty-heading)"
   Fix any of the following: Element does not have text that is visible to screen readers
   <h2 class="ui5-popup-header-text">{{headerText}}</h2>

Also, having h2 and then h5 seems to violate another ACC rule

3. "Heading levels should only increase by one (heading-order)"
   Fix any of the following: Heading order invalid

The button (rendered in ResponsivePopover.hbs) seems not not have accessible name

4. "Buttons must have discernible text (button-name)"

   Fix any of the following:
   Element does not have inner text that is visible to screen readers
   aria-label attribute does not exist or is empty
   aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
   Element's default semantics were not overridden with role="presentation"
   Element's default semantics were not overridden with role="none"
   Element has no title attribute or the title attribute is empty

<button type="button" class="ui5-button-root" data-sap-focus-ref="" part="button" tabindex="0"><!----><ui5-icon class="ui5-button-icon" style="" name="decline" show-tooltip="" ui5-icon=""></ui5-icon><span class="ui5-button-text" id="ui5wc_5-content"><bdi><slot></slot></bdi></span><!----></button>

[georgimkv]

Hi @mydavidzhang
The pull request #2823 will fix the reported errors in the ResponsivePopover.
The reported accessibility error for Dialog has already been solved by #2770.