[Accessibility] Add css to hide screen-reader-only class inside site.link clientlib

[koenkicken]

[Accessibility] Add css to hide screen-reader-only class inside site.link clientlib

Is your feature request related to a problem? Please describe. Since PR https://github.com/adobe/aem-core-wcm-components/pull/2064, cmp-link__screen-reader-only classes are added to buttons when links are set to open in a new tab, to add text meant for screenreaders. The styling to hide the "opens in a new tab" text is not included in the clientlib itself. This means in each project using the core.wcm.components.commons.site.link clientlib, should add styling to the cmp-link__screen-reader-only class to visually hide it.

Describe the solution you'd like Add the styling to the core.wcm.components.commons.site.link clientlib itself to hide the cmp-link__screen-reader-only element.

[vladbailescu]

Not hiding the accessibility text was actually intended. On a project level, there are (at least) two options:

• skip the JS that adds the accessibility text (by removing core.wcm.components.commons.site.link from your base clientlib)
• add your own style to decorate or hide the text (which is done in the examples, where we chose to hide it: https://github.com/adobe/aem-core-wcm-components/pull/2064/files#diff-f34192aeb908fb069ffc09b898e8404058325fed7529e3b700d7c8b58cd2b551R57-R63