Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[web] Prefer HTML <strong> element over CSS bold class. #960

Merged
merged 9 commits into from
Dec 26, 2023

Conversation

dgdavid
Copy link
Contributor

@dgdavid dgdavid commented Dec 26, 2023

There are some sentences across the UI visually emphasized by using the CSS bold class. Even though it's not entirely incorrect, after revisiting the HTML spec it looks more appropriate to use the <strong> element instead. By doing so, delivered content becomes more semantic and preserves visual clues by default.

Please, note that apart from switching from <span class="bold"> to <strong> this set of changes also fixes which sentences are marked as important. In some case it just chooses the right sentences, while in others it just removes the emphasis because it is not needed.

Additionally, affected sentences were modified for adding the final dot if missing.


An example of the change:

Before After
Not important content emphasized by CSS Important content wrapped by the HTML strong element

Before this change, the CSS class bold was used for emphasizing the "No
X defined" yet message. However, important messages are actually those
telling the user something has to be defined.

Thus, this commit uses the HTML <strong> element to wrap them and
deliver a more semantic document instead of relying on the CSS 'bold'
class.
By using a link instead of a buton since it a link that navigates to a
different place, not a button that triggers an action.

Additionally, it uses HTML <strong> element for wrapping a important
message in the confirmation dialog instead of just marking it as `bold`
via CSS.
Instead of using the CSS `bold` class for emphasizing them, use the HTML
<strong> element for semantically marking them as important.
Since they are not really important text, just information, do not make
them visually different to the rest. What is more, if there are
importante messages is prefered to wrap them in the HTML <strong>
element than just using plain CSS to change them visually.
Part of changes done at 7410080.
To be consistent with the rest of the UI and because these are actually
informative messages, not important ones.
Because sentences usually ends with a dot, but for some reason it was
not the case for "No found" or "Not defined" senteces.
@dgdavid dgdavid marked this pull request as ready for review December 26, 2023 10:59
@dgdavid dgdavid merged commit 5e882f8 into master Dec 26, 2023
1 check passed
@dgdavid dgdavid deleted the use-strong-element branch December 26, 2023 11:21
@imobachgs imobachgs mentioned this pull request Feb 12, 2024
@imobachgs imobachgs mentioned this pull request May 17, 2024
imobachgs added a commit that referenced this pull request May 17, 2024
Prepare for releasing Agama 8. It includes the following pull requests:

* #884
* #886
* #914
* #918
* #956
* #957
* #958
* #959
* #960
* #961
* #962
* #963
* #964
* #965
* #966
* #969
* #970
* #976
* #977
* #978
* #979
* #980
* #981
* #983
* #984
* #985
* #986
* #988
* #991
* #992
* #995
* #996
* #997
* #999
* #1003
* #1004
* #1006
* #1007
* #1008
* #1009
* #1010
* #1011
* #1012
* #1014
* #1015
* #1016
* #1017
* #1020
* #1022
* #1023
* #1024
* #1025
* #1027
* #1028
* #1029
* #1030
* #1031
* #1032
* #1033
* #1034
* #1035
* #1036
* #1038
* #1039
* #1041
* #1042
* #1043
* #1045
* #1046
* #1047
* #1048
* #1052
* #1054
* #1056
* #1057
* #1060
* #1061
* #1062
* #1063
* #1064
* #1066
* #1067
* #1068
* #1069
* #1071
* #1072
* #1073
* #1074
* #1075
* #1079
* #1080
* #1081
* #1082
* #1085
* #1086
* #1087
* #1088
* #1089
* #1090
* #1091
* #1092
* #1093
* #1094
* #1095
* #1096
* #1097
* #1098
* #1099
* #1100
* #1102
* #1103
* #1104
* #1105
* #1106
* #1109
* #1110
* #1111
* #1112
* #1114
* #1116
* #1117
* #1118
* #1119
* #1120
* #1121
* #1122
* #1123
* #1125
* #1126
* #1127
* #1128
* #1129
* #1130
* #1131
* #1132
* #1133
* #1134
* #1135
* #1136
* #1138
* #1139
* #1140
* #1141
* #1142
* #1143
* #1144
* #1145
* #1146
* #1147
* #1148
* #1149
* #1151
* #1152
* #1153
* #1154
* #1155
* #1156
* #1157
* #1158
* #1160
* #1161
* #1162
* #1163
* #1164
* #1165
* #1166
* #1167
* #1168
* #1169
* #1170
* #1171
* #1172
* #1173
* #1174
* #1175
* #1177
* #1178
* #1180
* #1181
* #1182
* #1183
* #1184
* #1185
* #1187
* #1188
* #1189
* #1190
* #1191
* #1192
* #1193
* #1194
* #1195
* #1196
* #1198
* #1199
* #1200
* #1201
* #1203
* #1204
* #1205
* #1206
* #1207
* #1208
* #1209
* #1210
* #1211
* #1212
* #1213
* #1214
* #1215
* #1216
* #1217
* #1219
* #1220
* #1221
* #1222
* #1223
* #1224
* #1225
* #1226
* #1227
* #1229
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants