From 49ee9b7981a90696e950072d8c71367fb05e9b28 Mon Sep 17 00:00:00 2001
From: Gavin Everett <gavin.everett@genesys.com>
Date: Fri, 13 Oct 2023 11:47:21 +0100
Subject: [PATCH 1/2] refactor(inputs): updating focus styles

updating focus styles

COMUI-2348
---
 .../gux-form-field-number.scss                     | 14 ++++++++++----
 .../gux-form-field-number.tsx                      |  1 +
 .../gux-form-field-text-like.scss                  | 13 +++++++++----
 .../gux-form-field-text-like.tsx                   |  1 +
 .../src/components/stable/gux-icon/readme.md       |  2 +-
 5 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-number/gux-form-field-number.scss b/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-number/gux-form-field-number.scss
index e37f00cad..bff19f6c9 100644
--- a/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-number/gux-form-field-number.scss
+++ b/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-number/gux-form-field-number.scss
@@ -49,6 +49,16 @@ $gux-form-field-number-step-button-size: 14px;
     align-items: center;
     width: 100%;
 
+    &:focus-visible {
+      border: var(--gse-ui-formControl-input-default-border-width)
+        var(--gse-ui-formControl-input-default-border-style)
+        var(--gse-ui-formControl-input-default-border-color);
+      border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
+      outline: var(--gse-ui-formControl-input-focus-border-width)
+        var(--gse-ui-formControl-input-focus-border-style)
+        var(--gse-ui-formControl-input-focus-border-color);
+    }
+
     .gux-input-container {
       box-sizing: border-box;
       display: flex;
@@ -87,10 +97,6 @@ $gux-form-field-number-step-button-size: 14px;
         border: var(--gse-ui-formControl-input-active-border-width)
           var(--gse-ui-formControl-input-active-border-style)
           var(--gse-ui-formControl-input-active-border-color);
-        border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
-        outline: var(--gse-ui-formControl-input-focus-border-width)
-          var(--gse-ui-formControl-input-focus-border-style)
-          var(--gse-ui-formControl-input-focus-border-color);
       }
     }
 
