Support for internationalization (i18n)

[denyo]

Scope

With the results of #2615 we want to unify intl and aria props in order to allow customization of aria-label attributes.

Therefore we do the following

• intl prop gets deprecated
• we add/extend aria props since currently all values affect screen readers only
• draft for p-pagination

  /**
   * @deprecated since v3.10.0 use `aria` instead
   * Override the default wordings that are used for aria-labels on the next/prev and page buttons. */
  @Prop() public intl?: PaginationInternationalization = {
    root: 'Pagination',
    prev: 'Previous page',
    next: 'Next page',
    page: 'Page',
  };

  @Prop() public aria?: SelectedAriaAttributes<'aria-label'> & {
    prev: SelectedAriaAttributes<'aria-label'>;
    next: SelectedAriaAttributes<'aria-label'>;
    page: SelectedAriaAttributes<'aria-label'>;
  } = {
    'aria-label': 'Pagination',
    prev: { 'aria-label': 'Previous page' },
    next: { 'aria-label': 'Next page' },
    page: { 'aria-label': 'Page {{value}}' }, // important for interpolation
  };

• extend PorscheDesignSystemModule and PorscheDesignSystemProvider by components prop/option for default aria configuration (see [SPIKE]: Support for internationalization (i18n) (Issue/2615) #3004 for a draft) -> maybe we should limit the aria definition on module/provider level by aria-label only.

Notes

• It's useful to first extend component meta by screen reader wordings, which can then be used as insurance when new screen reader i18n approach is getting implemented
• Spike: Support for internationalization (i18n) #2615
• [SPIKE]: Support for internationalization (i18n) (Issue/2615) #3004
• components with intl prop
  • p-carousel (Override the default wordings that are used for aria-labels on the next/prev buttons and pagination.)
  • p-pagination (Override the default wordings that are used for aria-labels on the next/prev and page buttons.)
• components with aria prop
  • p-button
  • p-button-pure
  • p-button-tile
  • p-carousel
  • p-crest
  • p-flyout
  • p-flyout-navigation
  • p-icon
  • p-link
  • p-link-pure
  • p-link-tile
  • p-marque
  • p-modal
  • p-pagination
  • p-popover
  • p-scroller
  • p-spinner
  • p-tag-dismissible
  • p-wordmark
• also check components like p-button that have a nested p-spinner with a hard coded aria={{ 'aria-label': 'Loading state' }} which currently is not extracted
• Check loading-message.tsx for wordings
• check linked PR for extracted wordings that are used together with hideLabel prop or sr-only class
• string "options selected" should also be translatable for e.g. Multi Select
  

Acceptance criteria

• Component Meta reflects all screen reader related wordings
• aria prop is extended where needed to support multiple DOM related aria definitions
• intl prop is deprecated (including validation and documentation) for all components and mapped to the new extended aria approach (to not have a breaking change)
• aria configuration (limited to wordings) can be provided at PorscheDesignSystemModule and PorscheDesignSystemProvider but should still be overwriteable on component level (like it's the case for e.g. theme)
• All screen reader related wordings can be defined by aria prop on component level or PorscheDesignSystemModule and PorscheDesignSystemProvider

Subtasks

• Task

[michaelworm]

The following is already done:

• Component Meta reflects all screen reader related wordings => I took over all changes from [SPIKE]: Support for internationalization (i18n) (Issue/2615) #3004
• intl prop is deprecated (including validation and documentation) for all components and mapped to the new extended aria approach (to not have a breaking change) => For p-carousel & p-pagination
• string "options selected" should also be translatable for e.g. Multi Select => Done with two other occurences in this component