Ignore SVG accessible name requirement when the svg is used as the image of a button with an accessible name

[shunguoy]

When an svg is used as an image of a button, if the button already has an accessible name, the accessible name for the svg should not be required.
a test case in Carbon: https://react.carbondesignsystem.com/?path=/docs/experimental-fluid-components-unstable-fluidnumberinput--overview

Is this similar to the requirement for an image if it's used for a button?

Also refer to Inapplicable Example 4 in ACT rule for its interpretation.

[philljenkins]

another instance in IBM Cloud

See https://cloud.ibm.com/observability/event-routing/routes/create

<li id="help-link" role="menuitem" class="cds--cloud-header-list__item cds--cloud-header-list__item--icon">`
   <ul role="menu" data-header-dropdown="" data-dropdown-type="navigation" class="cds--dropdown" aria-label="Help">
      <li role="menuitem" class="cds--dropdown-text cds--cloud-header-list__btn tooltip-widget" aria-label="Help" tabindex="0">
         <svg width="20px" height="20px" viewBox="0 0 32 32"><path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"></path><circle cx="16" cy="23.5" r="1.5"></circle><path d="M17,8H15.5A4.49,4.49,0,0,0,11,12.5V13h2v-.5A2.5,2.5,0,0,1,15.5,10H17a2.5,2.5,0,0,1,0,5H15v4.5h2V17a4.5,4.5,0,0,0,0-9Z"></path><rect fill="none" width="32" height="32"></rect></svg>
         <span class="tooltip-content" style="width: 30px;">Help</span>
      </li>

Checker incorrectly reports the following violations:

Rule ID: svg_graphics_labelled
Reason ID: fail_acc_name

• The SVG element has no accessible name
• A non-decorative SVG element must have an accessible name

[shunguoy]

Triage: as a button child, because the button's children are presentational, the svg name check should be ignored.
The name requirement should be checked as a child of 'li'; if it's decorative, the author needs to mark it with aria-hidden.

[shunguoy]

Another example:

<a href="https://example.org" aria-label="SVG star">
	<svg height="200" xmlns="http://www.w3.org/2000/svg">
		<polygon points="100,10 40,180 190,60 10,60 160,180" fill="yellow" />
	</svg>
</a>

[shunguoy]

Triage: ignore only if an ancestor with named from author, the image/svg is a descendant of any element that uses aria-label/aria-labelledby for its accessible name.
mostly for widgets, Exception for containers