diff --git a/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-number/gux-form-field-number.tsx b/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-number/gux-form-field-number.tsx
index c65b727ae..7417d184e 100644
--- a/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-number/gux-form-field-number.tsx
+++ b/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-number/gux-form-field-number.tsx
@@ -137,6 +137,7 @@ export class GuxFormFieldNumber {
         </GuxFormFieldLabel>
         <div class="gux-input-and-error-container">
           <div
+            tabIndex={1}
             class={{
               'gux-input': true,
               'gux-input-error': this.hasError
diff --git a/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-text-like/gux-form-field-text-like.scss b/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-text-like/gux-form-field-text-like.scss
index 98cd674d7..f39cbef83 100644
--- a/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-text-like/gux-form-field-text-like.scss
+++ b/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-text-like/gux-form-field-text-like.scss
@@ -50,6 +50,15 @@ slot[name='suffix'] {
   flex-grow: 1;
 
   .gux-input {
+    &:focus-visible {
+      border: var(--gse-ui-formControl-input-default-border-width)
+        var(--gse-ui-formControl-input-default-border-style)
+        var(--gse-ui-formControl-input-default-border-color);
+      border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
+      outline: var(--gse-ui-formControl-input-focus-border-width)
+        var(--gse-ui-formControl-input-focus-border-style)
+        var(--gse-ui-formControl-input-focus-border-color);
+    }
     .gux-input-container {
       box-sizing: border-box;
       display: flex;
@@ -88,10 +97,6 @@ slot[name='suffix'] {
         border: var(--gse-ui-formControl-input-active-border-width)
           var(--gse-ui-formControl-input-active-border-style)
           var(--gse-ui-formControl-input-active-border-color);
-        border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
-        outline: var(--gse-ui-formControl-input-focus-border-width)
-          var(--gse-ui-formControl-input-focus-border-style)
-          var(--gse-ui-formControl-input-focus-border-color);
       }
 
       &:hover:not(.gux-disabled) {
diff --git a/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-text-like/gux-form-field-text-like.tsx b/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-text-like/gux-form-field-text-like.tsx
index 5ff12f000..df6121e43 100644
--- a/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-text-like/gux-form-field-text-like.tsx
+++ b/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-text-like/gux-form-field-text-like.tsx
@@ -142,6 +142,7 @@ export class GuxFormFieldTextLike {
         </GuxFormFieldLabel>
         <div class="gux-input-and-error-container">
           <div
+            tabIndex={1}
             class={{
               'gux-input': true,
               'gux-input-error': this.hasError
diff --git a/packages/genesys-spark-components/src/components/stable/gux-icon/readme.md b/packages/genesys-spark-components/src/components/stable/gux-icon/readme.md
index d32db4da5..4a4130a33 100644
--- a/packages/genesys-spark-components/src/components/stable/gux-icon/readme.md
+++ b/packages/genesys-spark-components/src/components/stable/gux-icon/readme.md
@@ -10,7 +10,7 @@
 | Property           | Attribute           | Description                                                                           | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | Default     |
 | ------------------ | ------------------- | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
 | `decorative`       | `decorative`        | Indicate whether the icon should be ignored by accessibility tools or not             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `false`     |
-| `iconName`         | `icon-name`         | Indicate which icon to display                                                        | `"close" \| "link" \| "menu" \| "search" \| "video" \| "filter" \| "key" \| "chevron-small-left" \| "chevron-small-right" \| "at" \| "copy" \| "cut" \| "paste" \| "reset" \| "calendar" \| "globe" \| "chevron-small-down" \| "arrow-solid-right" \| "arrow-solid-left" \| "chevron-double-left" \| "chevron-double-right" \| "alert-warning-octogon" \| "help" \| "chevron-small-up" \| "fa/circle-info-solid" \| "fa/circle-check-solid" \| "fa/triangle-exclamation-solid" \| "fa/hexagon-exclamation-solid" \| "add" \| "checkbox" \| "grab-vertical" \| "arrow-solid-up" \| "arrow-solid-down" \| "menu-kebab-vertical" \| "badge-x" \| "badge-check" \| "clipboard" \| "unknown" \| "8x8" \| "8x8-alt" \| "add-circle" \| "agent" \| "agent-circle" \| "agent-group" \| "alert-info" \| "alert-success" \| "alert-warning-triangle" \| "android" \| "app-chart" \| "app-generic" \| "app-layout" \| "app-table" \| "apple" \| "archive" \| "arrow-down" \| "arrow-down-left" \| "arrow-down-right" \| "arrow-left" \| "arrow-right" \| "arrow-up" \| "arrow-up-left" \| "arrow-up-right" \| "attachment" \| "backspace" \| "badge-amount" \| "badge-edit" \| "badge-file" \| "badge-pause" \| "ban-outline" \| "bell" \| "bolt" \| "bot" \| "branch" \| "bug" \| "bus" \| "calendar-add" \| "calendar-clock" \| "campaign" \| "certificate" \| "chat" \| "chat-bell" \| "chat-close" \| "chat-disable" \| "chat-multi" \| "chat-notification-score" \| "checkbox-active" \| "checkbox-partial" \| "checkmark" \| "chevron-double-down" \| "chevron-double-up" \| "chevron-left" \| "chevron-right" \| "chrome" \| "cjv-badge-file" \| "cjv-calendar-clock" \| "cjv-custom-default" \| "cjv-custom-event" \| "cjv-custom-session" \| "cjv-default-event" \| "cjv-delivery" \| "cjv-finance-invoice" \| "cjv-form-abandoned" \| "cjv-form-submitted" \| "cjv-generic-application" \| "cjv-offer-closed" \| "cjv-offer-ignored" \| "cjv-offer-offered" \| "cjv-offer-opened" \| "cjv-outcome-achieved" \| "cjv-page-view" \| "cjv-policy-contract" \| "cjv-product-added" \| "cjv-product-purchased" \| "cjv-product-removed" \| "cjv-search" \| "cjv-segment" \| "cjv-segment-assigned" \| "cjv-web-session" \| "cjv-webchat-accepted" \| "cjv-webchat-error" \| "cjv-webchat-ignored" \| "cjv-webchat-offered" \| "cjv-webchat-rejected" \| "cjv-webchat-requested" \| "cjv-webchat-submitted" \| "cjv-webchat-timeout" \| "clipboard-error" \| "clipboard-success" \| "clock" \| "clock-outline" \| "clone" \| "close-circle" \| "cloud" \| "cloud-outline" \| "coaching" \| "cobrowse" \| "collapse" \| "comments" \| "comments-disable" \| "configuration" \| "control-end" \| "control-pause" \| "control-play" \| "control-skip-left" \| "control-skip-right" \| "control-slide-back" \| "control-slide-forward" \| "control-start" \| "control-stop" \| "custom/binoculars-slash-regular" \| "custom/carousel" \| "custom/clipboard-list-slash-regular" \| "custom/co-browse" \| "custom/face-smile-hearts-regular" \| "custom/file-pen-question" \| "custom/filter-notification" \| "custom/font-regular-highlight" \| "custom/list-alphabetical-regular" \| "custom/list-roman-regular" \| "custom/one-button" \| "custom/person-running" \| "custom/quick-reply" \| "custom/three-button" \| "customer-journey" \| "dash" \| "delete" \| "device-camera" \| "device-cellphone" \| "device-headphones" \| "device-laptop" \| "device-pc" \| "device-server" \| "device-tablet" \| "download" \| "edge" \| "edit" \| "email-notification-score" \| "expand" \| "export" \| "external-link" \| "fa/00-solid" \| "fa/1-regular" \| "fa/alarm-clock-regular" \| "fa/alarm-snooze-regular" \| "fa/align-center-regular" \| "fa/align-justify-regular" \| "fa/align-left-regular" \| "fa/align-right-regular" \| "fa/arrow-down-wide-short-regular" \| "fa/arrow-turn-down-right-regular" \| "fa/arrows-rotate-solid" \| "fa/arrows-to-circle-regular" \| "fa/asterix-regular" \| "fa/award-solid" \| "fa/backward-step-regular" \| "fa/ban-regular" \| "fa/bell-on-regular" \| "fa/bell-slash-regular" \| "fa/binoculars-regular" \| "fa/bold-regular" \| "fa/book-regular" \| "fa/briefcase-regular" \| "fa/bullseye-regular" \| "fa/calculator-regular" \| "fa/calendar-days-regular" \| "fa/circle-check-regular" \| "fa/circle-play-regular" \| "fa/circle-plus-solid" \| "fa/circle-xmark-regular" \| "fa/clipboard-list-regular" \| "fa/clock-nine-regular" \| "fa/clock-rotate-left-regular" \| "fa/code-branch-regular" \| "fa/code-regular" \| "fa/comment-dots-regular" \| "fa/comments-regular" \| "fa/crop-simple-regular" \| "fa/cube-regular" \| "fa/database-regular" \| "fa/diagram-nested-regular" \| "fa/diagram-project-gear-regular" \| "fa/diagram-project-regular" \| "fa/diamond-regular" \| "fa/draw-circle-solid" \| "fa/eye-regular" \| "fa/eye-slash-regular" \| "fa/face-frown-regular" \| "fa/face-frown-solid" \| "fa/face-laugh-regular" \| "fa/face-laugh-solid" \| "fa/file-chart-pie-regular" \| "fa/file-exclamation-regular" \| "fa/film-solid" \| "fa/filter-solid" \| "fa/font-regular" \| "fa/forward-step-regular" \| "fa/function-regular" \| "fa/gears-regular" \| "fa/gem-regular" \| "fa/google" \| "fa/hand-back-point-right-regular" \| "fa/hand-pointer-regular" \| "fa/hashtag-regular" \| "fa/highlighter-line-regular" \| "fa/hourglass-start-regular" \| "fa/indent-regular" \| "fa/infinity-regular" \| "fa/italic-regular" \| "fa/language-regular" \| "fa/laptop-slash-regular" \| "fa/life-ring-regular" \| "fa/link-horizontal-slash-regular" \| "fa/link-horizontal-solid" \| "fa/list-ol-regular" \| "fa/list-radio-clean-regular" \| "fa/list-radio-regular" \| "fa/list-regular" \| "fa/list-ul-regular" \| "fa/map-regular" \| "fa/map-solid" \| "fa/memo-circle-check-regular" \| "fa/message-bot-regular" \| "fa/message-regular" \| "fa/microchip-solid" \| "fa/microsoft" \| "fa/money-bill-regular" \| "fa/outdent-regular" \| "fa/pause-regular" \| "fa/pen-slash-regular" \| "fa/play-regular" \| "fa/puzzle-piece-regular" \| "fa/question-solid" \| "fa/ranking-star-regular" \| "fa/rectangle-list-regular" \| "fa/regular-user-circle-arrow-left" \| "fa/reply-regular" \| "fa/right-to-bracket-regular" \| "fa/road-regular" \| "fa/rocket-regular" \| "fa/route-regular" \| "fa/share-regular" \| "fa/shuffle-regular" \| "fa/sigma-regular" \| "fa/signs-post-regular" \| "fa/sitemap-regular" \| "fa/sliders-solid" \| "fa/square-dashed-regular" \| "fa/stop-regular" \| "fa/strikethrough-regular" \| "fa/subscript-regular" \| "fa/superscript-regular" \| "fa/text-size-regular" \| "fa/text-slash-regular" \| "fa/ticket-regular" \| "fa/underline-regular" \| "fa/user-group-solid" \| "fa/volume-regular" \| "fa/volume-xmark-regular" \| "fa/wand-magic-sparkles-regular" \| "fa/windows" \| "face-empathy" \| "face-happy" \| "face-happy-solid" \| "face-neutral" \| "face-neutral-solid" \| "face-sad" \| "face-sad-solid" \| "facebook" \| "facebook-messenger" \| "fax" \| "file" \| "file-all" \| "file-audio" \| "file-image-landscape" \| "file-image-portrait" \| "file-pdf" \| "file-preview" \| "file-report" \| "file-text" \| "file-video" \| "fire" \| "firefox" \| "flag" \| "folder" \| "folder-add" \| "folder-open" \| "follow" \| "generic" \| "grab-horizontal" \| "graph-bar-horizontal" \| "graph-bar-vertical" \| "graph-bubble" \| "graph-chart" \| "graph-line" \| "graph-pie" \| "graph-spark" \| "group-standard" \| "home" \| "hourglass" \| "import" \| "inbox" \| "inspect" \| "inspect-disable" \| "instagram" \| "internet-explorer" \| "lightbulb" \| "line-messenger" \| "linkedin" \| "linux" \| "lock" \| "lock-hold" \| "logout" \| "low-bandwidth" \| "lunch" \| "menu-kebab-horizontal" \| "message-email" \| "message-email-outbound" \| "message-forward" \| "message-reply" \| "message-reply-all" \| "microphone" \| "microphone-disable" \| "microphone-talking" \| "microsoft" \| "microsoft-teams" \| "moon" \| "music" \| "notes" \| "notification" \| "opera" \| "operator-pair" \| "paint" \| "palette" \| "parking-sign-regular" \| "people" \| "phone" \| "phone-bell" \| "phone-call-directory" \| "phone-call-history" \| "phone-callback" \| "phone-close" \| "phone-conference" \| "phone-dialpad" \| "phone-disable" \| "phone-forward" \| "phone-hangup" \| "phone-hold" \| "phone-inbound" \| "phone-missed-call" \| "phone-notification-score" \| "phone-outbound" \| "phone-success" \| "phone-voice" \| "pin" \| "pin-location" \| "post" \| "product-logo-beyond" \| "product-logo-g" \| "quote-left" \| "quote-right" \| "radio" \| "radio-active" \| "rating" \| "rating-active" \| "rating-partial" \| "record" \| "refresh" \| "resource" \| "retweet" \| "roster-chat" \| "roster-chat-disable" \| "roster-email" \| "roster-email-disable" \| "roster-instagram" \| "roster-instagram-disable" \| "roster-line" \| "roster-line-disable" \| "roster-message" \| "roster-message-disable" \| "roster-messenger" \| "roster-messenger-disable" \| "roster-phone" \| "roster-phone-disable" \| "roster-sms" \| "roster-sms-disable" \| "roster-twitter" \| "roster-twitter-disable" \| "roster-wechat" \| "roster-wechat-disable" \| "roster-whatsapp" \| "roster-whatsapp-disable" \| "rss" \| "run" \| "safari" \| "save" \| "screen-share-regular" \| "screen-share-slash" \| "scripter" \| "send" \| "server" \| "settings" \| "share" \| "shield-lock" \| "shield-outline" \| "shield-solid" \| "site" \| "skills" \| "slideshare" \| "sms" \| "sms-cancel" \| "sms-close" \| "stamp" \| "subtract" \| "subtract-circle" \| "sun" \| "tag" \| "tag-add" \| "tag-remove" \| "telegram" \| "tenant" \| "thumbs-down" \| "thumbs-up" \| "timeline" \| "toolbar-apps" \| "toolbar-apps-disable" \| "toolbar-assist" \| "toolbar-assist-disable" \| "toolbar-chat" \| "toolbar-chat-disable" \| "toolbar-favorite" \| "toolbar-favourite" \| "toolbar-help" \| "toolbar-inbox" \| "toolbar-interactions" \| "toolbar-interactions-disable" \| "toolbar-notification" \| "toolbar-phone" \| "toolbar-phone-active-1" \| "toolbar-phone-active-2" \| "toolbar-phone-active-3" \| "toolbar-phone-disable" \| "toolbar-video" \| "toolbar-video-disable" \| "trade" \| "transfer" \| "twitter" \| "unlink" \| "unlock" \| "upload" \| "user" \| "user-add" \| "user-circle" \| "user-contact-id" \| "user-directory" \| "user-group" \| "user-interactions" \| "user-interactions-disable" \| "viber" \| "video-disable" \| "view-all" \| "view-cells" \| "view-grid" \| "view-list" \| "view-lists" \| "view-roster" \| "view-stacked" \| "voicemail" \| "volume-disable" \| "volume-down" \| "volume-none" \| "volume-up" \| "web" \| "webcam" \| "webcam-disable" \| "wechat" \| "whatsapp" \| "window-actual-size" \| "window-contract" \| "window-drag-out" \| "window-expand" \| "window-fullscreen" \| "window-popout" \| "wordpress" \| "youtube" \| "zoom-in" \| "zoom-out"` | `undefined` |
+| `iconName`         | `icon-name`         | Indicate which icon to display                                                        | `"reset" \| "8x8" \| "8x8-alt" \| "add" \| "add-circle" \| "agent" \| "agent-circle" \| "agent-group" \| "alert-info" \| "alert-success" \| "alert-warning-octogon" \| "alert-warning-triangle" \| "android" \| "app-chart" \| "app-generic" \| "app-layout" \| "app-table" \| "apple" \| "archive" \| "arrow-down" \| "arrow-down-left" \| "arrow-down-right" \| "arrow-left" \| "arrow-right" \| "arrow-solid-down" \| "arrow-solid-left" \| "arrow-solid-right" \| "arrow-solid-up" \| "arrow-up" \| "arrow-up-left" \| "arrow-up-right" \| "at" \| "attachment" \| "backspace" \| "badge-amount" \| "badge-check" \| "badge-edit" \| "badge-file" \| "badge-pause" \| "badge-x" \| "ban-outline" \| "bell" \| "bolt" \| "bot" \| "branch" \| "bug" \| "bus" \| "calendar" \| "calendar-add" \| "calendar-clock" \| "campaign" \| "certificate" \| "chat" \| "chat-bell" \| "chat-close" \| "chat-disable" \| "chat-multi" \| "chat-notification-score" \| "checkbox" \| "checkbox-active" \| "checkbox-partial" \| "checkmark" \| "chevron-double-down" \| "chevron-double-left" \| "chevron-double-right" \| "chevron-double-up" \| "chevron-left" \| "chevron-right" \| "chevron-small-down" \| "chevron-small-left" \| "chevron-small-right" \| "chevron-small-up" \| "chrome" \| "cjv-badge-file" \| "cjv-calendar-clock" \| "cjv-custom-default" \| "cjv-custom-event" \| "cjv-custom-session" \| "cjv-default-event" \| "cjv-delivery" \| "cjv-finance-invoice" \| "cjv-form-abandoned" \| "cjv-form-submitted" \| "cjv-generic-application" \| "cjv-offer-closed" \| "cjv-offer-ignored" \| "cjv-offer-offered" \| "cjv-offer-opened" \| "cjv-outcome-achieved" \| "cjv-page-view" \| "cjv-policy-contract" \| "cjv-product-added" \| "cjv-product-purchased" \| "cjv-product-removed" \| "cjv-search" \| "cjv-segment" \| "cjv-segment-assigned" \| "cjv-web-session" \| "cjv-webchat-accepted" \| "cjv-webchat-error" \| "cjv-webchat-ignored" \| "cjv-webchat-offered" \| "cjv-webchat-rejected" \| "cjv-webchat-requested" \| "cjv-webchat-submitted" \| "cjv-webchat-timeout" \| "clipboard" \| "clipboard-error" \| "clipboard-success" \| "clock" \| "clock-outline" \| "clone" \| "close" \| "close-circle" \| "cloud" \| "cloud-outline" \| "coaching" \| "cobrowse" \| "collapse" \| "comments" \| "comments-disable" \| "configuration" \| "control-end" \| "control-pause" \| "control-play" \| "control-skip-left" \| "control-skip-right" \| "control-slide-back" \| "control-slide-forward" \| "control-start" \| "control-stop" \| "copy" \| "custom/binoculars-slash-regular" \| "custom/carousel" \| "custom/clipboard-list-slash-regular" \| "custom/co-browse" \| "custom/face-smile-hearts-regular" \| "custom/file-pen-question" \| "custom/filter-notification" \| "custom/font-regular-highlight" \| "custom/list-alphabetical-regular" \| "custom/list-roman-regular" \| "custom/one-button" \| "custom/person-running" \| "custom/quick-reply" \| "custom/three-button" \| "customer-journey" \| "cut" \| "dash" \| "delete" \| "device-camera" \| "device-cellphone" \| "device-headphones" \| "device-laptop" \| "device-pc" \| "device-server" \| "device-tablet" \| "download" \| "edge" \| "edit" \| "email-notification-score" \| "expand" \| "export" \| "external-link" \| "fa/00-solid" \| "fa/1-regular" \| "fa/alarm-clock-regular" \| "fa/alarm-snooze-regular" \| "fa/align-center-regular" \| "fa/align-justify-regular" \| "fa/align-left-regular" \| "fa/align-right-regular" \| "fa/arrow-down-wide-short-regular" \| "fa/arrow-turn-down-right-regular" \| "fa/arrows-rotate-solid" \| "fa/arrows-to-circle-regular" \| "fa/asterix-regular" \| "fa/award-solid" \| "fa/backward-step-regular" \| "fa/ban-regular" \| "fa/bell-on-regular" \| "fa/bell-slash-regular" \| "fa/binoculars-regular" \| "fa/bold-regular" \| "fa/book-regular" \| "fa/briefcase-regular" \| "fa/bullseye-regular" \| "fa/calculator-regular" \| "fa/calendar-days-regular" \| "fa/circle-check-regular" \| "fa/circle-check-solid" \| "fa/circle-info-solid" \| "fa/circle-play-regular" \| "fa/circle-plus-solid" \| "fa/circle-xmark-regular" \| "fa/clipboard-list-regular" \| "fa/clock-nine-regular" \| "fa/clock-rotate-left-regular" \| "fa/code-branch-regular" \| "fa/code-regular" \| "fa/comment-dots-regular" \| "fa/comments-regular" \| "fa/crop-simple-regular" \| "fa/cube-regular" \| "fa/database-regular" \| "fa/diagram-nested-regular" \| "fa/diagram-project-gear-regular" \| "fa/diagram-project-regular" \| "fa/diamond-regular" \| "fa/draw-circle-solid" \| "fa/eye-regular" \| "fa/eye-slash-regular" \| "fa/face-frown-regular" \| "fa/face-frown-solid" \| "fa/face-laugh-regular" \| "fa/face-laugh-solid" \| "fa/file-chart-pie-regular" \| "fa/file-exclamation-regular" \| "fa/film-solid" \| "fa/filter-solid" \| "fa/font-regular" \| "fa/forward-step-regular" \| "fa/function-regular" \| "fa/gears-regular" \| "fa/gem-regular" \| "fa/google" \| "fa/hand-back-point-right-regular" \| "fa/hand-pointer-regular" \| "fa/hashtag-regular" \| "fa/hexagon-exclamation-solid" \| "fa/highlighter-line-regular" \| "fa/hourglass-start-regular" \| "fa/indent-regular" \| "fa/infinity-regular" \| "fa/italic-regular" \| "fa/language-regular" \| "fa/laptop-slash-regular" \| "fa/life-ring-regular" \| "fa/link-horizontal-slash-regular" \| "fa/link-horizontal-solid" \| "fa/list-ol-regular" \| "fa/list-radio-clean-regular" \| "fa/list-radio-regular" \| "fa/list-regular" \| "fa/list-ul-regular" \| "fa/map-regular" \| "fa/map-solid" \| "fa/memo-circle-check-regular" \| "fa/message-bot-regular" \| "fa/message-regular" \| "fa/microchip-solid" \| "fa/microsoft" \| "fa/money-bill-regular" \| "fa/outdent-regular" \| "fa/pause-regular" \| "fa/pen-slash-regular" \| "fa/play-regular" \| "fa/puzzle-piece-regular" \| "fa/question-solid" \| "fa/ranking-star-regular" \| "fa/rectangle-list-regular" \| "fa/regular-user-circle-arrow-left" \| "fa/reply-regular" \| "fa/right-to-bracket-regular" \| "fa/road-regular" \| "fa/rocket-regular" \| "fa/route-regular" \| "fa/share-regular" \| "fa/shuffle-regular" \| "fa/sigma-regular" \| "fa/signs-post-regular" \| "fa/sitemap-regular" \| "fa/sliders-solid" \| "fa/square-dashed-regular" \| "fa/stop-regular" \| "fa/strikethrough-regular" \| "fa/subscript-regular" \| "fa/superscript-regular" \| "fa/text-size-regular" \| "fa/text-slash-regular" \| "fa/ticket-regular" \| "fa/triangle-exclamation-solid" \| "fa/underline-regular" \| "fa/user-group-solid" \| "fa/volume-regular" \| "fa/volume-xmark-regular" \| "fa/wand-magic-sparkles-regular" \| "fa/windows" \| "face-empathy" \| "face-happy" \| "face-happy-solid" \| "face-neutral" \| "face-neutral-solid" \| "face-sad" \| "face-sad-solid" \| "facebook" \| "facebook-messenger" \| "fax" \| "file" \| "file-all" \| "file-audio" \| "file-image-landscape" \| "file-image-portrait" \| "file-pdf" \| "file-preview" \| "file-report" \| "file-text" \| "file-video" \| "filter" \| "fire" \| "firefox" \| "flag" \| "folder" \| "folder-add" \| "folder-open" \| "follow" \| "generic" \| "globe" \| "grab-horizontal" \| "grab-vertical" \| "graph-bar-horizontal" \| "graph-bar-vertical" \| "graph-bubble" \| "graph-chart" \| "graph-line" \| "graph-pie" \| "graph-spark" \| "group-standard" \| "help" \| "home" \| "hourglass" \| "import" \| "inbox" \| "inspect" \| "inspect-disable" \| "instagram" \| "internet-explorer" \| "key" \| "lightbulb" \| "line-messenger" \| "link" \| "linkedin" \| "linux" \| "lock" \| "lock-hold" \| "logout" \| "low-bandwidth" \| "lunch" \| "menu" \| "menu-kebab-horizontal" \| "menu-kebab-vertical" \| "message-email" \| "message-email-outbound" \| "message-forward" \| "message-reply" \| "message-reply-all" \| "microphone" \| "microphone-disable" \| "microphone-talking" \| "microsoft" \| "microsoft-teams" \| "moon" \| "music" \| "notes" \| "notification" \| "opera" \| "operator-pair" \| "paint" \| "palette" \| "parking-sign-regular" \| "paste" \| "people" \| "phone" \| "phone-bell" \| "phone-call-directory" \| "phone-call-history" \| "phone-callback" \| "phone-close" \| "phone-conference" \| "phone-dialpad" \| "phone-disable" \| "phone-forward" \| "phone-hangup" \| "phone-hold" \| "phone-inbound" \| "phone-missed-call" \| "phone-notification-score" \| "phone-outbound" \| "phone-success" \| "phone-voice" \| "pin" \| "pin-location" \| "post" \| "product-logo-beyond" \| "product-logo-g" \| "quote-left" \| "quote-right" \| "radio" \| "radio-active" \| "rating" \| "rating-active" \| "rating-partial" \| "record" \| "refresh" \| "resource" \| "retweet" \| "roster-chat" \| "roster-chat-disable" \| "roster-email" \| "roster-email-disable" \| "roster-instagram" \| "roster-instagram-disable" \| "roster-line" \| "roster-line-disable" \| "roster-message" \| "roster-message-disable" \| "roster-messenger" \| "roster-messenger-disable" \| "roster-phone" \| "roster-phone-disable" \| "roster-sms" \| "roster-sms-disable" \| "roster-twitter" \| "roster-twitter-disable" \| "roster-wechat" \| "roster-wechat-disable" \| "roster-whatsapp" \| "roster-whatsapp-disable" \| "rss" \| "run" \| "safari" \| "save" \| "screen-share-regular" \| "screen-share-slash" \| "scripter" \| "search" \| "send" \| "server" \| "settings" \| "share" \| "shield-lock" \| "shield-outline" \| "shield-solid" \| "site" \| "skills" \| "slideshare" \| "sms" \| "sms-cancel" \| "sms-close" \| "stamp" \| "subtract" \| "subtract-circle" \| "sun" \| "tag" \| "tag-add" \| "tag-remove" \| "telegram" \| "tenant" \| "thumbs-down" \| "thumbs-up" \| "timeline" \| "toolbar-apps" \| "toolbar-apps-disable" \| "toolbar-assist" \| "toolbar-assist-disable" \| "toolbar-chat" \| "toolbar-chat-disable" \| "toolbar-favorite" \| "toolbar-favourite" \| "toolbar-help" \| "toolbar-inbox" \| "toolbar-interactions" \| "toolbar-interactions-disable" \| "toolbar-notification" \| "toolbar-phone" \| "toolbar-phone-active-1" \| "toolbar-phone-active-2" \| "toolbar-phone-active-3" \| "toolbar-phone-disable" \| "toolbar-video" \| "toolbar-video-disable" \| "trade" \| "transfer" \| "twitter" \| "unknown" \| "unlink" \| "unlock" \| "upload" \| "user" \| "user-add" \| "user-circle" \| "user-contact-id" \| "user-directory" \| "user-group" \| "user-interactions" \| "user-interactions-disable" \| "viber" \| "video" \| "video-disable" \| "view-all" \| "view-cells" \| "view-grid" \| "view-list" \| "view-lists" \| "view-roster" \| "view-stacked" \| "voicemail" \| "volume-disable" \| "volume-down" \| "volume-none" \| "volume-up" \| "web" \| "webcam" \| "webcam-disable" \| "wechat" \| "whatsapp" \| "window-actual-size" \| "window-contract" \| "window-drag-out" \| "window-expand" \| "window-fullscreen" \| "window-popout" \| "wordpress" \| "youtube" \| "zoom-in" \| "zoom-out"` | `undefined` |
 | `screenreaderText` | `screenreader-text` | Localized text describing the intent of this icon (not required if `decorative=true`) | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `''`        |
 
 

From fea76e2e2f8948ae15a0927c0f6b7f6ea0d291bc Mon Sep 17 00:00:00 2001
From: Gavin Everett <gavin.everett@genesys.com>
Date: Mon, 16 Oct 2023 09:57:11 +0100
Subject: [PATCH 2/2] test(inputs): update focus stylings

update focus stylings

COMUI-2348
---
 .../gux-pagination-buttons.spec.ts.snap       |  6 ++--
 .../gux-form-field-number.e2e.ts.snap         | 26 +++++++-------
 .../gux-form-field-number.spec.ts.snap        | 26 +++++++-------
 .../gux-form-field-text-like.e2e.ts.snap      | 36 +++++++++----------
 .../gux-form-field-text-like.spec.ts.snap     | 36 +++++++++----------
 5 files changed, 65 insertions(+), 65 deletions(-)

diff --git a/packages/genesys-spark-components/src/components/legacy/gux-pagination-legacy/gux-pagination-buttons-legacy/tests/__snapshots__/gux-pagination-buttons.spec.ts.snap b/packages/genesys-spark-components/src/components/legacy/gux-pagination-legacy/gux-pagination-buttons-legacy/tests/__snapshots__/gux-pagination-buttons.spec.ts.snap
index 12fa60335..5607bea7c 100644
--- a/packages/genesys-spark-components/src/components/legacy/gux-pagination-legacy/gux-pagination-buttons-legacy/tests/__snapshots__/gux-pagination-buttons.spec.ts.snap
+++ b/packages/genesys-spark-components/src/components/legacy/gux-pagination-legacy/gux-pagination-buttons-legacy/tests/__snapshots__/gux-pagination-buttons.spec.ts.snap
@@ -27,7 +27,7 @@ exports[`gux-pagination-item-counts-legacy #render should render as expected (1)
                 <slot name="label"></slot>
               </div>
               <div class="gux-input-and-error-container">
-                <div class="gux-input">
+                <div class="gux-input" tabindex="1">
                   <div class="gux-input-container">
                     <slot name="prefix"></slot>
                     <slot name="input"></slot>
@@ -101,7 +101,7 @@ exports[`gux-pagination-item-counts-legacy #render should render as expected (2)
                 <slot name="label"></slot>
               </div>
               <div class="gux-input-and-error-container">
-                <div class="gux-input">
+                <div class="gux-input" tabindex="1">
                   <div class="gux-input-container">
                     <slot name="prefix"></slot>
                     <slot name="input"></slot>
@@ -175,7 +175,7 @@ exports[`gux-pagination-item-counts-legacy #render should render as expected (3)
                 <slot name="label"></slot>
               </div>
               <div class="gux-input-and-error-container">
-                <div class="gux-input">
+                <div class="gux-input" tabindex="1">
                   <div class="gux-input-container">
                     <slot name="prefix"></slot>
                     <slot name="input"></slot>
diff --git a/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-number/tests/__snapshots__/gux-form-field-number.e2e.ts.snap b/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-number/tests/__snapshots__/gux-form-field-number.e2e.ts.snap
index b5d870be7..c8aa06b2b 100644
--- a/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-number/tests/__snapshots__/gux-form-field-number.e2e.ts.snap
+++ b/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-number/tests/__snapshots__/gux-form-field-number.e2e.ts.snap
@@ -8,7 +8,7 @@ exports[`gux-form-field-number #render clearable should render component as expe
     <slot name="label"></slot>
   </div>
   <div class="gux-input-and-error-container">
-    <div class="gux-input" part="input-section">
+    <div class="gux-input" part="input-section" tabindex="1">
       <div class="gux-input-container">
         <slot name="input"></slot>
       </div>
@@ -44,7 +44,7 @@ exports[`gux-form-field-number #render clearable should render component as expe
     <slot name="label"></slot>
   </div>
   <div class="gux-input-and-error-container">
-    <div class="gux-input" part="input-section">
+    <div class="gux-input" part="input-section" tabindex="1">
       <div class="gux-clear gux-input-container">
         <slot name="input"></slot>
         <gux-form-field-input-clear-button hydrated=""></gux-form-field-input-clear-button>
@@ -81,7 +81,7 @@ exports[`gux-form-field-number #render clearable should render component as expe
     <slot name="label"></slot>
   </div>
   <div class="gux-input-and-error-container">
-    <div class="gux-input" part="input-section">
+    <div class="gux-input" part="input-section" tabindex="1">
       <div class="gux-clear gux-input-container">
         <slot name="input"></slot>
         <gux-form-field-input-clear-button hydrated=""></gux-form-field-input-clear-button>
@@ -118,7 +118,7 @@ exports[`gux-form-field-number #render clearable should render component as expe
     <slot name="label"></slot>
   </div>
   <div class="gux-input-and-error-container">
-    <div class="gux-input" part="input-section">
+    <div class="gux-input" part="input-section" tabindex="1">
       <div class="gux-input-container">
         <slot name="input"></slot>
       </div>
@@ -154,7 +154,7 @@ exports[`gux-form-field-number #render clearable should render component as expe
     <slot name="label"></slot>
   </div>
   <div class="gux-input-and-error-container">
-    <div class="gux-input" part="input-section">
+    <div class="gux-input" part="input-section" tabindex="1">
       <div class="gux-disabled gux-input-container">
         <slot name="input"></slot>
       </div>
@@ -190,7 +190,7 @@ exports[`gux-form-field-number #render help should render component as expected
     <slot name="label"></slot>
   </div>
   <div class="gux-input-and-error-container">
-    <div class="gux-input" part="input-section">
+    <div class="gux-input" part="input-section" tabindex="1">
       <div class="gux-input-container">
         <slot name="input"></slot>
       </div>
@@ -226,7 +226,7 @@ exports[`gux-form-field-number #render input attributes should render component
     <slot name="label"></slot>
   </div>
   <div class="gux-input-and-error-container">
-    <div class="gux-input" part="input-section">
+    <div class="gux-input" part="input-section" tabindex="1">
       <div class="gux-input-container">
         <slot name="input"></slot>
       </div>
@@ -262,7 +262,7 @@ exports[`gux-form-field-number #render input attributes should render component
     <slot name="label"></slot>
   </div>
   <div class="gux-input-and-error-container">
-    <div class="gux-input" part="input-section">
+    <div class="gux-input" part="input-section" tabindex="1">
       <div class="gux-disabled gux-input-container">
         <slot name="input"></slot>
       </div>
@@ -298,7 +298,7 @@ exports[`gux-form-field-number #render input attributes should render component
     <slot name="label"></slot>
   </div>
   <div class="gux-input-and-error-container">
-    <div class="gux-input" part="input-section">
+    <div class="gux-input" part="input-section" tabindex="1">
       <div class="gux-input-container">
         <slot name="input"></slot>
       </div>
@@ -334,7 +334,7 @@ exports[`gux-form-field-number #render label-position should render component as
     <slot name="label"></slot>
   </div>
   <div class="gux-input-and-error-container">
-    <div class="gux-input" part="input-section">
+    <div class="gux-input" part="input-section" tabindex="1">
       <div class="gux-input-container">
         <slot name="input"></slot>
       </div>
@@ -370,7 +370,7 @@ exports[`gux-form-field-number #render label-position should render component as
     <slot name="label"></slot>
   </div>
   <div class="gux-input-and-error-container">
-    <div class="gux-input" part="input-section">
+    <div class="gux-input" part="input-section" tabindex="1">
       <div class="gux-input-container">
         <slot name="input"></slot>
       </div>
@@ -406,7 +406,7 @@ exports[`gux-form-field-number #render label-position should render component as
     <slot name="label"></slot>
   </div>
   <div class="gux-input-and-error-container">
-    <div class="gux-input" part="input-section">
+    <div class="gux-input" part="input-section" tabindex="1">
       <div class="gux-input-container">
         <slot name="input"></slot>
       </div>
@@ -442,7 +442,7 @@ exports[`gux-form-field-number #render label-position should render component as
     <slot name="label"></slot>
   </div>
   <div class="gux-input-and-error-container">
-    <div class="gux-input" part="input-section">
+    <div class="gux-input" part="input-section" tabindex="1">
       <div class="gux-input-container">
         <slot name="input"></slot>
       </div>
diff --git a/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-number/tests/__snapshots__/gux-form-field-number.spec.ts.snap b/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-number/tests/__snapshots__/gux-form-field-number.spec.ts.snap
index 7ad10519b..f7a7c224b 100644
--- a/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-number/tests/__snapshots__/gux-form-field-number.spec.ts.snap
+++ b/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-number/tests/__snapshots__/gux-form-field-number.spec.ts.snap
@@ -8,7 +8,7 @@ exports[`gux-form-field-number #render clearable should render component as expe
         <slot name="label"></slot>
       </div>
       <div class="gux-input-and-error-container">
-        <div class="gux-input" part="input-section">
+        <div class="gux-input" part="input-section" tabindex="1">
           <div class="gux-input-container">
             <slot name="input"></slot>
           </div>
@@ -50,7 +50,7 @@ exports[`gux-form-field-number #render clearable should render component as expe
         <slot name="label"></slot>
       </div>
       <div class="gux-input-and-error-container">
-        <div class="gux-input" part="input-section">
+        <div class="gux-input" part="input-section" tabindex="1">
           <div class="gux-clear gux-input-container">
             <slot name="input"></slot>
             <gux-form-field-input-clear-button></gux-form-field-input-clear-button>
@@ -93,7 +93,7 @@ exports[`gux-form-field-number #render clearable should render component as expe
         <slot name="label"></slot>
       </div>
       <div class="gux-input-and-error-container">
-        <div class="gux-input" part="input-section">
+        <div class="gux-input" part="input-section" tabindex="1">
           <div class="gux-clear gux-input-container">
             <slot name="input"></slot>
             <gux-form-field-input-clear-button></gux-form-field-input-clear-button>
@@ -136,7 +136,7 @@ exports[`gux-form-field-number #render clearable should render component as expe
         <slot name="label"></slot>
       </div>
       <div class="gux-input-and-error-container">
-        <div class="gux-input" part="input-section">
+        <div class="gux-input" part="input-section" tabindex="1">
           <div class="gux-input-container">
             <slot name="input"></slot>
           </div>
@@ -178,7 +178,7 @@ exports[`gux-form-field-number #render clearable should render component as expe
         <slot name="label"></slot>
       </div>
       <div class="gux-input-and-error-container">
-        <div class="gux-input" part="input-section">
+        <div class="gux-input" part="input-section" tabindex="1">
           <div class="gux-disabled gux-input-container">
             <slot name="input"></slot>
           </div>
@@ -220,7 +220,7 @@ exports[`gux-form-field-number #render help should render component as expected
         <slot name="label"></slot>
       </div>
       <div class="gux-input-and-error-container">
-        <div class="gux-input" part="input-section">
+        <div class="gux-input" part="input-section" tabindex="1">
           <div class="gux-input-container">
             <slot name="input"></slot>
           </div>
@@ -265,7 +265,7 @@ exports[`gux-form-field-number #render input attributes should render component
         <slot name="label"></slot>
       </div>
       <div class="gux-input-and-error-container">
-        <div class="gux-input" part="input-section">
+        <div class="gux-input" part="input-section" tabindex="1">
           <div class="gux-input-container">
             <slot name="input"></slot>
           </div>
@@ -307,7 +307,7 @@ exports[`gux-form-field-number #render input attributes should render component
         <slot name="label"></slot>
       </div>
       <div class="gux-input-and-error-container">
-        <div class="gux-input" part="input-section">
+        <div class="gux-input" part="input-section" tabindex="1">
           <div class="gux-disabled gux-input-container">
             <slot name="input"></slot>
           </div>
@@ -349,7 +349,7 @@ exports[`gux-form-field-number #render input attributes should render component
         <slot name="label"></slot>
       </div>
       <div class="gux-input-and-error-container">
-        <div class="gux-input" part="input-section">
+        <div class="gux-input" part="input-section" tabindex="1">
           <div class="gux-input-container">
             <slot name="input"></slot>
           </div>
@@ -391,7 +391,7 @@ exports[`gux-form-field-number #render label-position should render component as
         <slot name="label"></slot>
       </div>
       <div class="gux-input-and-error-container">
-        <div class="gux-input" part="input-section">
+        <div class="gux-input" part="input-section" tabindex="1">
           <div class="gux-input-container">
             <slot name="input"></slot>
           </div>
@@ -433,7 +433,7 @@ exports[`gux-form-field-number #render label-position should render component as
         <slot name="label"></slot>
       </div>
       <div class="gux-input-and-error-container">
-        <div class="gux-input" part="input-section">
+        <div class="gux-input" part="input-section" tabindex="1">
           <div class="gux-input-container">
             <slot name="input"></slot>
           </div>
@@ -475,7 +475,7 @@ exports[`gux-form-field-number #render label-position should render component as
         <slot name="label"></slot>
       </div>
       <div class="gux-input-and-error-container">
-        <div class="gux-input" part="input-section">
+        <div class="gux-input" part="input-section" tabindex="1">
           <div class="gux-input-container">
             <slot name="input"></slot>
           </div>
@@ -517,7 +517,7 @@ exports[`gux-form-field-number #render label-position should render component as
         <slot name="label"></slot>
       </div>
       <div class="gux-input-and-error-container">
-        <div class="gux-input" part="input-section">
+        <div class="gux-input" part="input-section" tabindex="1">
           <div class="gux-input-container">
             <slot name="input"></slot>
           </div>
diff --git a/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-text-like/tests/__snapshots__/gux-form-field-text-like.e2e.ts.snap b/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-text-like/tests/__snapshots__/gux-form-field-text-like.e2e.ts.snap
index bed12306a..bca46666b 100644
--- a/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-text-like/tests/__snapshots__/gux-form-field-text-like.e2e.ts.snap
+++ b/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-text-like/tests/__snapshots__/gux-form-field-text-like.e2e.ts.snap
@@ -8,7 +8,7 @@ exports[`gux-form-field-text-like #render clearable should render component as e
     <slot name="label"></slot>
   </div>
   <div class="gux-input-and-error-container">
-    <div class="gux-input">
+    <div class="gux-input" tabindex="1">
       <div class="gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
@@ -38,7 +38,7 @@ exports[`gux-form-field-text-like #render clearable should render component as e
     <slot name="label"></slot>
   </div>
   <div class="gux-input-and-error-container">
-    <div class="gux-input">
+    <div class="gux-input" tabindex="1">
       <div class="gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
@@ -69,7 +69,7 @@ exports[`gux-form-field-text-like #render clearable should render component as e
     <slot name="label"></slot>
   </div>
   <div class="gux-input-and-error-container">
-    <div class="gux-input">
+    <div class="gux-input" tabindex="1">
       <div class="gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
@@ -100,7 +100,7 @@ exports[`gux-form-field-text-like #render clearable should render component as e
     <slot name="label"></slot>
   </div>
   <div class="gux-input-and-error-container">
-    <div class="gux-input">
+    <div class="gux-input" tabindex="1">
       <div class="gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
@@ -130,7 +130,7 @@ exports[`gux-form-field-text-like #render clearable should render component as e
     <slot name="label"></slot>
   </div>
   <div class="gux-input-and-error-container">
-    <div class="gux-input">
+    <div class="gux-input" tabindex="1">
       <div class="gux-disabled gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
@@ -160,7 +160,7 @@ exports[`gux-form-field-text-like #render help should render component as expect
     <slot name="label"></slot>
   </div>
   <div class="gux-input-and-error-container">
-    <div class="gux-input">
+    <div class="gux-input" tabindex="1">
       <div class="gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
@@ -190,7 +190,7 @@ exports[`gux-form-field-text-like #render input type attribute should render com
     <slot name="label"></slot>
   </div>
   <div class="gux-input-and-error-container">
-    <div class="gux-input">
+    <div class="gux-input" tabindex="1">
       <div class="gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
@@ -220,7 +220,7 @@ exports[`gux-form-field-text-like #render input type attribute should render com
     <slot name="label"></slot>
   </div>
   <div class="gux-input-and-error-container">
-    <div class="gux-input">
+    <div class="gux-input" tabindex="1">
       <div class="gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
@@ -250,7 +250,7 @@ exports[`gux-form-field-text-like #render input type attribute should render com
     <slot name="label"></slot>
   </div>
   <div class="gux-input-and-error-container">
-    <div class="gux-input">
+    <div class="gux-input" tabindex="1">
       <div class="gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
@@ -280,7 +280,7 @@ exports[`gux-form-field-text-like #render label-position should render component
     <slot name="label"></slot>
   </div>
   <div class="gux-input-and-error-container">
-    <div class="gux-input">
+    <div class="gux-input" tabindex="1">
       <div class="gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
@@ -310,7 +310,7 @@ exports[`gux-form-field-text-like #render label-position should render component
     <slot name="label"></slot>
   </div>
   <div class="gux-input-and-error-container">
-    <div class="gux-input">
+    <div class="gux-input" tabindex="1">
       <div class="gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
@@ -340,7 +340,7 @@ exports[`gux-form-field-text-like #render label-position should render component
     <slot name="label"></slot>
   </div>
   <div class="gux-input-and-error-container">
-    <div class="gux-input">
+    <div class="gux-input" tabindex="1">
       <div class="gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
@@ -370,7 +370,7 @@ exports[`gux-form-field-text-like #render label-position should render component
     <slot name="label"></slot>
   </div>
   <div class="gux-input-and-error-container">
-    <div class="gux-input">
+    <div class="gux-input" tabindex="1">
       <div class="gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
@@ -400,7 +400,7 @@ exports[`gux-form-field-text-like #render prefix should render component as expe
     <slot name="label"></slot>
   </div>
   <div class="gux-input-and-error-container">
-    <div class="gux-input">
+    <div class="gux-input" tabindex="1">
       <div class="gux-has-prefix gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
@@ -430,7 +430,7 @@ exports[`gux-form-field-text-like #render suffix should render component as expe
     <slot name="label"></slot>
   </div>
   <div class="gux-input-and-error-container">
-    <div class="gux-input">
+    <div class="gux-input" tabindex="1">
       <div class="gux-has-suffix gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
@@ -460,7 +460,7 @@ exports[`gux-form-field-text-like input attributes should render component as ex
     <slot name="label"></slot>
   </div>
   <div class="gux-input-and-error-container">
-    <div class="gux-input">
+    <div class="gux-input" tabindex="1">
       <div class="gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
@@ -490,7 +490,7 @@ exports[`gux-form-field-text-like input attributes should render component as ex
     <slot name="label"></slot>
   </div>
   <div class="gux-input-and-error-container">
-    <div class="gux-input">
+    <div class="gux-input" tabindex="1">
       <div class="gux-disabled gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
@@ -520,7 +520,7 @@ exports[`gux-form-field-text-like input attributes should render component as ex
     <slot name="label"></slot>
   </div>
   <div class="gux-input-and-error-container">
-    <div class="gux-input">
+    <div class="gux-input" tabindex="1">
       <div class="gux-input-container">
         <slot name="prefix"></slot>
         <slot name="input"></slot>
diff --git a/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-text-like/tests/__snapshots__/gux-form-field-text-like.spec.ts.snap b/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-text-like/tests/__snapshots__/gux-form-field-text-like.spec.ts.snap
index e710d4e39..ae4bfc057 100644
--- a/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-text-like/tests/__snapshots__/gux-form-field-text-like.spec.ts.snap
+++ b/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-text-like/tests/__snapshots__/gux-form-field-text-like.spec.ts.snap
@@ -8,7 +8,7 @@ exports[`gux-form-field-text-like #render clearable should render component as e
         <slot name="label"></slot>
       </div>
       <div class="gux-input-and-error-container">
-        <div class="gux-input">
+        <div class="gux-input" tabindex="1">
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
@@ -44,7 +44,7 @@ exports[`gux-form-field-text-like #render clearable should render component as e
         <slot name="label"></slot>
       </div>
       <div class="gux-input-and-error-container">
-        <div class="gux-input">
+        <div class="gux-input" tabindex="1">
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
@@ -81,7 +81,7 @@ exports[`gux-form-field-text-like #render clearable should render component as e
         <slot name="label"></slot>
       </div>
       <div class="gux-input-and-error-container">
-        <div class="gux-input">
+        <div class="gux-input" tabindex="1">
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
@@ -118,7 +118,7 @@ exports[`gux-form-field-text-like #render clearable should render component as e
         <slot name="label"></slot>
       </div>
       <div class="gux-input-and-error-container">
-        <div class="gux-input">
+        <div class="gux-input" tabindex="1">
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
@@ -154,7 +154,7 @@ exports[`gux-form-field-text-like #render clearable should render component as e
         <slot name="label"></slot>
       </div>
       <div class="gux-input-and-error-container">
-        <div class="gux-input">
+        <div class="gux-input" tabindex="1">
           <div class="gux-disabled gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
@@ -190,7 +190,7 @@ exports[`gux-form-field-text-like #render help should render component as expect
         <slot name="label"></slot>
       </div>
       <div class="gux-input-and-error-container">
-        <div class="gux-input">
+        <div class="gux-input" tabindex="1">
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
@@ -229,7 +229,7 @@ exports[`gux-form-field-text-like #render input attributes should render compone
         <slot name="label"></slot>
       </div>
       <div class="gux-input-and-error-container">
-        <div class="gux-input">
+        <div class="gux-input" tabindex="1">
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
@@ -265,7 +265,7 @@ exports[`gux-form-field-text-like #render input attributes should render compone
         <slot name="label"></slot>
       </div>
       <div class="gux-input-and-error-container">
-        <div class="gux-input">
+        <div class="gux-input" tabindex="1">
           <div class="gux-disabled gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
@@ -301,7 +301,7 @@ exports[`gux-form-field-text-like #render input attributes should render compone
         <slot name="label"></slot>
       </div>
       <div class="gux-input-and-error-container">
-        <div class="gux-input">
+        <div class="gux-input" tabindex="1">
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
@@ -337,7 +337,7 @@ exports[`gux-form-field-text-like #render input type attribute should render com
         <slot name="label"></slot>
       </div>
       <div class="gux-input-and-error-container">
-        <div class="gux-input">
+        <div class="gux-input" tabindex="1">
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
@@ -373,7 +373,7 @@ exports[`gux-form-field-text-like #render input type attribute should render com
         <slot name="label"></slot>
       </div>
       <div class="gux-input-and-error-container">
-        <div class="gux-input">
+        <div class="gux-input" tabindex="1">
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
@@ -409,7 +409,7 @@ exports[`gux-form-field-text-like #render input type attribute should render com
         <slot name="label"></slot>
       </div>
       <div class="gux-input-and-error-container">
-        <div class="gux-input">
+        <div class="gux-input" tabindex="1">
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
@@ -445,7 +445,7 @@ exports[`gux-form-field-text-like #render label-position should render component
         <slot name="label"></slot>
       </div>
       <div class="gux-input-and-error-container">
-        <div class="gux-input">
+        <div class="gux-input" tabindex="1">
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
@@ -481,7 +481,7 @@ exports[`gux-form-field-text-like #render label-position should render component
         <slot name="label"></slot>
       </div>
       <div class="gux-input-and-error-container">
-        <div class="gux-input">
+        <div class="gux-input" tabindex="1">
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
@@ -517,7 +517,7 @@ exports[`gux-form-field-text-like #render label-position should render component
         <slot name="label"></slot>
       </div>
       <div class="gux-input-and-error-container">
-        <div class="gux-input">
+        <div class="gux-input" tabindex="1">
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
@@ -553,7 +553,7 @@ exports[`gux-form-field-text-like #render label-position should render component
         <slot name="label"></slot>
       </div>
       <div class="gux-input-and-error-container">
-        <div class="gux-input">
+        <div class="gux-input" tabindex="1">
           <div class="gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
@@ -589,7 +589,7 @@ exports[`gux-form-field-text-like #render prefix should render component as expe
         <slot name="label"></slot>
       </div>
       <div class="gux-input-and-error-container">
-        <div class="gux-input">
+        <div class="gux-input" tabindex="1">
           <div class="gux-has-prefix gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>
@@ -628,7 +628,7 @@ exports[`gux-form-field-text-like #render suffix should render component as expe
         <slot name="label"></slot>
       </div>
       <div class="gux-input-and-error-container">
-        <div class="gux-input">
+        <div class="gux-input" tabindex="1">
           <div class="gux-has-suffix gux-input-container">
             <slot name="prefix"></slot>
             <slot name="input"></slot>