Skip to content

Commit

Permalink
fix(ui5-select): selected option in dropdown is now read out (#5589)
Browse files Browse the repository at this point in the history 
* fix(ui5-select): selected option in dropdown is now read out

* fix(ui5-select): selected option in dropdown is now read out
  • Loading branch information
@PetyaMarkovaBogdanova
PetyaMarkovaBogdanova authored Aug 30, 2022
1 parent 2741705 commit f8ab6ed
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 18 deletions.
2 changes: 0 additions & 2 deletions packages/main/src/Select.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -641,7 +641,6 @@ class Select extends UI5Element {
_beforeOpen() {
this._selectedIndexBeforeOpen = this._selectedIndex;
this._lastSelectedOption = this._filteredItems[this._selectedIndex];
this.focused = false;
}

_afterOpen() {
Expand All @@ -650,7 +649,6 @@ class Select extends UI5Element {

_afterClose() {
this.opened = false;
this.focused = true;
this._iconPressed = false;
this._listWidth = 0;

Expand Down
36 changes: 20 additions & 16 deletions packages/main/src/themes/Input.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
background-color: var(--_ui5_input_background_color);
}

:host([focused]) {
:host([focused]:not([opened])) {
border-color: var(--_ui5_input_focused_border_color);
background-color: var(--sapField_Focus_Background);
}
Expand All @@ -34,7 +34,7 @@
position: relative;
}

:host([focused]) .ui5-input-focusable-element::after {
:host([focused]:not([opened])) .ui5-input-focusable-element::after {
content: var(--ui5_input_focus_pseudo_element_content);
position: absolute;
pointer-events: none;
Expand Down Expand Up @@ -221,12 +221,12 @@
background: var(--sapField_Hover_BackgroundStyle);
background-color: var(--sapField_Hover_Background);
}
:host(:not([value-state]):not([readonly])[focused]:hover),
:host([value-state="None"]:not([readonly])[focused]:hover) {
:host(:not([value-state]):not([readonly])[focused]:not([opened]):hover),
:host([value-state="None"]:not([readonly])[focused]:not([opened]):hover) {
box-shadow: none;
}

:host([focused]) .ui5-input-root::before {
:host([focused]):not([opened]) .ui5-input-root::before {
content: none;
}

Expand Down Expand Up @@ -254,20 +254,21 @@
border-color: var(--_ui5_input_value_state_error_border_color);
}

:host([value-state="Error"][focused]:not([readonly])) {
:host([value-state="Error"][focused]:not([opened]):not([readonly])) {
background-color: var(--_ui5_input_focused_value_state_error_background);
border-color: var(--_ui5_input_focused_value_state_error_border_color);
}

:host([value-state="Error"][focused]:not([readonly])) .ui5-input-focusable-element:after {
:host([value-state="Error"][focused]:not([opened]):not([readonly])) .ui5-input-focusable-element:after {
border-color: var(--_ui5_input_focused_value_state_error_focus_outline_color);
}

:host([value-state="Error"]:not([readonly])) .ui5-input-root::before{
background-color: var(--_ui5-input-value-state-error-border-botom-color);
}

:host([value-state="Error"]:not([readonly]):not([focused]):hover) {
:host([value-state="Error"]:not([readonly]):not([focused]):hover),
:host([value-state="Error"]:not([readonly])[focused][opened]:hover) {
background-color: var(--_ui5_input_value_state_error_hover_background);
box-shadow: var(--_ui5_input_value_state_error_hover_box_shadow);
}
Expand All @@ -284,20 +285,21 @@
border-color: var(--_ui5_input_value_state_warning_border_color);
}

:host([value-state="Warning"][focused]:not([readonly])) {
:host([value-state="Warning"][focused]:not([opened]):not([readonly])) {
background-color: var(--_ui5_input_focused_value_state_warning_background);
border-color: var(--_ui5_input_focused_value_state_warning_border_color);
}

:host([value-state="Warning"][focused]:not([readonly])) .ui5-input-focusable-element:after {
:host([value-state="Warning"][focused]:not([opened]):not([readonly])) .ui5-input-focusable-element:after {
border-color: var(--_ui5_input_focused_value_state_warning_focus_outline_color);
}

:host([value-state="Warning"]:not([readonly])) .ui5-input-root::before{
background-color: var(--_ui5_input_value_state_warning_border_botom_color);
}

:host([value-state="Warning"]:not([readonly]):not([focused]):hover) {
:host([value-state="Warning"]:not([readonly]):not([focused]):hover),
:host([value-state="Warning"]:not([readonly])[focused][opened]:hover) {
background-color: var(--sapField_Hover_Background);
box-shadow: var(--_ui5_input_value_state_warning_hover_box_shadow);
}
Expand All @@ -309,20 +311,21 @@
border-width: var(--_ui5_input_value_state_success_border_width);
}

:host([value-state="Success"][focused]:not([readonly])) {
:host([value-state="Success"][focused]:not([opened]):not([readonly])) {
background-color: var(--_ui5_input_focused_value_state_success_background);
border-color: var(--_ui5_input_focused_value_state_success_border_color);
}

:host([value-state="Success"][focused]:not([readonly])) .ui5-input-focusable-element:after {
:host([value-state="Success"][focused]:not([opened]):not([readonly])) .ui5-input-focusable-element:after {
border-color: var(--_ui5_input_focused_value_state_success_focus_outline_color);
}

:host([value-state="Success"]:not([readonly])) .ui5-input-root::before{
background-color: var(--_ui5_input_value_state_success_border_botom_color);
}

:host([value-state="Success"]:not([readonly]):not([focused]):hover) {
:host([value-state="Success"]:not([readonly]):not([focused]):hover),
:host([value-state="Success"]:not([readonly])[focused][opened]:hover) {
background-color: var(--sapField_Hover_Background);
box-shadow: var(--_ui5_input_value_state_success_hover_box_shadow);
}
Expand All @@ -334,7 +337,7 @@
border-width: var(--_ui5_input_information_border_width);
}

:host([value-state="Information"][focused]:not([readonly])) {
:host([value-state="Information"][focused]:not([opened]):not([readonly])) {
background-color: var(--_ui5_input_focused_value_state_information_background);
border-color: var(--_ui5_input_focused_value_state_information_border_color);
}
Expand All @@ -343,7 +346,8 @@
background-color: var(--_ui5_input_value_success_information_border_botom_color);
}

:host([value-state="Information"]:not([readonly]):not([focused]):hover) {
:host([value-state="Information"]:not([readonly]):not([focused]):hover),
:host([value-state="Information"]:not([readonly])[focused][opened]:hover) {
background-color: var(--sapField_Hover_Background);
box-shadow: var(--_ui5_input_value_state_information_hover_box_shadow);
}
Expand Down

0 comments on commit f8ab6ed

Please sign in to comment.