Skip to content

Commit f314795

Browse files
SvilenDarvenyashkiSvilenDarvenyashki
authored
chore(ui5-user-settings): acc fixes (#13288)
* chore(ui5-user-settings): acc fixes * chore(ui5-user-setting): label fix
1 parent a594e07 commit f314795

7 files changed

Lines changed: 80 additions & 63 deletions

File tree

‎packages/fiori/src/UserSettingsAppearanceViewTemplate.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import type UserSettingsAppearanceView from "./UserSettingsAppearanceView.js";
22
import List from "@ui5/webcomponents/dist/List.js";
3+
import Title from "@ui5/webcomponents/dist/Title.js";
34

45
export default function UserSettingsAppearanceViewTemplate(this: UserSettingsAppearanceView) {
56
return (
67
<div class="ui5-user-settings-view-container">
78
<div class="ui5-user-settings-view">
89
<slot name="additionalContent"></slot>
9-
<List header-text={this.text} class="user-settings-appearance-view-list" onItemClick={this._handleItemClick} >
10+
<List class="user-settings-appearance-view-list" onItemClick={this._handleItemClick} >
11+
{this.text && <Title slot="header" level="H3" class="user-settings-appearance-view-list-header">{this.text}</Title>}
1012
<slot></slot>
1113
</List>
1214
</div>

‎packages/fiori/src/UserSettingsItem.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,7 @@ class UserSettingsItem extends UI5Element {
204204
}
205205

206206
get ariaLabelledByText() {
207-
return `${this.text} ${this.accessibleName}`.trim();
207+
return `${this.text} ${this.accessibleName || ""}`.trim();
208208
}
209209

210210
get _tooltip() {

‎packages/fiori/src/i18n/messagebundle.properties‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -597,7 +597,7 @@ USER_MENU_CURRENT_INFORMATION_TXT=Current user information
597597
USER_MENU_ACTIONS_TXT=Actions
598598

599599
#XACT: ARIA information for the user settings dialog
600-
USER_SETTINGS_DIALOG_ACCESSIBLE_NAME=User settings dialog
600+
USER_SETTINGS_DIALOG_ACCESSIBLE_NAME=User settings
601601

602602
#XTXT: Aria role description for the user settings items
603603
USER_SETTINGS_LIST_ARIA_ROLE_DESC=User settings Item

‎packages/fiori/src/themes/UserSettingsView.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,19 @@
1010
.ui5-user-settings-view {
1111
padding-inline: 2rem;
1212
}
13+
}
14+
15+
.user-settings-appearance-view-list-header {
16+
overflow: hidden;
17+
white-space: nowrap;
18+
text-overflow: ellipsis;
19+
box-sizing: border-box;
20+
font-size: var(--sapFontHeader4Size);
21+
font-family: var(--sapFontFamily);
22+
color: var(--sapGroup_TitleTextColor);
23+
height: 3rem;
24+
line-height: 3rem;
25+
padding: 0 1rem;
26+
background-color: var(--sapGroup_TitleBackground);
27+
border-bottom: 1px solid var(--sapGroup_TitleBorderColor);
1328
}

‎packages/fiori/test/pages/UserSettingsDialog.html‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
<div style="border:1px solid black"></div>
5454
<ui5-button id="btnOpenSettings">User settings</ui5-button>
5555
<ui5-user-settings-dialog id="setting" header-text="Settings" show-search-field>
56-
<ui5-user-settings-item icon="user-settings" text="User Account" tooltip="User Account" header-text="User Account">
56+
<ui5-user-settings-item icon="user-settings" text="User Account" tooltip="User Account" header-text="User Account" selected>
5757
<ui5-user-settings-account-view id="account" show-manage-account="true">
5858
<ui5-user-menu-account slot="account"
5959
avatar-src="./img/man_avatar_1.png"
@@ -75,8 +75,8 @@
7575
<ui5-user-settings-appearance-view text="Themes">
7676
<div slot="additionalContent">
7777
<div class="ui5-user-settings-appearance-view-additional-content-header">
78-
<ui5-text>Optimize for Touch Input</ui5-text>
79-
<ui5-switch></ui5-switch>
78+
<ui5-text id="touch-input-label">Optimize for Touch Input</ui5-text>
79+
<ui5-switch accessible-name-ref="touch-input-label"></ui5-switch>
8080
</div>
8181
<ui5-text class="ui5-user-settings-appearance-view-additional-content-description">
8282
Increases the size and spacing of controls to allow you to interact with them more easily using your fingertip.
@@ -85,17 +85,17 @@
8585
</div>
8686
<ui5-user-settings-appearance-view-item item-key="custom_blue" text="Custom Theme Blue"></ui5-user-settings-appearance-view-item>
8787
<ui5-user-settings-appearance-view-item item-key="custom_dark" text="Custom Theme Dark"></ui5-user-settings-appearance-view-item>
88-
<ui5-user-settings-appearance-view-group header-text="SAP Horizon">
89-
<ui5-user-settings-appearance-view-item item-key="sap_horizon" text="SAP Morning Horizon"></ui5-user-settings-appearance-view-item>
90-
<ui5-user-settings-appearance-view-item item-key="sap_horizon_dark" text="SAP Evening Horizon"></ui5-user-settings-appearance-view-item>
91-
<ui5-user-settings-appearance-view-item item-key="sap_horizon_hcb" text="SAP Horizon High Contrast Black"></ui5-user-settings-appearance-view-item>
92-
<ui5-user-settings-appearance-view-item item-key="sap_horizon_hcw" text="SAP Horizon High Contrast White"></ui5-user-settings-appearance-view-item>
88+
<ui5-user-settings-appearance-view-group header-text="Horizon">
89+
<ui5-user-settings-appearance-view-item item-key="sap_horizon" text="Morning Horizon" selected></ui5-user-settings-appearance-view-item>
90+
<ui5-user-settings-appearance-view-item item-key="sap_horizon_dark" text="Evening Horizon"></ui5-user-settings-appearance-view-item>
91+
<ui5-user-settings-appearance-view-item item-key="sap_horizon_hcb" text="Horizon High Contrast Black"></ui5-user-settings-appearance-view-item>
92+
<ui5-user-settings-appearance-view-item item-key="sap_horizon_hcw" text="Horizon High Contrast White"></ui5-user-settings-appearance-view-item>
9393
</ui5-user-settings-appearance-view-group>
94-
<ui5-user-settings-appearance-view-group header-text="SAP Quartz">
95-
<ui5-user-settings-appearance-view-item item-key="sap_fiori_3" text="SAP Quartz Light"></ui5-user-settings-appearance-view-item>
96-
<ui5-user-settings-appearance-view-item item-key="sap_fiori_3_dark" text="SAP Quartz Dark"></ui5-user-settings-appearance-view-item>
97-
<ui5-user-settings-appearance-view-item item-key="sap_fiori_3_hcb" text="SAP Quartz High Contrast Black"></ui5-user-settings-appearance-view-item>
98-
<ui5-user-settings-appearance-view-item item-key="sap_fiori_3_hcw" text="SAP Quartz High Contrast White"></ui5-user-settings-appearance-view-item>
94+
<ui5-user-settings-appearance-view-group header-text="Quartz">
95+
<ui5-user-settings-appearance-view-item item-key="sap_fiori_3" text="Quartz Light"></ui5-user-settings-appearance-view-item>
96+
<ui5-user-settings-appearance-view-item item-key="sap_fiori_3_dark" text="Quartz Dark"></ui5-user-settings-appearance-view-item>
97+
<ui5-user-settings-appearance-view-item item-key="sap_fiori_3_hcb" text="Quartz High Contrast Black"></ui5-user-settings-appearance-view-item>
98+
<ui5-user-settings-appearance-view-item item-key="sap_fiori_3_hcw" text="Quartz High Contrast White"></ui5-user-settings-appearance-view-item>
9999
</ui5-user-settings-appearance-view-group>
100100

101101
</ui5-user-settings-appearance-view>
@@ -105,7 +105,7 @@
105105
<ui5-user-settings-item text="Language and Region" tooltip="Language and Region" header-text="Language and Region">
106106
<ui5-user-settings-view>
107107
<div id="language-region-container" class="language-region-container">
108-
<ui5-label class="language-region-label">Display Language:</ui5-label>
108+
<ui5-label for="language" class="language-region-label">Display Language:</ui5-label>
109109
<ui5-combobox id="language" class="language-region-control" placeholder="Language" value="English (United States)">
110110
<ui5-cb-item text="Browser Language" selected additional-text="English"></ui5-cb-item>
111111
<ui5-cb-item text="English (United Kingdom)" additional-text="English (United Kingdom)"></ui5-cb-item>
@@ -120,7 +120,7 @@
120120
<ui5-cb-item text="Spanish (Mexico)" additional-text="Español (América Latina)"></ui5-cb-item>
121121
<ui5-cb-item text="Spanish (Spain)" additional-text="Español (España)"></ui5-cb-item>
122122
</ui5-combobox>
123-
<ui5-label class="language-region-label">Region:</ui5-label>
123+
<ui5-label for="region" class="language-region-label">Region:</ui5-label>
124124
<ui5-combobox id="region" class="language-region-control" placeholder="Region" value="United States">
125125
<ui5-cb-item text="United Kingdom" additional-text="GB"></ui5-cb-item>
126126
<ui5-cb-item text="United States" additional-text="US"></ui5-cb-item>
@@ -134,7 +134,7 @@
134134
<ui5-cb-item text="Spanish (Mexico)" additional-text="MX"></ui5-cb-item>
135135
<ui5-cb-item text="Spanish (Spain)" additional-text="ES"></ui5-cb-item>
136136
</ui5-combobox>
137-
<ui5-label class="language-region-label">Date Format:</ui5-label>
137+
<ui5-label for="dateFormat" class="language-region-label">Date Format:</ui5-label>
138138
<ui5-combobox id="dateFormat" class="language-region-control" placeholder="Date Format" value="MM.DD.YYYY">
139139
<ui5-cb-item text="MM/DD/YYYY" additional-text="e.g. 10/23/2025"></ui5-cb-item>
140140
<ui5-cb-item text="MM.DD.YYYY" additional-text="e.g. 10.23.2025"></ui5-cb-item>
@@ -146,15 +146,15 @@
146146
<ui5-cb-item text="YYYY.MM.DD" additional-text="e.g. 2025.10.23"></ui5-cb-item>
147147
<ui5-cb-item text="YYYY-MM-DD" additional-text="e.g. 2025-10-23"></ui5-cb-item>
148148
</ui5-combobox>
149-
<ui5-label class="language-region-label">Time Format:</ui5-label>
149+
<ui5-label for="timeFormat" class="language-region-label">Time Format:</ui5-label>
150150
<ui5-combobox id="timeFormat" class="language-region-control" placeholder="Time Format" value="12 Hour">
151151
<ui5-cb-item text="24 Hour" additional-text="e.g. 12:05:10"></ui5-cb-item>
152152
<ui5-cb-item text="12 Hour" additional-text="e.g. 12:05:10 PM"></ui5-cb-item>
153153
<ui5-cb-item text="12 Hour (lowercase)" additional-text="e.g. 12:05:10 pm"></ui5-cb-item>
154154
<ui5-cb-item text="Hours from 0 to 11" additional-text="e.g. 00:05:10 PM"></ui5-cb-item>
155155
<ui5-cb-item text="Hours from 0 to 11 (lowercase)" additional-text="e.g. 00:05:10 pm"></ui5-cb-item>
156156
</ui5-combobox>
157-
<ui5-label class="language-region-label">Time Zone:</ui5-label>
157+
<ui5-label for="timeZone" class="language-region-label">Time Zone:</ui5-label>
158158
<ui5-combobox id="timeZone" class="language-region-control" placeholder="Time Zone" value="Eastern Standard Time (UTC -05:00)">
159159
<ui5-cb-item text="Pacific Time (UTC -08:00)" additional-text="Sacramento, United States"></ui5-cb-item>
160160
<ui5-cb-item text="Mountain Time (UTC -07:00)" additional-text="Denver, United States"></ui5-cb-item>
@@ -181,7 +181,7 @@
181181
<ui5-cb-item text="Australian Eastern Time (UTC +10:00)" additional-text="Canberra, Australia"></ui5-cb-item>
182182
<ui5-cb-item text="New Zealand Time (UTC +12:00)" additional-text="Wellington, New Zealand"></ui5-cb-item>
183183
</ui5-combobox>
184-
<ui5-label class="language-region-label">Currency:</ui5-label>
184+
<ui5-label for="currency" class="language-region-label">Currency:</ui5-label>
185185
<ui5-combobox id="currency" class="language-region-control" placeholder="Currency" value="USD - United States Dollar">
186186
<ui5-cb-item text="USD - United States Dollar" additional-text="USD" value="USD"></ui5-cb-item>
187187
<ui5-cb-item text="Euro" additional-text="EUR"></ui5-cb-item>
@@ -204,7 +204,7 @@
204204
<ui5-cb-item text="South Korean Won" additional-text="KRW"></ui5-cb-item>
205205
<ui5-cb-item text="Turkish Lira" additional-text="TRY"></ui5-cb-item>
206206
</ui5-combobox>
207-
<ui5-label class="language-region-label">Number Format:</ui5-label>
207+
<ui5-label for="numberFormat" class="language-region-label">Number Format:</ui5-label>
208208
<ui5-combobox id="numberFormat" class="language-region-control" placeholder="Number Format" value="1,234.56">
209209
<ui5-cb-item text="1.234,56" additional-text="Germany"></ui5-cb-item>
210210
<ui5-cb-item text="1,234.56" additional-text="US/UK"></ui5-cb-item>

‎packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/sample.html‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
</ui5-user-menu>
3838

3939
<ui5-user-settings-dialog id="settings" header-text="Settings" show-search-field>
40-
<ui5-user-settings-item icon="user-settings" text="User Account" tooltip="User Account" header-text="User Account">
40+
<ui5-user-settings-item icon="user-settings" text="User Account" tooltip="User Account" header-text="User Account" selected>
4141
<ui5-user-settings-account-view id="account" show-manage-account="true">
4242
<ui5-user-menu-account slot="account"
4343
avatar-src="../assets/images/avatars/man_avatar_3.png"
@@ -60,33 +60,33 @@
6060
<ui5-user-settings-appearance-view text="Themes">
6161
<div slot="additionalContent">
6262
<div class="ui5-user-settings-appearance-view-additional-content-header">
63-
<ui5-text>Optimize for Touch Input</ui5-text>
64-
<ui5-switch></ui5-switch>
63+
<ui5-text id="touch-input-label">Optimize for Touch Input</ui5-text>
64+
<ui5-switch accessible-name-ref="touch-input-label"></ui5-switch>
6565
</div>
6666
<ui5-text class="ui5-user-settings-appearance-view-additional-content-description">
6767
Increases the size and spacing of controls to allow you to interact with them more easily using your fingertip.
6868
This is useful for hybrid devices that combine touch and mouse events.
6969
</ui5-text>
7070
</div>
71-
<ui5-user-settings-appearance-view-group header-text="SAP Horizon">
72-
<ui5-user-settings-appearance-view-item item-key="sap_horizon" text="SAP Morning Horizon"></ui5-user-settings-appearance-view-item>
73-
<ui5-user-settings-appearance-view-item item-key="sap_horizon_dark" text="SAP Evening Horizon"></ui5-user-settings-appearance-view-item>
74-
<ui5-user-settings-appearance-view-item item-key="sap_horizon_hcb" text="SAP Horizon High Contrast Black"></ui5-user-settings-appearance-view-item>
75-
<ui5-user-settings-appearance-view-item item-key="sap_horizon_hcw" text="SAP Horizon High Contrast White"></ui5-user-settings-appearance-view-item>
71+
<ui5-user-settings-appearance-view-group header-text="Horizon">
72+
<ui5-user-settings-appearance-view-item item-key="sap_horizon" text="Morning Horizon" selected></ui5-user-settings-appearance-view-item>
73+
<ui5-user-settings-appearance-view-item item-key="sap_horizon_dark" text="Evening Horizon"></ui5-user-settings-appearance-view-item>
74+
<ui5-user-settings-appearance-view-item item-key="sap_horizon_hcb" text="Horizon High Contrast Black"></ui5-user-settings-appearance-view-item>
75+
<ui5-user-settings-appearance-view-item item-key="sap_horizon_hcw" text="Horizon High Contrast White"></ui5-user-settings-appearance-view-item>
7676
</ui5-user-settings-appearance-view-group>
77-
<ui5-user-settings-appearance-view-group header-text="SAP Quartz">
78-
<ui5-user-settings-appearance-view-item item-key="sap_fiori_3" text="SAP Quartz Light"></ui5-user-settings-appearance-view-item>
79-
<ui5-user-settings-appearance-view-item item-key="sap_fiori_3_dark" text="SAP Quartz Dark"></ui5-user-settings-appearance-view-item>
80-
<ui5-user-settings-appearance-view-item item-key="sap_fiori_3_hcb" text="SAP Quartz High Contrast Black"></ui5-user-settings-appearance-view-item>
81-
<ui5-user-settings-appearance-view-item item-key="sap_fiori_3_hcw" text="SAP Quartz High Contrast White"></ui5-user-settings-appearance-view-item>
77+
<ui5-user-settings-appearance-view-group header-text="Quartz">
78+
<ui5-user-settings-appearance-view-item item-key="sap_fiori_3" text="Quartz Light"></ui5-user-settings-appearance-view-item>
79+
<ui5-user-settings-appearance-view-item item-key="sap_fiori_3_dark" text="Quartz Dark"></ui5-user-settings-appearance-view-item>
80+
<ui5-user-settings-appearance-view-item item-key="sap_fiori_3_hcb" text="Quartz High Contrast Black"></ui5-user-settings-appearance-view-item>
81+
<ui5-user-settings-appearance-view-item item-key="sap_fiori_3_hcw" text="Quartz High Contrast White"></ui5-user-settings-appearance-view-item>
8282
</ui5-user-settings-appearance-view-group>
8383
</ui5-user-settings-appearance-view>
8484
</ui5-user-settings-item>
8585

8686
<ui5-user-settings-item text="Language and Region" tooltip="Language and Region" header-text="Language and Region">
8787
<ui5-user-settings-view>
8888
<div id="language-region-container" class="language-region-container">
89-
<ui5-label class="language-region-label" show-colon>Display Language</ui5-label>
89+
<ui5-label for="language" class="language-region-label" show-colon>Display Language</ui5-label>
9090
<ui5-combobox id="language" class="language-region-control" placeholder="Language" value="English (United States)">
9191
<ui5-cb-item text="Browser Language" selected additional-text="English"></ui5-cb-item>
9292
<ui5-cb-item text="English (United Kingdom)" additional-text="English (United Kingdom)"></ui5-cb-item>
@@ -101,7 +101,7 @@
101101
<ui5-cb-item text="Spanish (Mexico)" additional-text="Español (América Latina)"></ui5-cb-item>
102102
<ui5-cb-item text="Spanish (Spain)" additional-text="Español (España)"></ui5-cb-item>
103103
</ui5-combobox>
104-
<ui5-label class="language-region-label" show-colon>Region</ui5-label>
104+
<ui5-label for="region" class="language-region-label" show-colon>Region</ui5-label>
105105
<ui5-combobox id="region" class="language-region-control" placeholder="Region" value="United States">
106106
<ui5-cb-item text="United Kingdom" additional-text="GB"></ui5-cb-item>
107107
<ui5-cb-item text="United States" additional-text="US"></ui5-cb-item>
@@ -115,7 +115,7 @@
115115
<ui5-cb-item text="Spanish (Mexico)" additional-text="MX"></ui5-cb-item>
116116
<ui5-cb-item text="Spanish (Spain)" additional-text="ES"></ui5-cb-item>
117117
</ui5-combobox>
118-
<ui5-label class="language-region-label" show-colon>Date Format</ui5-label>
118+
<ui5-label for="dateFormat" class="language-region-label" show-colon>Date Format</ui5-label>
119119
<ui5-combobox id="dateFormat" class="language-region-control" placeholder="Date Format" value="MM.DD.YYYY">
120120
<ui5-cb-item text="MM/DD/YYYY" additional-text="e.g. 10/23/2025"></ui5-cb-item>
121121
<ui5-cb-item text="MM.DD.YYYY" additional-text="e.g. 10.23.2025"></ui5-cb-item>
@@ -127,15 +127,15 @@
127127
<ui5-cb-item text="YYYY.MM.DD" additional-text="e.g. 2025.10.23"></ui5-cb-item>
128128
<ui5-cb-item text="YYYY-MM-DD" additional-text="e.g. 2025-10-23"></ui5-cb-item>
129129
</ui5-combobox>
130-
<ui5-label class="language-region-label" show-colon>Time Format</ui5-label>
130+
<ui5-label for="timeFormat" class="language-region-label" show-colon>Time Format</ui5-label>
131131
<ui5-combobox id="timeFormat" class="language-region-control" placeholder="Time Format" value="12 Hour">
132132
<ui5-cb-item text="24 Hour" additional-text="e.g. 12:05:10"></ui5-cb-item>
133133
<ui5-cb-item text="12 Hour" additional-text="e.g. 12:05:10 PM"></ui5-cb-item>
134134
<ui5-cb-item text="12 Hour (lowercase)" additional-text="e.g. 12:05:10 pm"></ui5-cb-item>
135135
<ui5-cb-item text="Hours from 0 to 11" additional-text="e.g. 00:05:10 PM"></ui5-cb-item>
136136
<ui5-cb-item text="Hours from 0 to 11 (lowercase)" additional-text="e.g. 00:05:10 pm"></ui5-cb-item>
137137
</ui5-combobox>
138-
<ui5-label class="language-region-label" show-colon>Time Zone</ui5-label>
138+
<ui5-label for="timeZone" class="language-region-label" show-colon>Time Zone</ui5-label>
139139
<ui5-combobox id="timeZone" class="language-region-control" placeholder="Time Zone" value="Eastern Standard Time (UTC -05:00)">
140140
<ui5-cb-item text="Pacific Time (UTC -08:00)" additional-text="Sacramento, United States"></ui5-cb-item>
141141
<ui5-cb-item text="Mountain Time (UTC -07:00)" additional-text="Denver, United States"></ui5-cb-item>
@@ -162,7 +162,7 @@
162162
<ui5-cb-item text="Australian Eastern Time (UTC +10:00)" additional-text="Canberra, Australia"></ui5-cb-item>
163163
<ui5-cb-item text="New Zealand Time (UTC +12:00)" additional-text="Wellington, New Zealand"></ui5-cb-item>
164164
</ui5-combobox>
165-
<ui5-label class="language-region-label" show-colon>Currency</ui5-label>
165+
<ui5-label for="currency" class="language-region-label" show-colon>Currency</ui5-label>
166166
<ui5-combobox id="currency" class="language-region-control" placeholder="Currency" value="USD - United States Dollar">
167167
<ui5-cb-item text="USD - United States Dollar" additional-text="USD" value="USD"></ui5-cb-item>
168168
<ui5-cb-item text="Euro" additional-text="EUR"></ui5-cb-item>
@@ -185,7 +185,7 @@
185185
<ui5-cb-item text="South Korean Won" additional-text="KRW"></ui5-cb-item>
186186
<ui5-cb-item text="Turkish Lira" additional-text="TRY"></ui5-cb-item>
187187
</ui5-combobox>
188-
<ui5-label class="language-region-label" show-colon>Number Format</ui5-label>
188+
<ui5-label for="numberFormat" class="language-region-label" show-colon>Number Format</ui5-label>
189189
<ui5-combobox id="numberFormat" class="language-region-control" placeholder="Number Format" value="1,234.56">
190190
<ui5-cb-item text="1.234,56" additional-text="Germany"></ui5-cb-item>
191191
<ui5-cb-item text="1,234.56" additional-text="US/UK"></ui5-cb-item>

0 commit comments

Comments
 (0)