fix: (Core) address accessibility issues for the Object marker compon…

…ent (#4081)

* fixing the Accessibility issue for the Object marker component

fixing the Accessibility issue for the Object marker component

apps/docs/src/app/core/component-docs/object-marker/examples/object-marker-example.component.html

@@ -1,5 +1,5 @@
-<span fd-object-marker glyph="add-favorite" title="Favorite" aria-label="Favourite Icon" aria-hidden="true"></span>
-<span fd-object-marker glyph="flag" title="Flag" aria-label="Favourite Flag" aria-hidden="true"></span>
-<span fd-object-marker glyph="request" title="Request" aria-label="Favourite Request" aria-hidden="true"></span>
-<span fd-object-marker glyph="user-edit" title="Editable" aria-label="Favourite Editable" aria-hidden="true"></span>
-<span fd-object-marker glyph="private" title="Private" aria-label="Favourite Private" aria-hidden="true"></span>
+<span fd-object-marker glyph="add-favorite" title="Favorite" aria-label="Favorite Icon"></span>
+<span fd-object-marker glyph="flag" title="Flag" aria-label="Favorite Flag"></span>
+<span fd-object-marker glyph="request" title="Request" aria-label="Favorite Request"></span>
+<span fd-object-marker glyph="user-edit" title="Editable" aria-label="Favorite Editable"></span>
+<span fd-object-marker glyph="private" title="Private" aria-label="Favorite Private"></span>

apps/docs/src/app/core/component-docs/object-marker/examples/object-marker-text-example.component.html

@@ -1,4 +1,9 @@
-<span fd-object-marker aria-label="Object Maker with Text" label="Draft"></span>
-<span fd-object-marker aria-label="Object Maker with Text" label="Request"></span>
-<a fd-object-marker clickable="true" aria-label="Object Maker with only Text Clickable" label="Locked"></a>
-<a fd-object-marker clickable="true" aria-label="Object Maker with only Text Clickable" label="Edit"></a>
+<span fd-object-marker aria-label="Object Marker with Text" label="Draft"></span>
+<span fd-object-marker aria-label="Object Marker with Text" label="Request"></span>
+<a
+    fd-object-marker
+    clickable="true"
+    aria-label="Object Marker with only Text Clickable"
+    label="Locked"
+></a>
+<a fd-object-marker clickable="true" aria-label="Object Marker with only Text Clickable" label="Edit"></a>

apps/docs/src/app/platform/component-docs/platform-object-marker/object-marker-example/object-marker-example.component.html

@@ -1,20 +1,17 @@
 <fdp-object-marker
     glyph="add-favorite"
-    ariaHidden="true"
     ariaLabel="favorite only icon"
-    title="Favourite"
+    title="Favorite"
 ></fdp-object-marker>
-<fdp-object-marker glyph="flag" ariaHidden="true" ariaLabel="Flag only icon" title="Flag"></fdp-object-marker>
-<fdp-object-marker glyph="request" ariaHidden="true" ariaLabel="Request only icon" title="Request"></fdp-object-marker>
+<fdp-object-marker glyph="flag" ariaLabel="Flag only icon" title="Flag"></fdp-object-marker>
+<fdp-object-marker glyph="request" ariaLabel="Request only icon" title="Request"></fdp-object-marker>
 <fdp-object-marker
     glyph="user-edit"
-    ariaHidden="true"
     ariaLabel="Editable only icon"
     title="Editable"
 ></fdp-object-marker>
 <fdp-object-marker
     glyph="private"
-    ariaHidden="true"
     ariaLabel="Private Icon only icon"
     title="Private"
 ></fdp-object-marker>

apps/docs/src/app/platform/component-docs/platform-object-marker/object-marker-example/object-marker-text-clickable-example.component.html

@@ -1,4 +1,14 @@
-<fdp-object-marker glyph="user-edit" clickable="true" ariaLabel="Object Marker with Text Clickable" label="Editable">
+<fdp-object-marker
+    glyph="user-edit"
+    clickable="true"
+    ariaLabel="Object Marker with Text Clickable"
+    label="Editable"
+>
 </fdp-object-marker>
-<fdp-object-marker glyph="private" clickable="true" ariaLabel="Object Marker with Text Clickable" label="Locked">
+<fdp-object-marker
+    glyph="private"
+    clickable="true"
+    ariaLabel="Object Marker with Text Clickable"
+    label="Locked"
+>
 </fdp-object-marker>

apps/docs/src/app/platform/component-docs/platform-object-marker/object-marker-example/object-marker-text-only-example.component.html

@@ -1,8 +1,6 @@
 <fdp-object-marker ariaLabel="Object Marker with Text" label="Draft"></fdp-object-marker>
 <fdp-object-marker fd-object-marker ariaLabel="Object Marker with Text" label="Request"></fdp-object-marker>
-<fdp-object-marker
-    clickable="true"
-    ariaLabel="Object Marker with only Text Clickable"
-    label="Locked"
-></fdp-object-marker>
-<fdp-object-marker clickable="true" ariaLabel="Object Marker with only Text Clickable" label="Edit"></fdp-object-marker>
+<fdp-object-marker clickable="true" ariaLabel="Object Marker with only Text Clickable" label="Locked">
+</fdp-object-marker>
+<fdp-object-marker clickable="true" ariaLabel="Object Marker with only Text Clickable" label="Edit">
+</fdp-object-marker>

libs/core/src/lib/object-marker/object-marker.component.ts

@@ -17,7 +17,10 @@ import { CssClassBuilder, applyCssClass } from '../utils/public_api';
         <ng-content></ng-content>`,
     styleUrls: ['./object-marker.component.scss'],
     encapsulation: ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        '[attr.tabindex]': 'clickable ? 0 : -1'
+    }
 })
 export class ObjectMarkerComponent implements OnChanges, OnInit, CssClassBuilder {
     /** User's custom classes */

libs/platform/src/lib/components/object-marker/object-marker.component.html

@@ -4,7 +4,6 @@
     [clickable]="clickable"
     [attr.aria-label]="ariaLabel"
     [attr.aria-hidden]="ariaHidden"
-    [attr.tabIndex]="tabIndex"
     [attr.title]="title"
     [label]="label"
 >

libs/platform/src/lib/components/object-marker/object-marker.component.ts

@@ -27,9 +27,6 @@ export class PlatformObjectMarkerComponent {
     @Input()
     ariaHidden: boolean;
 
-    /** tab index value to be passed for the tabbing */
-    tabIndex: string;
-
     /** Sets control aria-title to a string attribute value */
     @Input()
     title: string;