scale icon indicating copy to clipboard operation
scale copied to clipboard

Telekom Brand Header: Additional language attribute for the Properties 'appName' and 'logoTitle'

Open equitable66 opened this issue 1 year ago • 0 comments

Scale Version

3.0.0-beta.134

Framework and version

React with @telekom/scale-components-react

Describe the feature request It would make sense when using Telekom Brand Header on a German-language website and also the content of the properties 'appName' and 'logoTitle' is set in English-language, to identify this as English-language as well e.g. for screen reader. This could be done with two additional properties, e.g. 'appNameLang' and 'logoTitleLang', which then additionally insert a ' lang="en" ' attribute in the corresponding or generated HTML element for 'appName' and 'logoTitle' .

Possible expression in #shadow-root:


<scale-telekom-header 
     app-name="Application Name" 
     slot="header" 
     logo-title="Life is for sharing" 
     class="hydrated"
>
#shadow-root
.....

<div part="bottom-bar">
     <div part="bottom-app-name">
        <span lang="en" part="app-name-text">Application Name</span>
     </div>

.....

<a href="javascript:void(0);" part="logo variant-white" tabindex="0"  lang="en" title="Life is for sharing">
...
<title lang="en" id="logo-title-2">Life is for sharing</title>

Describe the use case The point is that screen reader such as Jaws or nvda should be able to read partially existing English-language identifiers and values of HTML elements in English-language slang on a German-language website.

equitable66 avatar Jun 21 '23 13:06 equitable66