[terra-dropdown-split-button] Added dashed border on split button whe…

…n its get focussed (#3943)
cerner · Oct 26, 2023 · 102a70f · 102a70f
1 parent 1be05ff
commit 102a70f
Show file tree

Hide file tree

Showing 68 changed files with 27 additions and 15 deletions.
diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md
@@ -15,6 +15,9 @@
 
 ## 1.45.0 - (October 16, 2023)
 
+* Added
+  * Added aria-label attribute for `terra-dropdown-split-button` examples.
+
 * Added
   * Added a visual error note for invalid example in `terra-form-single-select`.
   * Added example for `terra-badge` with `terra-html-table`.

diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/dropdown-button/example/BlockSplitButton.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/dropdown-button/example/BlockSplitButton.jsx
@@ -10,6 +10,9 @@ const Example = () => {
         primaryOptionLabel="Primary Option"
         onSelect={() => setMessage('Primary option clicked')}
         isBlock
+        buttonAttrs={{
+          'aria-label': 'block split',
+        }}
       >
         <Item label="1st Option" onSelect={() => setMessage('1st option clicked')} />
         <Item label="2nd Option" onSelect={() => setMessage('2nd option clicked')} />

diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/dropdown-button/example/GhostSplitButton.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/dropdown-button/example/GhostSplitButton.jsx
@@ -10,6 +10,9 @@ const GhostSplitButton = () => {
         primaryOptionLabel="Reply"
         onSelect={() => setMessage('Reply clicked')}
         variant="ghost"
+        buttonAttrs={{
+          'aria-label': 'ghost split',
+        }}
       >
         <Item label="Reply All" onSelect={() => setMessage('Reply All clicked')} />
         <Item label="Forward" onSelect={() => setMessage('Forward clicked')} />

diff --git a/packages/terra-dropdown-button/CHANGELOG.md b/packages/terra-dropdown-button/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Updated focus border as dashed border in `dropdown-split-button`.
+
 ## 1.36.0 - (August 8, 2023)
 
 * Added

diff --git a/packages/terra-dropdown-button/src/_mixins.scss b/packages/terra-dropdown-button/src/_mixins.scss
@@ -57,7 +57,7 @@
 
     &:focus {
       border-right-color: map-get($color-map, focus-border-color);
-      box-shadow: map-get($color-map, focus-split-box-shadow);
+      outline: map-get($color-map, focus-split-outline);
     }
 
     &.is-active,
@@ -82,7 +82,7 @@
     box-shadow: map-get($color-map, split-caret-box-shadow);
 
     &:focus {
-      box-shadow: map-get($color-map, focus-split-caret-box-shadow);
+      outline: map-get($color-map, focus-split-caret-outline);
     }
     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none), (hover: hover) and (pointer: fine) {
       &:hover {

diff --git a/packages/terra-dropdown-button/src/_variables.scss b/packages/terra-dropdown-button/src/_variables.scss
@@ -20,8 +20,8 @@ $terra-dropdown-button-neutral-color-scheme: (
   focus-background-color: var(--terra-dropdown-button-focus-background-color-neutral, #dedfe0),
   focus-border-color: var(--terra-dropdown-button-focus-border-color-neutral, #c8cacb),
   focus-dropdown-box-shadow: var(--terra-dropdown-button-dropdown-type-focus-box-shadow-neutral, 0 0 0 1px rgba(76, 178, 233, 0.6), 0 0 0 3px rgba(76, 178, 233, 0.27)),
-  focus-split-box-shadow: var(--terra-dropdown-button-split-type-focus-box-shadow-neutral, 0 0 0 1px rgba(76, 178, 233, 0.6), 0 0 0 3px rgba(76, 178, 233, 0.27)),
-  focus-split-caret-box-shadow: var(--terra-dropdown-button-split-type-caret-focus-box-shadow-neutral, 0 0 0 1px rgba(76, 178, 233, 0.6), 0 0 0 3px rgba(76, 178, 233, 0.27)),
+  focus-split-outline: var(--terra-dropdown-button-split-type-focus-outline-neutral, 2px dashed #000),
+  focus-split-caret-outline: var(--terra-dropdown-button-split-type-caret-focus-outline-neutral, 2px dashed #000),
   hover-background-color: var(--terra-dropdown-button-hover-background-color-neutral, #b9bbbc),
   hover-color: var(--terra-dropdown-button-hover-color-neutral, #000),
   hover-split-caret-box-shadow: var(--terra-dropdown-button-split-type-caret-hover-box-shadow-neutral, none),
@@ -72,8 +72,8 @@ $terra-dropdown-button-ghost-color-scheme: (
   focus-background-color: var(--terra-dropdown-button-focus-background-color-ghost, transparent),
   focus-border-color: var(--terra-dropdown-button-focus-border-color-ghost, rgba(28, 31, 33, 0.25)),
   focus-dropdown-box-shadow: var(--terra-dropdown-button-dropdown-type-focus-box-shadow-ghost, 0 0 0 1px rgba(76, 178, 233, 0.6), 0 0 0 3px rgba(76, 178, 233, 0.27)),
-  focus-split-box-shadow: var(--terra-dropdown-button-split-type-focus-box-shadow-ghost, 0 0 0 1px rgba(76, 178, 233, 0.6), 0 0 0 3px rgba(76, 178, 233, 0.27)),
-  focus-split-caret-box-shadow: var(--terra-dropdown-button-split-type-caret-focus-box-shadow-ghost, 0 0 0 1px rgba(76, 178, 233, 0.6), 0 0 0 3px rgba(76, 178, 233, 0.27)),
+  focus-split-outline: var(--terra-dropdown-button-split-type-focus-outline-ghost, 2px dashed #000),
+  focus-split-caret-outline: var(--terra-dropdown-button-split-type-caret-focus-outline-ghost, 2px dashed #000),
   hover-background-color: var(--terra-dropdown-button-hover-background-color-ghost, rgba(0, 0, 0, 0.05)),
   hover-color: var(--terra-dropdown-button-hover-color-ghost, #000),
   hover-split-caret-box-shadow: var(--terra-dropdown-button-split-type-caret-hover-box-shadow-ghost, none),

diff --git a/packages/terra-dropdown-button/src/clinical-lowlight-theme/SplitButton.module.scss b/packages/terra-dropdown-button/src/clinical-lowlight-theme/SplitButton.module.scss
@@ -34,8 +34,8 @@
     --terra-dropdown-button-split-type-box-shadow-neutral: none;
     --terra-dropdown-button-split-type-font-weight-neutral: 400;
     --terra-dropdown-button-split-type-caret-box-shadow-neutral: none;
-    --terra-dropdown-button-split-type-focus-box-shadow-neutral: 0 0 1px 3px #004c76, 0 0 7px 4px #004c76;
-    --terra-dropdown-button-split-type-caret-focus-box-shadow-neutral: 0 0 1px 3px #004c76, 0 0 7px 4px #004c76;
+    --terra-dropdown-button-split-type-focus-outline-neutral: 2px dashed #b2b5b6;
+    --terra-dropdown-button-split-type-caret-focus-outline-neutral: 2px dashed #b2b5b6;
     --terra-dropdown-button-split-type-caret-hover-box-shadow-neutral: none;
 
     // ghost
@@ -56,8 +56,8 @@
     --terra-dropdown-button-split-type-box-shadow-ghost: none;
     --terra-dropdown-button-split-type-font-weight-ghost: 400;
     --terra-dropdown-button-split-type-caret-box-shadow-ghost: none;
-    --terra-dropdown-button-split-type-focus-box-shadow-ghost: 0 0 1px 3px #004c76, 0 0 7px 4px #004c76;
-    --terra-dropdown-button-split-type-caret-focus-box-shadow-ghost: 0 0 1px 3px #004c76, 0 0 7px 4px #004c76;
+    --terra-dropdown-button-split-type-focus-outline-ghost: 2px dashed #b2b5b6;
+    --terra-dropdown-button-split-type-caret-focus-outline-ghost: 2px dashed #b2b5b6;
     --terra-dropdown-button-split-type-caret-hover-box-shadow-ghost: none;
 
     /* Icons */

diff --git a/packages/terra-dropdown-button/src/orion-fusion-theme/SplitButton.module.scss b/packages/terra-dropdown-button/src/orion-fusion-theme/SplitButton.module.scss
@@ -15,7 +15,7 @@
     --terra-dropdown-button-split-type-caret-height: 1em;
     --terra-dropdown-button-split-type-caret-top: 0.2em;
     --terra-dropdown-button-split-type-caret-width: 1em;
-    
+
     // neutral
     --terra-dropdown-button-active-background-color-neutral: #9b9fa1;
     --terra-dropdown-button-active-border-color-neutral: #6f7477;
@@ -34,8 +34,8 @@
     --terra-dropdown-button-split-type-box-shadow-neutral: inset 0 3rem 1.5rem -2rem #f4f4f4;
     --terra-dropdown-button-split-type-font-weight-neutral: 400;
     --terra-dropdown-button-split-type-caret-box-shadow-neutral: inset 0 3rem 1.5rem -2rem #f4f4f4;
-    --terra-dropdown-button-split-type-focus-box-shadow-neutral: inset 0 3rem 1.5rem -2rem #f4f4f4, 0 0 1px 1px rgba(255, 255, 255, 0.65), 0 0 2px 3px rgba(128, 191, 253, 1), 0 0 6px 3px rgba(128, 191, 253, 1);
-    --terra-dropdown-button-split-type-caret-focus-box-shadow-neutral: inset 0 3rem 1.5rem -2rem #f4f4f4, 0 0 1px 1px rgba(255, 255, 255, 0.65), 0 0 2px 3px rgba(128, 191, 253, 1), 0 0 6px 3px rgba(128, 191, 253, 1);
+    --terra-dropdown-button-split-type-focus-outline-neutral: 2px dashed #000;
+    --terra-dropdown-button-split-type-caret-focus-outline-neutral: 2px dashed #000;
     --terra-dropdown-button-split-type-caret-hover-box-shadow-neutral: inset 0 3rem 1.5rem -2rem #f4f4f4;
 
     // ghost
@@ -56,8 +56,8 @@
     --terra-dropdown-button-split-type-box-shadow-ghost: none;
     --terra-dropdown-button-split-type-font-weight-ghost: 400;
     --terra-dropdown-button-split-type-caret-box-shadow-ghost: none;
-    --terra-dropdown-button-split-type-focus-box-shadow-ghost: 0 0 1px 1px rgba(255, 255, 255, 0.65), 0 0 2px 3px rgba(76, 178, 233, 0.5), 0 0 6px 4px rgba(76, 178, 233, 0.3);
-    --terra-dropdown-button-split-type-caret-focus-box-shadow-ghost: 0 0 1px 1px rgba(255, 255, 255, 0.65), 0 0 2px 3px rgba(76, 178, 233, 0.5), 0 0 6px 4px rgba(76, 178, 233, 0.3);
+    --terra-dropdown-button-split-type-focus-outline-ghost: 2px dashed #000;
+    --terra-dropdown-button-split-type-caret-focus-outline-ghost: 2px dashed #000;
     --terra-dropdown-button-split-type-caret-hover-box-shadow-ghost: none;
 
     /* Icons */

diff --git a/...al-lowlight-theme/en/chrome_medium/split-button-spec/MetaData_of_1st_option.png b/...al-lowlight-theme/en/chrome_medium/split-button-spec/MetaData_of_1st_option.png
diff --git a/...-theme/en/chrome_medium/split-button-spec/MetaData_of_Primary_Button_option.png b/...-theme/en/chrome_medium/split-button-spec/MetaData_of_Primary_Button_option.png
diff --git a/...ence/clinical-lowlight-theme/en/chrome_medium/split-button-spec/caret_focus.png b/...ence/clinical-lowlight-theme/en/chrome_medium/split-button-spec/caret_focus.png
diff --git a/.../reference/clinical-lowlight-theme/en/chrome_medium/split-button-spec/click.png b/.../reference/clinical-lowlight-theme/en/chrome_medium/split-button-spec/click.png
diff --git a/...ght-theme/en/chrome_medium/split-button-spec/clicking_caret_closes_dropdown.png b/...ght-theme/en/chrome_medium/split-button-spec/clicking_caret_closes_dropdown.png
diff --git a/...t-theme/en/chrome_medium/split-button-spec/clicking_outside_closes_dropdown.png b/...t-theme/en/chrome_medium/split-button-spec/clicking_outside_closes_dropdown.png
diff --git a/...dium/split-button-spec/clicking_primary_closes_dropdown_and_selects_primary.png b/...dium/split-button-spec/clicking_primary_closes_dropdown_and_selects_primary.png
diff --git a/...rence/clinical-lowlight-theme/en/chrome_medium/split-button-spec/down_arrow.png b/...rence/clinical-lowlight-theme/en/chrome_medium/split-button-spec/down_arrow.png
diff --git a/...__/reference/clinical-lowlight-theme/en/chrome_medium/split-button-spec/end.png b/...__/reference/clinical-lowlight-theme/en/chrome_medium/split-button-spec/end.png
diff --git a/.../reference/clinical-lowlight-theme/en/chrome_medium/split-button-spec/enter.png b/.../reference/clinical-lowlight-theme/en/chrome_medium/split-button-spec/enter.png
diff --git a/...reference/clinical-lowlight-theme/en/chrome_medium/split-button-spec/escape.png b/...reference/clinical-lowlight-theme/en/chrome_medium/split-button-spec/escape.png
diff --git a/...inical-lowlight-theme/en/chrome_medium/split-button-spec/first_item_focused.png b/...inical-lowlight-theme/en/chrome_medium/split-button-spec/first_item_focused.png
diff --git a/..._/reference/clinical-lowlight-theme/en/chrome_medium/split-button-spec/home.png b/..._/reference/clinical-lowlight-theme/en/chrome_medium/split-button-spec/home.png
diff --git a/...linical-lowlight-theme/en/chrome_medium/split-button-spec/jumps_when_typing.png b/...linical-lowlight-theme/en/chrome_medium/split-button-spec/jumps_when_typing.png
diff --git a/...linical-lowlight-theme/en/chrome_medium/split-button-spec/last_item_focused.png b/...linical-lowlight-theme/en/chrome_medium/split-button-spec/last_item_focused.png
diff --git a/...ical-lowlight-theme/en/chrome_medium/split-button-spec/primary_button_click.png b/...ical-lowlight-theme/en/chrome_medium/split-button-spec/primary_button_click.png
diff --git a/...ce/clinical-lowlight-theme/en/chrome_medium/split-button-spec/primary_focus.png b/...ce/clinical-lowlight-theme/en/chrome_medium/split-button-spec/primary_focus.png
diff --git a/.../reference/clinical-lowlight-theme/en/chrome_medium/split-button-spec/space.png b/.../reference/clinical-lowlight-theme/en/chrome_medium/split-button-spec/space.png
diff --git a/...__/reference/clinical-lowlight-theme/en/chrome_medium/split-button-spec/tab.png b/...__/reference/clinical-lowlight-theme/en/chrome_medium/split-button-spec/tab.png
diff --git a/...ference/clinical-lowlight-theme/en/chrome_medium/split-button-spec/up_arrow.png b/...ference/clinical-lowlight-theme/en/chrome_medium/split-button-spec/up_arrow.png
diff --git a/...rion-fusion-theme/en/chrome_medium/split-button-spec/MetaData_of_1st_option.png b/...rion-fusion-theme/en/chrome_medium/split-button-spec/MetaData_of_1st_option.png
diff --git a/...-theme/en/chrome_medium/split-button-spec/MetaData_of_Primary_Button_option.png b/...-theme/en/chrome_medium/split-button-spec/MetaData_of_Primary_Button_option.png
diff --git a/...reference/orion-fusion-theme/en/chrome_medium/split-button-spec/caret_focus.png b/...reference/orion-fusion-theme/en/chrome_medium/split-button-spec/caret_focus.png
diff --git a/...ots__/reference/orion-fusion-theme/en/chrome_medium/split-button-spec/click.png b/...ots__/reference/orion-fusion-theme/en/chrome_medium/split-button-spec/click.png
diff --git a/...ion-theme/en/chrome_medium/split-button-spec/clicking_caret_closes_dropdown.png b/...ion-theme/en/chrome_medium/split-button-spec/clicking_caret_closes_dropdown.png
diff --git a/...n-theme/en/chrome_medium/split-button-spec/clicking_outside_closes_dropdown.png b/...n-theme/en/chrome_medium/split-button-spec/clicking_outside_closes_dropdown.png
diff --git a/...dium/split-button-spec/clicking_primary_closes_dropdown_and_selects_primary.png b/...dium/split-button-spec/clicking_primary_closes_dropdown_and_selects_primary.png
diff --git a/.../reference/orion-fusion-theme/en/chrome_medium/split-button-spec/down_arrow.png b/.../reference/orion-fusion-theme/en/chrome_medium/split-button-spec/down_arrow.png
diff --git a/...shots__/reference/orion-fusion-theme/en/chrome_medium/split-button-spec/end.png b/...shots__/reference/orion-fusion-theme/en/chrome_medium/split-button-spec/end.png
diff --git a/...ots__/reference/orion-fusion-theme/en/chrome_medium/split-button-spec/enter.png b/...ots__/reference/orion-fusion-theme/en/chrome_medium/split-button-spec/enter.png
diff --git a/...ts__/reference/orion-fusion-theme/en/chrome_medium/split-button-spec/escape.png b/...ts__/reference/orion-fusion-theme/en/chrome_medium/split-button-spec/escape.png
diff --git a/...ce/orion-fusion-theme/en/chrome_medium/split-button-spec/first_item_focused.png b/...ce/orion-fusion-theme/en/chrome_medium/split-button-spec/first_item_focused.png
diff --git a/...hots__/reference/orion-fusion-theme/en/chrome_medium/split-button-spec/home.png b/...hots__/reference/orion-fusion-theme/en/chrome_medium/split-button-spec/home.png
diff --git a/...nce/orion-fusion-theme/en/chrome_medium/split-button-spec/jumps_when_typing.png b/...nce/orion-fusion-theme/en/chrome_medium/split-button-spec/jumps_when_typing.png
diff --git a/...nce/orion-fusion-theme/en/chrome_medium/split-button-spec/last_item_focused.png b/...nce/orion-fusion-theme/en/chrome_medium/split-button-spec/last_item_focused.png
diff --git a/.../orion-fusion-theme/en/chrome_medium/split-button-spec/primary_button_click.png b/.../orion-fusion-theme/en/chrome_medium/split-button-spec/primary_button_click.png
diff --git a/...ference/orion-fusion-theme/en/chrome_medium/split-button-spec/primary_focus.png b/...ference/orion-fusion-theme/en/chrome_medium/split-button-spec/primary_focus.png
diff --git a/...ots__/reference/orion-fusion-theme/en/chrome_medium/split-button-spec/space.png b/...ots__/reference/orion-fusion-theme/en/chrome_medium/split-button-spec/space.png
diff --git a/...shots__/reference/orion-fusion-theme/en/chrome_medium/split-button-spec/tab.png b/...shots__/reference/orion-fusion-theme/en/chrome_medium/split-button-spec/tab.png
diff --git a/...__/reference/orion-fusion-theme/en/chrome_medium/split-button-spec/up_arrow.png b/...__/reference/orion-fusion-theme/en/chrome_medium/split-button-spec/up_arrow.png
diff --git a/...rra-default-theme/en/chrome_medium/split-button-spec/MetaData_of_1st_option.png b/...rra-default-theme/en/chrome_medium/split-button-spec/MetaData_of_1st_option.png
diff --git a/...-theme/en/chrome_medium/split-button-spec/MetaData_of_Primary_Button_option.png b/...-theme/en/chrome_medium/split-button-spec/MetaData_of_Primary_Button_option.png
diff --git a/...eference/terra-default-theme/en/chrome_medium/split-button-spec/caret_focus.png b/...eference/terra-default-theme/en/chrome_medium/split-button-spec/caret_focus.png
diff --git a/...ts__/reference/terra-default-theme/en/chrome_medium/split-button-spec/click.png b/...ts__/reference/terra-default-theme/en/chrome_medium/split-button-spec/click.png
diff --git a/...ult-theme/en/chrome_medium/split-button-spec/clicking_caret_closes_dropdown.png b/...ult-theme/en/chrome_medium/split-button-spec/clicking_caret_closes_dropdown.png
diff --git a/...t-theme/en/chrome_medium/split-button-spec/clicking_outside_closes_dropdown.png b/...t-theme/en/chrome_medium/split-button-spec/clicking_outside_closes_dropdown.png
diff --git a/...dium/split-button-spec/clicking_primary_closes_dropdown_and_selects_primary.png b/...dium/split-button-spec/clicking_primary_closes_dropdown_and_selects_primary.png
diff --git a/...reference/terra-default-theme/en/chrome_medium/split-button-spec/down_arrow.png b/...reference/terra-default-theme/en/chrome_medium/split-button-spec/down_arrow.png
diff --git a/...hots__/reference/terra-default-theme/en/chrome_medium/split-button-spec/end.png b/...hots__/reference/terra-default-theme/en/chrome_medium/split-button-spec/end.png
diff --git a/...ts__/reference/terra-default-theme/en/chrome_medium/split-button-spec/enter.png b/...ts__/reference/terra-default-theme/en/chrome_medium/split-button-spec/enter.png
diff --git a/...s__/reference/terra-default-theme/en/chrome_medium/split-button-spec/escape.png b/...s__/reference/terra-default-theme/en/chrome_medium/split-button-spec/escape.png
diff --git a/...e/terra-default-theme/en/chrome_medium/split-button-spec/first_item_focused.png b/...e/terra-default-theme/en/chrome_medium/split-button-spec/first_item_focused.png
diff --git a/...ots__/reference/terra-default-theme/en/chrome_medium/split-button-spec/home.png b/...ots__/reference/terra-default-theme/en/chrome_medium/split-button-spec/home.png
diff --git a/...ce/terra-default-theme/en/chrome_medium/split-button-spec/jumps_when_typing.png b/...ce/terra-default-theme/en/chrome_medium/split-button-spec/jumps_when_typing.png
diff --git a/...ce/terra-default-theme/en/chrome_medium/split-button-spec/last_item_focused.png b/...ce/terra-default-theme/en/chrome_medium/split-button-spec/last_item_focused.png
diff --git a/...terra-default-theme/en/chrome_medium/split-button-spec/primary_button_click.png b/...terra-default-theme/en/chrome_medium/split-button-spec/primary_button_click.png
diff --git a/...erence/terra-default-theme/en/chrome_medium/split-button-spec/primary_focus.png b/...erence/terra-default-theme/en/chrome_medium/split-button-spec/primary_focus.png
diff --git a/...ts__/reference/terra-default-theme/en/chrome_medium/split-button-spec/space.png b/...ts__/reference/terra-default-theme/en/chrome_medium/split-button-spec/space.png
diff --git a/...hots__/reference/terra-default-theme/en/chrome_medium/split-button-spec/tab.png b/...hots__/reference/terra-default-theme/en/chrome_medium/split-button-spec/tab.png
diff --git a/..._/reference/terra-default-theme/en/chrome_medium/split-button-spec/up_arrow.png b/..._/reference/terra-default-theme/en/chrome_medium/split-button-spec/up_arrow.png