fix(ui5-card): correct aria-labelledBy to card and header

[GerganaKremenska]

Now the aria-labelledBy of card and header contain only the rendered elements.

Fixes: #2426

[CLAassistant]

All committers have signed the CLA.

[ilhan007]

I am fine with the change, I have just one comment about the test, that you can find inline.

[ilhan007]

To make the test more robust you can use the built-in "_id" property - card1.getProperty("_id"), card2.getProperty("_id") to get these parts ui5wc_20 and ui5wc_21.
Because, if someone adds more cards in the test page, these cards might get different IDs, f.e. ui5wc_23, ui5wc_24 as these numbers depend on the component's definition order and every time the test might need to be adjusted as it would fail.

const card1Id = card1.getProperty("_id");
const EXPECTED_ARIA_LABELLEDBY_CARD = `${card1Id}-heading ${card1Id}-desc`;
const EXPECTED_ARIA_LABELLEDBY_HEADER = "${card1Id}-subheading ${card1Id}-status ${card1Id}-avatar";

const card2Id = card2.getProperty("_id");
...

Also, for reference how "_id" is used you can see NotificationList.spec.js -> "tests List Group Item ACC ariaLabelledBy".

[GerganaKremenska]

thanks for the feedback. :) applied to the change.

outdated

[elenastoyanovaa]

@GerganaKremenska could you please update the Accessibility Status of the Card component?