You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
As part of our release cycle we ran some Axe reports and I noticed the following issues - sorry of these have already been reported! This might need to be broken up into multiple tickets.
I'll go through my findings below where I think we might be able to make a change and reduce the number of issues.
NOTE: Some of these are not hard requirements or suggestions, just my guess at trying to decipher the meaning behind these errors or what could be done to fix them.
1. Elements must only use allowed ARIA attributes
Maybe <ui5-buttons> should not have an aria-label, maybe title is enough?
This one points to several <ui5-button> tags in the <ui5-shellbar>
Fix the following:
ARIA attribute is not well supported on the element and the text content will be used instead: aria-label
It seems like Axe doesn't like this web-component to have an "aria-label" attribute... I guess?
There is also a title attribute, maybe the aria-label should be removed here?
2. Headings should not be empty
secondary-title should never output empty <h2>?
This one only happens when you have "secondary-title" as not defined. It points to the empty <h2> tag for the secondary title, and successfactors never populates a secondary title for our pages.
3. Elements of role none or presentation should be flagged
custom shellbar icon buttons should have role="img" on the <svg> ?
This one comes up for shellbar icon buttons <svg>, but not all of them just the custom ones. The search button and the account menu seem fine. This one complains that the role is "presentation" but it's not focusable (i.e. because tabindex=-1) but we know it's not supposed to be focusable because it's just the <svg> and it's a child of a <button> that is focusable so probably the role should not be "presentation" it should be "img" that seems to work for some other buttons in the same level.
4. Elements should not have tabindex greater than zero
The ui5 block layer maybe should have tabindex=0?
This one comes up for popups that have a block layer underneath - for some reason the tabindex=1 for this layer, maybe it should be 0?
5. Document should not have more than one banner landmark
maybe the <ui5-list> should put a role onto the <header> so it doesn't think that's a "banner" landmark?
This one comes up for any <ui5-list> element when there is also a <ui5-shellbar> because the ui5-list adds a <header> element and so it complains that there are 2 banners - one is the shellbar with <div role="banner"> and one for the <header> for the <ui5-list>. You'd need to have a page with both to see this.
6. ARIA dialog and alertdialog nodes should have an accessible name
output with custom Popup element has aria-labelledby="ui5-popup-header" but no such element exists.
Try this yourself on the shellbar playground and click the account menu for "An Kimura" -- inside the <ui5-popover> shadowRoot you'll find the following: <section role="dialog" style="" class="ui5-popup-root" aria-modal="true" aria-labelledby="ui5-popup-header" tabindex="-1">
This is part of the Popover.hbs but the definition of "ui5-popup-header" is part of the Dialog.hbs which means if this is a Popup but not a Dialog the aria-labeledby attribute will be dangling.
7. ARIA input fields must have an accessible name
maybe there needs to be an aria-label or aria-labeledby for the <ul> of a <ui5-list>?
This is related to the <ul> output from the <ui5-list> tag, it is complaining that it doesn't have any sort of label but since it has a role="listbox" it needs a label or to be labeled by something.
8. Ensure interactive controls are not nested
It is not clear, but all the buttons inside the shellbar are coming out with this error. They are clearly interactive controls, but I don't know what it's complaining about that this is nested inside which is also interactive. Can you please check is this a known issue?
Expected Behavior
Axe should not complain about these things that we can fix.
Steps to Reproduce
Chrome "axe Dev Tools" extension - go open the extension on a page and run the report.
Most of these issues can be seen by going to the playground and running axe Dev Tools by clicking the "Scan ALL of my page" button.
Screenshot 1: shows the tool itself when you open it at first, and the button you need to press
Screenshot 2: shows the results of the tool
Above are screenshots of the tool and the results - there are 325 issues. Ideally there would be 0 issues. I've ran this tool from SuccessFactors and we only see around 16 issues.
Isolated Example
N/A - most can be seen by using the shellbar example in the playground
Context
UI5 Web Components version: {...}
OS/Platform: {...}
Browser: {...}
Affected component: {...}
Log Output / Stack Trace / Screenshots
{...}
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: {...}
Bussiness impact: {...}
The text was updated successfully, but these errors were encountered:
Hello @codefactor thanks for reporting and the analysis
One of the issues is already handled (not released)
2. Headings should not be empty - Fixed with #3737
One of the issues I found it's already reported
8. Ensure interactive controls are not nested - already reported with #3927
For the rest it's best if you can create separate issues, because the issues are in components owned by different teams.
At least, you can group the issues by component - Button, List, ShellBar, Popover/Dialog
Could you split them into Button, List, ShellBar, Popover/Dialog issues?.
The current one you can use for one of the groups.
Bug Description
As part of our release cycle we ran some Axe reports and I noticed the following issues - sorry of these have already been reported! This might need to be broken up into multiple tickets.
I'll go through my findings below where I think we might be able to make a change and reduce the number of issues.
NOTE: Some of these are not hard requirements or suggestions, just my guess at trying to decipher the meaning behind these errors or what could be done to fix them.
1. Elements must only use allowed ARIA attributes
Maybe
<ui5-buttons>
should not have an aria-label, maybe title is enough?This one points to several
<ui5-button>
tags in the<ui5-shellbar>
It also says...
It seems like Axe doesn't like this web-component to have an "aria-label" attribute... I guess?
There is also a title attribute, maybe the aria-label should be removed here?
2. Headings should not be empty
secondary-title should never output empty
<h2>
?This one only happens when you have "secondary-title" as not defined. It points to the empty
<h2>
tag for the secondary title, and successfactors never populates a secondary title for our pages.3. Elements of role none or presentation should be flagged
custom shellbar icon buttons should have role="img" on the
<svg>
?This one comes up for shellbar icon buttons
<svg>
, but not all of them just the custom ones. The search button and the account menu seem fine. This one complains that the role is "presentation" but it's not focusable (i.e. because tabindex=-1) but we know it's not supposed to be focusable because it's just the<svg>
and it's a child of a<button>
that is focusable so probably the role should not be "presentation" it should be "img" that seems to work for some other buttons in the same level.4. Elements should not have tabindex greater than zero
The ui5 block layer maybe should have tabindex=0?
This one comes up for popups that have a block layer underneath - for some reason the tabindex=1 for this layer, maybe it should be 0?
5. Document should not have more than one banner landmark
maybe the
<ui5-list>
should put a role onto the<header>
so it doesn't think that's a "banner" landmark?This one comes up for any
<ui5-list>
element when there is also a<ui5-shellbar>
because the ui5-list adds a<header>
element and so it complains that there are 2 banners - one is the shellbar with<div role="banner">
and one for the<header>
for the<ui5-list>
. You'd need to have a page with both to see this.6. ARIA dialog and alertdialog nodes should have an accessible name
output with custom Popup element has
aria-labelledby="ui5-popup-header"
but no such element exists.Try this yourself on the shellbar playground and click the account menu for "An Kimura" -- inside the
<ui5-popover>
shadowRoot you'll find the following:<section role="dialog" style="" class="ui5-popup-root" aria-modal="true" aria-labelledby="ui5-popup-header" tabindex="-1">
This is part of the Popover.hbs but the definition of "ui5-popup-header" is part of the Dialog.hbs which means if this is a Popup but not a Dialog the aria-labeledby attribute will be dangling.
7. ARIA input fields must have an accessible name
maybe there needs to be an aria-label or aria-labeledby for the
<ul>
of a<ui5-list>
?This is related to the
<ul>
output from the<ui5-list>
tag, it is complaining that it doesn't have any sort of label but since it has a role="listbox" it needs a label or to be labeled by something.8. Ensure interactive controls are not nested
It is not clear, but all the buttons inside the shellbar are coming out with this error. They are clearly interactive controls, but I don't know what it's complaining about that this is nested inside which is also interactive. Can you please check is this a known issue?
Expected Behavior
Axe should not complain about these things that we can fix.
Steps to Reproduce
Chrome "axe Dev Tools" extension - go open the extension on a page and run the report.
Most of these issues can be seen by going to the playground and running axe Dev Tools by clicking the "Scan ALL of my page" button.
Screenshot 1: shows the tool itself when you open it at first, and the button you need to press
![image](https://user-images.githubusercontent.com/730310/133517194-4e64e8c9-7e1b-47d5-8d45-2a81416aa843.png)
Screenshot 2: shows the results of the tool
![image](https://user-images.githubusercontent.com/730310/133517216-fd7eebe3-1f4f-4085-9ad6-e78b3dbbbd53.png)
Above are screenshots of the tool and the results - there are 325 issues. Ideally there would be 0 issues. I've ran this tool from SuccessFactors and we only see around 16 issues.
Isolated Example
N/A - most can be seen by using the shellbar example in the playground
Context
Log Output / Stack Trace / Screenshots
Priority
The priority indicates the severity of the issue. To set the appropriate priority consider the following criteria:
Note: The priority might be re-evaluated by the issue processor.
Stakeholder Info (if applicable)
The text was updated successfully, but these errors were encountered: