Skip to content

Commit

Permalink
fix: rename role to innerRole, match native type definition (#1616)
Browse files Browse the repository at this point in the history 
Co-authored-by: Felix Weber <[email protected]>
  • Loading branch information
@felix-ico
felix-ico and Felix Weber authored Feb 23, 2023
1 parent 4e2e19e commit ceac390
Show file tree
Hide file tree
Showing 5 changed files with 18 additions and 18 deletions.
4 changes: 2 additions & 2 deletions packages/components/src/components/date-picker/date-picker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export class DatePicker {
/**
* Defines a specific role attribute for the date picker input.
*/
@Prop() role: string;
@Prop() innerRole: string;

/**
* Forces the opening direction of the calendar modal to be always left or right.
Expand Down Expand Up @@ -440,7 +440,7 @@ export class DatePicker {
}}
name={this.name}
identifier={this.identifier}
role={this.role}
role={this.innerRole}
direction={this.direction}
required={this.required}
min={this.min}
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/date-picker/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
| `firstDayOfWeek` | `first-day-of-week` | Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc. Default is Monday. | `any` | `undefined` |
| `helperText` | `helper-text` | (optional) Helper text | `string` | `''` |
| `identifier` | `identifier` | Adds a unique identifier for the date picker input. Use this instead of html `id` attribute. | `string` | `undefined` |
| `innerRole` | `inner-role` | Defines a specific role attribute for the date picker input. | `string` | `undefined` |
| `invalid` | `invalid` | (optional) invalid status | `boolean` | `undefined` |
| `label` | `label` | (optional) Label | `string` | `''` |
| `localization` | -- | Button labels, day names, month names, etc, used for localization. Default is English. | `DuetLocalizedText & { today: string; }` | `undefined` |
Expand All @@ -23,7 +24,6 @@
| `name` | `name` | Name of the date picker input. | `string` | `'date'` |
| `popupTitle` | `popup-title` | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of localization.calendarHeading<br/><br/> | `string` | `'Pick a date'` |
| `required` | `required` | Should the input be marked as required? | `boolean` | `false` |
| `role` | `role` | Defines a specific role attribute for the date picker input. | `string` | `undefined` |
| `size` | `size` | <span style="color:red">**[DEPRECATED]**</span> <br/><br/> | `string` | `undefined` |
| `status` | `status` | <span style="color:red">**[DEPRECATED]**</span> - invalid should replace status<br/><br/> | `string` | `''` |
| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` |
Expand Down
26 changes: 13 additions & 13 deletions packages/components/src/components/telekom/logo/logo-svg.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export class LogoSvg {
| string = 'en';
/** (optional) Sets the icon color via the `fill` attribute */
@Prop() color?: string = 'magenta';
@Prop() role?: 'link' | 'img' = 'img';
@Prop() innerRole?: 'link' | 'img' = 'img';
@Prop() focusable: boolean = true;
/** (optional) When using the icon standalone, make it meaningful for accessibility */
@Prop() accessibilityTitle?: string;
Expand Down Expand Up @@ -76,7 +76,7 @@ export class LogoSvg {
<title id={`logo-title-${i}`}>{this.logoTitle}</title>
) : (
<title id={`logo-title-${i}`}>{`${title} ${
this.role === 'link' ? linkAddition : ''
this.innerRole === 'link' ? linkAddition : ''
}`}</title>
);
}
Expand All @@ -91,7 +91,7 @@ export class LogoSvg {
viewBox="0 0 33 38"
part="logo-svg"
fill={this.getColor()}
role={this.role === 'link' ? null : 'img'}
role={this.innerRole === 'link' ? null : 'img'}
aria-labelledby={`logo-title-${i}`}
>
{this.getTitle('Telekom Logo', '- Go to Start Page')}
Expand All @@ -105,7 +105,7 @@ export class LogoSvg {
viewBox="0 0 153 38"
part="logo-svg"
fill={this.getColor()}
role={this.role === 'link' ? null : 'img'}
role={this.innerRole === 'link' ? null : 'img'}
aria-labelledby={`logo-title-${i}`}
>
{this.getTitle(
Expand All @@ -123,7 +123,7 @@ export class LogoSvg {
viewBox="0 0 142 38"
part="logo-svg"
fill={this.getColor()}
role={this.role === 'link' ? null : 'img'}
role={this.innerRole === 'link' ? null : 'img'}
aria-labelledby={`logo-title-${i}`}
>
{this.getTitle(
Expand All @@ -141,7 +141,7 @@ export class LogoSvg {
viewBox="0 0 107 38"
part="logo-svg"
fill={this.getColor()}
role={this.role === 'link' ? null : 'img'}
role={this.innerRole === 'link' ? null : 'img'}
aria-labelledby={`logo-title-${i}`}
>
{this.getTitle(
Expand All @@ -159,7 +159,7 @@ export class LogoSvg {
viewBox="0 0 103 38"
part="logo-svg"
fill={this.getColor()}
role={this.role === 'link' ? null : 'img'}
role={this.innerRole === 'link' ? null : 'img'}
aria-labelledby={`logo-title-${i}`}
>
{this.getTitle(
Expand All @@ -177,7 +177,7 @@ export class LogoSvg {
viewBox="0 0 114 38"
part="logo-svg"
fill={this.getColor()}
role={this.role === 'link' ? null : 'img'}
role={this.innerRole === 'link' ? null : 'img'}
aria-labelledby={`logo-title-${i}`}
>
{this.getTitle(
Expand All @@ -195,7 +195,7 @@ export class LogoSvg {
viewBox="0 0 126 38"
part="logo-svg"
fill={this.getColor()}
role={this.role === 'link' ? null : 'img'}
role={this.innerRole === 'link' ? null : 'img'}
aria-labelledby={`logo-title-${i}`}
>
{this.getTitle(
Expand All @@ -221,7 +221,7 @@ export class LogoSvg {
viewBox="0 0 144 38"
part="logo-svg"
fill={this.getColor()}
role={this.role === 'link' ? null : 'img'}
role={this.innerRole === 'link' ? null : 'img'}
aria-labelledby={`logo-title-${i}`}
>
{this.getTitle(
Expand All @@ -239,7 +239,7 @@ export class LogoSvg {
viewBox="0 0 33 38"
part="logo-svg"
fill={this.getColor()}
role={this.role === 'link' ? null : 'img'}
role={this.innerRole === 'link' ? null : 'img'}
aria-labelledby={`logo-title-${i}`}
>
{this.getTitle(
Expand All @@ -256,7 +256,7 @@ export class LogoSvg {
viewBox="0 0 142 38"
part="logo-svg"
fill={this.getColor()}
role={this.role === 'link' ? null : 'img'}
role={this.innerRole === 'link' ? null : 'img'}
aria-labelledby={`logo-title-${i}`}
>
{this.getTitle(
Expand All @@ -274,7 +274,7 @@ export class LogoSvg {
viewBox="0 0 109 38"
part="logo-svg"
fill={this.getColor()}
role={this.role === 'link' ? null : 'img'}
role={this.innerRole === 'link' ? null : 'img'}
aria-labelledby={`logo-title-${i}`}
>
{this.getTitle(
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/telekom/logo/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@
| `accessibilityTitle` | `accessibility-title` | (optional) When using the icon standalone, make it meaningful for accessibility | `string` | `undefined` |
| `color` | `color` | (optional) Sets the icon color via the `fill` attribute | `string` | `'magenta'` |
| `focusable` | `focusable` | | `boolean` | `true` |
| `innerRole` | `inner-role` | | `"img" \| "link"` | `'img'` |
| `language` | `language` | (optional) The languages for the Text behind the Logo | `string` | `'en'` |
| `logoHideTitle` | `logo-hide-title` | (optional) Hide all logo related titles | `boolean` | `undefined` |
| `logoTitle` | `logo-title` | (optional) When using the icon standalone, make it meaningful for accessibility | `string` | `undefined` |
| `role` | `role` | | `"img" \| "link"` | `'img'` |


## Shadow Parts
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/telekom/telekom-nav-list/telekom-nav-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const isDirectChild = (parent: HTMLElement, child: HTMLElement) =>
export class TelekomNavList {
@Element() hostElement: HTMLStencilElement;

@Prop({ reflect: true }) role: string = 'nav';
@Prop({ reflect: true }) role: string | null = 'nav';
@Prop({ reflect: true }) alignment: 'left' | 'center' | 'right' = 'left';
@Prop({ reflect: true }) variant:
| 'meta-nav-external'
Expand Down

0 comments on commit ceac390

Please sign in to comment.