Skip to content

Commit

Permalink
feat(ui5-checkbox): update focus handling (#8553)
Browse files Browse the repository at this point in the history
Adjusted ui5-checkbox focus display rules. On desktop, focus outline is
always visible. For mobile, focus outline only appears with an external
keyboard, it remains hidden for touch focus.

Related to: #8320
  • Loading branch information
kgogov authored Apr 8, 2024
1 parent 38e4df4 commit ce28296
Show file tree
Hide file tree
Showing 5 changed files with 20 additions and 14 deletions.
6 changes: 6 additions & 0 deletions packages/main/src/CheckBox.ts
Original file line number Diff line number Diff line change
Expand Up @@ -267,6 +267,12 @@ class CheckBox extends UI5Element implements IFormElement {
this._enableFormSupport();
}

onEnterDOM() {
if (isDesktop()) {
this.setAttribute("desktop", "");
}
}

_enableFormSupport() {
const formSupport = getFeature<typeof FormSupport>("FormSupport");
if (formSupport) {
Expand Down
25 changes: 11 additions & 14 deletions packages/main/src/themes/CheckBox.css
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,8 @@
align-self: center;
}

:host([wrapping-type="Normal"]) .ui5-checkbox-root:focus::before {
:host([desktop][wrapping-type="Normal"]) .ui5-checkbox-root:focus-within::before,
:host([wrapping-type="Normal"]) .ui5-checkbox-root:focus-visible::before {
bottom: var(--_ui5_checkbox_wrapped_focus_left_top_bottom_position);
}

Expand Down Expand Up @@ -99,7 +100,6 @@
background: var(--_ui5_checkbox_inner_information_background_hover);
}


:host([value-state="Success"]) .ui5-checkbox-inner,
:host([value-state="Success"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner {
background: var(--sapField_SuccessBackground);
Expand All @@ -116,14 +116,6 @@
color: var(--_ui5_checkbox_checkmark_warning_color);
}

:host([text]) .ui5-checkbox-root {
padding-inline-end: var(--_ui5_checkbox_right_focus_distance);
}

:host([text]) .ui5-checkbox-root:focus::before {
inset-inline-end: 0;
}

.ui5-checkbox-root {
position: relative;
display: inline-flex;
Expand All @@ -141,7 +133,8 @@
}

/* focused */
.ui5-checkbox-root:focus::before {
:host([desktop]) .ui5-checkbox-root:focus-within::before,
.ui5-checkbox-root:focus-visible::before {
display: var(--_ui5_checkbox_focus_outline_display);
content: "";
position: absolute;
Expand All @@ -151,9 +144,13 @@
border-radius: var(--_ui5_checkbox_focus_border_radius);
}

:host .ui5-checkbox-root:focus {
border: var(--_ui5_checkbox_focus_border);
border-radius: 0.5rem;
:host([text]) .ui5-checkbox-root {
padding-inline-end: var(--_ui5_checkbox_right_focus_distance);
}

:host([text]) .ui5-checkbox-root:focus-within::before,
:host([text]) .ui5-checkbox-root:focus-visible::before {
inset-inline-end: 0;
}

/* hover */
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,4 +40,5 @@
--_ui5_checkbox_focus_position: 0.3125rem;
--_ui5_checkbox_focus_border_radius: 0.5rem;
--_ui5_checkbox_right_focus_distance: var(--_ui5_checkbox_focus_position);
--_ui5_checkbox_wrapped_focus_left_top_bottom_position: 0.1875rem;
}
Original file line number Diff line number Diff line change
Expand Up @@ -42,4 +42,5 @@
--_ui5_checkbox_focus_position: 0.3125rem;
--_ui5_checkbox_focus_border_radius: 0.5rem;
--_ui5_checkbox_right_focus_distance: var(--_ui5_checkbox_focus_position);
--_ui5_checkbox_wrapped_focus_left_top_bottom_position: 0.1875rem;
}
Original file line number Diff line number Diff line change
Expand Up @@ -42,4 +42,5 @@
--_ui5_checkbox_focus_position: 0.3125rem;
--_ui5_checkbox_focus_border_radius: 0.5rem;
--_ui5_checkbox_right_focus_distance: var(--_ui5_checkbox_focus_position);
--_ui5_checkbox_wrapped_focus_left_top_bottom_position: 0.1875rem;
}

0 comments on commit ce28296

Please sign in to comment.