banner(WCAG2AA): "x" cross button don't have a accessible name

[JoaoEnesGoncalves]

Describe the bug
WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Div.Name

To Reproduce
Steps to reproduce the behavior:

1. run
   pa11y --debug --reporter json --standard WCAG2AA --ignore WCAG2AA.Principle4.Guideline4_1.4_1_1.F77 --ignore WCAG2AA.Principle3.Guideline3_1.3_1_1.H57.2 http://localhost:9002/iframe.html?id=corebanner--banner6

2. See error

components affected
❌ banner
❌ breadcrumb

AXE

  "code": "button-name",
  "type": "error",
  "typeCode": 1,
  "message": "Buttons must have discernible text (https://dequeuniversity.com/rules/axe/3.3/button-name?application=axeAPI)",
  "context": "<div class=\"ActionContainer-closeAction-262\" role=\"button\" tabindex=\"0\"><svg xmlns=\"http://www.w3.org/2...</div>",
  "selector": "#banner1 > div:nth-child(2) > div > div:nth-child(1)",
  "runner": "axe",
  "runnerExtras": {
    "description": "Ensures buttons have discernible text",
    "impact": "critical",
    "help": "Buttons must have discernible text",
    "helpUrl": "https://dequeuniversity.com/rules/axe/3.3/button-name?application=axeAPI"
  }

WCAG2AA

  "code": "WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Div.Name",
  "type": "error",
  "typeCode": 1,
  "message": "This element has role of button but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined.",
  "context": "<div class= ActionContainer - closeAction - 262\\ " role=\\"button\\ " tabindex=\\"  0\\ "><svg xmlns=\\"  http: //www.w3.org/2...</div>",
  "selector": "#root > div:nth-child(2) > div > div > div > div:nth-child(5) > div > div:nth-child(2) > div > div:nth-child(1)",
  "runner": "htmlcs",

other selectors/components with same error:

  "selector":"#root > div:nth-child(2) > div > div > div > div:nth-child(3) > div > div:nth-child(2) > div > div:nth-child(1)",
  "selector":"#root > div:nth-child(2) > div > div > div > div:nth-child(5) > div > div:nth-child(2) > div > div:nth-child(1)",
  "selector":"#root > div:nth-child(2) > div > div > div > div:nth-child(7) > div > div:nth-child(2) > div > div:nth-child(1)",
  "selector":"#root > div:nth-child(2) > div > div > div > div:nth-child(9) > div > div:nth-child(2) > div > div:nth-child(1)",
  "selector":"#root > div:nth-child(2) > div > div > div > div:nth-child(13) > div > div:nth-child(2) > div > div:nth-child(1)"
  "selector":"#root > div:nth-child(2) > div > div > div > div:nth-child(15) > div > div:nth-child(2) > div > div:nth-child(1)"
  "selector":"#root > div:nth-child(2) > div > div > div > div:nth-child(17) > div > div:nth-child(2) > div > div:nth-child(1)"

[nantunes]

@JoaoEnesGoncalves Please rename this issue so it as a shorter and clearer title.

[JoaoEnesGoncalves]

"x" cross button don't have a accessible name

run:
pa11y --runner htmlcs --runner axe --standard WCAG2AA --root-element "div[class|='Component-content']" http://localhost:9002/iframe.html?id=corebanner--banner8

result:

 • Error: This element has role of "button" but does not have a name available to an accessibility API. Valid names are: element content, aria-label undefined, aria-labelledby undefined.
   ├── WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Div.Name
   ├── #root > div:nth-child(2) > div > div > div > div:nth-child(4) > div > div:nth-child(2) > div > div
   └── <div class="ActionContainer-closeAction-262" role="button" tabindex="0"><div class="ActionContainer-ico...</div>

[diogofscmariano]

Notes from #697

Banner Component - Issue 678 & Breadcrumb component - Issue 678: This issue refers to the lack of a name available to an accessibility API, which stems from the Button pattern being used in both components. In these scenarios, both are using a built-by-hand component. First, it is recommended that this ad-hoc button implementation be replaced with the ready made button component in our UIKit, and that we add the necessary that would make the button accessible. The current view of the MUI does not seem to have a prop that we can leverage in order to pass in aria-label(for instance), so it may be necessary to specify a new property in our Button Component that would allow for the definition of labels that would handle this accessibility issue.