Add extra attributes to buttons (#149)

Added the option to provide "aria-selected" (ariaSelected) and "tabindex" (tabIndex) attributes to Fabric buttons

Author: yanivc-ms

libs/fabric/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../../node_modules/ng-packagr/package.schema.json",
   "name": "@angular-react/fabric",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "ngPackage": {
     "lib": {
       "entryFile": "public-api.ts",

libs/fabric/src/lib/components/button/action-button.component.ts

@@ -32,7 +32,9 @@ import { FabBaseButtonComponent } from './base-button.component';
       [ariaLabel]="ariaLabel"
       [ariaDescription]="ariaDescription"
       [ariaHidden]="ariaHidden"
+      [aria-selected]="ariaSelected"
       [role]="role"
+      [tabIndex]="tabIndex"
       [text]="text"
       [iconProps]="iconProps"
       [menuProps]="menuProps"

libs/fabric/src/lib/components/button/base-button.component.ts

@@ -42,7 +42,9 @@ export abstract class FabBaseButtonComponent extends ReactWrapperComponent<IButt
   @Input() ariaLabel?: IButtonProps['ariaLabel'];
   @Input() ariaDescription?: IButtonProps['ariaDescription'];
   @Input() ariaHidden?: IButtonProps['ariaHidden'];
+  @Input() ariaSelected?: IButtonProps['aria-selected'];
   @Input() role?: IButtonProps['role'];
+  @Input() tabIndex?: IButtonProps['tabIndex'];
   @Input() text?: IButtonProps['text'];
   @Input() iconProps?: IButtonProps['iconProps'];
   @Input() menuProps?: IButtonProps['menuProps'];

libs/fabric/src/lib/components/button/command-bar-button.component.ts

@@ -32,7 +32,9 @@ import { FabBaseButtonComponent } from './base-button.component';
       [ariaLabel]="ariaLabel"
       [ariaDescription]="ariaDescription"
       [ariaHidden]="ariaHidden"
+      [aria-selected]="ariaSelected"
       [role]="role"
+      [tabIndex]="tabIndex"
       [text]="text"
       [iconProps]="iconProps"
       [menuProps]="menuProps"

libs/fabric/src/lib/components/button/compound-button.component.ts

@@ -32,7 +32,9 @@ import { FabBaseButtonComponent } from './base-button.component';
       [ariaLabel]="ariaLabel"
       [ariaDescription]="ariaDescription"
       [ariaHidden]="ariaHidden"
+      [aria-selected]="ariaSelected"
       [role]="role"
+      [tabIndex]="tabIndex"
       [text]="text"
       [iconProps]="iconProps"
       [menuProps]="menuProps"

libs/fabric/src/lib/components/button/default-button.component.ts

@@ -32,7 +32,9 @@ import { FabBaseButtonComponent } from './base-button.component';
       [ariaLabel]="ariaLabel"
       [ariaDescription]="ariaDescription"
       [ariaHidden]="ariaHidden"
+      [aria-selected]="ariaSelected"
       [role]="role"
+      [tabIndex]="tabIndex"
       [text]="text"
       [iconProps]="iconProps"
       [menuProps]="menuProps"

libs/fabric/src/lib/components/button/icon-button.component.ts

@@ -32,7 +32,9 @@ import { FabBaseButtonComponent } from './base-button.component';
       [ariaLabel]="ariaLabel"
       [ariaDescription]="ariaDescription"
       [ariaHidden]="ariaHidden"
+      [aria-selected]="ariaSelected"
       [role]="role"
+      [tabIndex]="tabIndex"
       [text]="text"
       [iconProps]="iconProps"
       [menuProps]="menuProps"

libs/fabric/src/lib/components/button/messagebar-button.component.ts

@@ -32,7 +32,9 @@ import { FabBaseButtonComponent } from './base-button.component';
       [ariaLabel]="ariaLabel"
       [ariaDescription]="ariaDescription"
       [ariaHidden]="ariaHidden"
+      [aria-selected]="ariaSelected"
       [role]="role"
+      [tabIndex]="tabIndex"
       [text]="text"
       [iconProps]="iconProps"
       [menuProps]="menuProps"

libs/fabric/src/lib/components/button/primary-button.component.ts

@@ -32,7 +32,9 @@ import { FabBaseButtonComponent } from './base-button.component';
       [ariaLabel]="ariaLabel"
       [ariaDescription]="ariaDescription"
       [ariaHidden]="ariaHidden"
+      [aria-selected]="ariaSelected"
       [role]="role"
+      [tabIndex]="tabIndex"
       [text]="text"
       [iconProps]="iconProps"
       [menuProps]="menuProps"

libs/fabric/src/lib/components/button/split-button.component.ts

@@ -32,7 +32,9 @@ import { FabBaseButtonComponent } from './base-button.component';
       [ariaLabel]="ariaLabel"
       [ariaDescription]="ariaDescription"
       [ariaHidden]="ariaHidden"
+      [aria-selected]="ariaSelected"
       [role]="role"
+      [tabIndex]="tabIndex"
       [text]="text"
       [iconProps]="iconProps"
       [menuProps]="menuProps"