fix(core): add title/aria-label to shellbar nav and back buttons

Author: mikerodonnell89

libs/core/shellbar/shellbar.component.html

@@ -18,6 +18,8 @@
                     fdType="transparent"
                     glyph="menu2"
                     (fdkClicked)="_navigationClicked($event)"
+                    [attr.title]="navigationButtonLabel || ('coreShellbar.navigationButtonLabel' | fdTranslate)"
+                    [attr.aria-label]="navigationButtonLabel || ('coreShellbar.navigationButtonLabel' | fdTranslate)"
                 ></button>
             }
             @if (showBackButton && !_showMobileSearch) {
@@ -27,6 +29,8 @@
                     fdType="transparent"
                     [glyph]="_rtl$() ? 'slim-arrow-right' : 'nav-back'"
                     (fdkClicked)="_backClicked($event)"
+                    [attr.title]="backButtonLabel || ('coreShellbar.backButtonLabel' | fdTranslate)"
+                    [attr.aria-label]="backButtonLabel || ('coreShellbar.backButtonLabel' | fdTranslate)"
                 ></button>
             }
             <ng-content select="fd-shellbar-branding"></ng-content>

libs/core/shellbar/shellbar.component.ts

@@ -112,6 +112,14 @@ export class ShellbarComponent implements AfterContentInit, AfterViewInit, OnDes
     @Input()
     showBackButton = false;
 
+    /** Label for the navigation button. */
+    @Input()
+    navigationButtonLabel: string;
+
+    /** Label for the back button. */
+    @Input()
+    backButtonLabel: string;
+
     /** Emitted event when navigation button is clicked. */
     @Output()
     navigationButtonClicked: EventEmitter<Event> = new EventEmitter<Event>();

libs/i18n/src/lib/models/fd-language-key-identifier.ts

@@ -82,6 +82,8 @@ export type FdLanguageKeyIdentifier =
     | 'coreShellbar.cancel'
     | 'coreShellbar.search'
     | 'coreShellbar.assistiveTools'
+    | 'coreShellbar.backButtonLabel'
+    | 'coreShellbar.navigationButtonLabel'
     | 'coreSlider.singleMinMaxDetails'
     | 'coreSlider.singleValueminDetails'
     | 'coreSlider.singleValuemaxDetails'

libs/i18n/src/lib/translations/translations.properties

@@ -156,6 +156,10 @@ coreShellbar.cancel = Cancel
 coreShellbar.search = Search
 #XFLD: Label for the assistive tools button in the shellbar
 coreShellbar.assistiveTools = Assistive Tools
+#XFLD: Label for the back button in the shellbar
+coreShellbar.backButtonLabel = Back
+#XFLD: Label for the navigation button in the shellbar
+coreShellbar.navigationButtonLabel = Navigation
 #XACT: Screen reader text explaining the minimum and maximum values of the slider component
 coreSlider.singleMinMaxDetails = Slider minimum value is {min}, maximum value is {max}
 #XACT: Screen reader text denoting the minimum value of the slider

libs/i18n/src/lib/translations/translations.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 // Do not modify, it's automatically created. Modify translations.properties instead
 export default {
     coreCalendar: {
@@ -110,7 +111,9 @@ export default {
         collapsedItemMenuLabel: 'Collapsed Item Menu',
         cancel: 'Cancel',
         search: 'Search',
-        assistiveTools: 'Assistive Tools'
+        assistiveTools: 'Assistive Tools',
+        backButtonLabel: 'Back',
+        navigationButtonLabel: 'Navigation'
     },
     coreSlider: {
         singleMinMaxDetails: 'Slider minimum value is {min}, maximum value is {max}',
@@ -198,7 +201,7 @@ export default {
         ariaLabel: 'Wizard'
     },
     coreBreadcrumb: {
-        overflowTitleMore: 'More',
+        overflowTitleMore: 'Click or press enter to view more details',
         breadcrumbTrailLabel: 'Breadcrumb Trail'
     },
     platformApprovalFlow: {

libs/i18n/src/lib/translations/translations_ar.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 // Do not modify, it's automatically created. Modify translations_ar.properties instead
 export default {
     coreCalendar: {

libs/i18n/src/lib/translations/translations_cs.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 // Do not modify, it's automatically created. Modify translations_cs.properties instead
 export default {
     coreCalendar: {

libs/i18n/src/lib/translations/translations_en_US_sappsd.ts

@@ -111,7 +111,8 @@ export default {
     coreShellbar: {
         collapsedItemMenuLabel: '[[[Ĉŏĺĺąρşēƌ Ĭţēɱ Μēŋű∙∙∙∙∙]]]',
         cancel: '[[[Ĉąŋċēĺ∙∙∙∙∙∙∙∙]]]',
-        search: '[[[Ŝēąŗċĥ∙∙∙∙∙∙∙∙]]]'
+        search: '[[[Ŝēąŗċĥ∙∙∙∙∙∙∙∙]]]',
+        assistiveTools: '[[[Āşşįşţįʋē Ţŏŏĺş∙∙∙∙]]]'
     },
     coreSlider: {
         singleMinMaxDetails: '[[[Ŝĺįƌēŗ ɱįŋįɱűɱ ʋąĺűē įş {ɱįŋ}, ɱąχįɱűɱ ʋąĺűē įş {ɱąχ}∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙]]]',
@@ -201,7 +202,7 @@ export default {
         ariaLabel: '[[[Ŵįžąŗƌ∙∙∙∙∙∙∙∙]]]'
     },
     coreBreadcrumb: {
-        overflowTitleMore: '[[[Μŏŗē]]]',
+        overflowTitleMore: '[[[Ĉĺįċķ ŏŗ ρŗēşş ēŋţēŗ ţŏ ʋįēŵ ɱŏŗē ƌēţąįĺş∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙]]]',
         breadcrumbTrailLabel: '[[[Ɓŗēąƌċŗűɱƃ Ţŗąįĺ∙∙∙∙∙∙∙∙]]]'
     },
     platformApprovalFlow: {

libs/i18n/src/lib/translations/translations_he.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 // Do not modify, it's automatically created. Modify translations_he.properties instead
 export default {
     coreCalendar: {

libs/i18n/src/lib/translations/translations_hu.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 // Do not modify, it's automatically created. Modify translations_hu.properties instead
 export default {
     coreCalendar: {