feat(ui5-dialog): labeling of header slots is now possible

[GerganaKremenska]

When Dialog's header slot is used, developers now would be able to use newly added accessible-name attribute to label the dialog properly. (If the header slot is not used, the Dialog labels the internally created header as previous.)

Fixes: #2838

[ilhan007]

Just as an option.
Instead of providing the proposed API, could you add private "ariaLabelledBy" property and use it the same way as "accessibleNameId".

aria-labelledby is a standard attribute, so we can declare it in the metadata as private not to end up in the documentation, but at the same time we weill have it in the component's state (we used this approach in the Button for example).

 * @private
 * @since 1.0.0-rc.15
ariaLabelledby: {
			type: String,
			defaultValue: "",
},

	<ui5-dialog aria-labelledby="tlt">

[GerganaKremenska]

Thanks for the tip, but if it added with aria-labelledby, jaws does double readout with the combination of getEffectiveAriaLabelText. With the approach of the accessible-name validator and screen reader is happy.

[elenastoyanovaa]

Hello @GerganaKremenska @ilhan007 ,

With the current implementation the generated html is invalid. You are labelling the section element with an element with an id of "tlt", which is not an element in the same DOM as the section element. Validators complain and also if you inspect the section itself, you can see that in the accessibility TAB, the aria-labelledby is not mapped correctly. For the same reason aria-labelledby attribute is also not an option since it will result in the same thing. What is more, even if the screen reader somehow maps the label correctly, adding the same aria-labelledby/aria-label on both custom element and the element which receives the focus, many times resulted in repetitive speech output and I would not recommend this approach. @ilhan007 mentioned that we used the aria-labelledby in the ui5-button, but there internally (as in many other components) we get the text inside the aria-labelledby element and map it as aria-label in the DOM eventually - this is done because of those invalid html results I mentioned earlier. You can check the getEffectiveAriaLabelText helper for more infomation. IMO you should be careful with getEffectiveAriaLabelText again, since this may result in repetitive speech output. This is why in many controls we provided the accessibleName property in order to avoid the invalid html and repetitive speech announcements. As the support for aria-label/aria-labelledby via getEffectiveAriaLabelText, the accessibleName results in a aria-label attribute, but avoids strange speech output by readers.

[ilhan007]

The build fails due to eslint error

done wioht accessibleName