Internal issue 3030 - Aria-label on ic-status-tag overrides aria-label on parent component

[ticket-sync[bot]]

I have a component that wraps an ic-status-tag and is used inside a named container. I would like to add an aria-label to the component so that a screen reader will read out the name of the container, then the status of the ic-status-tag (using role=status via the announced prop). Currently, the screen reader prioritises the aria-label set inside the host of the ic-status-tag: “Status”, and will read “Status status good” for example. When there are multiple containers with different names with changing statuses, the screen reads “Status status good” for all of them. If the aria-label is removed from the ic-status-tag host, (tested with the browser devTools) it should read “'Container Name' status good” which is the desired behaviour.

  <my-status-tag-wrapper aria-label=”container name”>

    ..Good..

 

Is it possible to remove the aria-label=“Status” from the ic-status-tag :-<Host role= {announced ? "status" : null} aria-label="Status">,

or maybe add a prop so that the desired aria-label can be passed in, e.g. : <Host role= {announced ? "status" : null} aria-label={customAria ?? "Status">

[MI6-255]

Add functionality to add a custom aria label

[ad9242]

it might be more consistent with other components to use "aria-label" attribute directly rather than adding a new "customAria" prop. would need to think about how to handle change to the attribute though eg by adding a mutationObserver to watch for changes to the attribute