Skip to content

feat(web): add visual feedback on table row hover and focus#3233

Merged
dgdavid merged 5 commits intomasterfrom
hightlight-row
Mar 3, 2026
Merged

feat(web): add visual feedback on table row hover and focus#3233
dgdavid merged 5 commits intomasterfrom
hightlight-row

Conversation

@dgdavid
Copy link
Copy Markdown
Contributor

@dgdavid dgdavid commented Mar 2, 2026

Agama tables lacked any visual feedback when users hovered with mouse or navigated rows with the keyboard, making it hard to track which row user is on. PF's built-in solution (isClickable on Tr) was intentionally avoided since it provides the hover highlight out of the box but also adds a pointer cursor and implies the row is clickable, which is not the common use case for Agama tables at this moment (check slightly related commit ae2d3a2 in which the usage of isClickable was discarded).

Thus, a custom CSS rule has been added for covering three interaction cases:

  • Mouse hover, standard :hover
  • Keyboard navigation, :focus-within, intentionally broad to cover all focusable elements including checkboxes. This ensures keyboard users always know which row they are on. The (small) tradeoff is a residual highlight after checkbox selection that persists until focus moves elsewhere. Since it's not expected mouse users stop suddenly interacting, this is an acceptable edge case where the benefit for keyboard users outweighs the minor annoyance (for a brief amount of time) for mouse users.
  • Action menu open, :has(.pf-v6-c-menu-toggle[aria-expanded="true"]), which required fixing a missing isExpanded prop on SimpleDropdown as part of this PR.

The highlight color reuses the same value used for button and menu option hover states for consistency across interactive elements. Defining another color for these elements or a dedicated token for row highlighting is left as a future improvement, though it is not a priority for the team in the mid-term given the amount of other ongoing work.

localhost_8080_ (10) localhost_8080_ (9)

Related to

Copy link
Copy Markdown
Contributor

@joseivanlopez joseivanlopez left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only a typo in changelog.

dgdavid and others added 2 commits March 3, 2026 08:03
@dgdavid dgdavid requested a review from joseivanlopez March 3, 2026 08:08
Copy link
Copy Markdown
Contributor

@joseivanlopez joseivanlopez left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@dgdavid dgdavid merged commit 6d632ac into master Mar 3, 2026
11 checks passed
@dgdavid dgdavid deleted the hightlight-row branch March 3, 2026 09:24
bmwiedemann pushed a commit to bmwiedemann/openSUSE that referenced this pull request Mar 11, 2026
https://build.opensuse.org/request/show/1338003
by user IGonzalezSosa + anag_factory
- Remove code to deal with the old HTTP API
  (gh#agama-project/agama#3258).

- Allow downloading the user config (jsc#PED-15453).

- Improve registration and software issues reporting (related to bsc#1258034).

- Drop vulnerable dev dependency no longer needed (bsc#1259117).

- Restores DASD format progress with API v2 event model
  (gh#agama-project/agama#3143).
- Improves progress backdrop layout and readbility
  (gh#agama-project/agama#2947).

- Add visual feedback on table row hover and focus
  (gh#agama-project/agama#3233).

- Update web dependencies to their latest available versions
  as of 2026-03-02 (gh#agama-project/agama#3232).

- Do not reset the configuration on product selection (bsc#1258032).

- Do not show empty software page (related to bsc#1258922).

- Restore the interfa
@imobachgs imobachgs mentioned this pull request Mar 17, 2026
imobachgs added a commit that referenced this pull request Mar 17, 2026
Prepare to release version 19.

* #1829
* #2508
* #2772
* #2818
* #2826
* #2848
* #2860
* #2863
* #2864
* #2866
* #2867
* #2869
* #2870
* #2871
* #2872
* #2873
* #2874
* #2875
* #2876
* #2877
* #2880
* #2881
* #2882
* #2884
* #2885
* #2886
* #2891
* #2892
* #2893
* #2894
* #2895
* #2896
* #2897
* #2898
* #2899
* #2900
* #2901
* #2902
* #2903
* #2904
* #2908
* #2909
* #2910
* #2912
* #2913
* #2914
* #2915
* #2916
* #2917
* #2918
* #2920
* #2921
* #2923
* #2924
* #2926
* #2928
* #2929
* #2930
* #2933
* #2934
* #2935
* #2936
* #2937
* #2938
* #2939
* #2942
* #2943
* #2944
* #2945
* #2946
* #2947
* #2948
* #2949
* #2950
* #2951
* #2952
* #2954
* #2955
* #2956
* #2957
* #2958
* #2959
* #2960
* #2961
* #2963
* #2964
* #2965
* #2967
* #2968
* #2969
* #2970
* #2971
* #2972
* #2974
* #2975
* #2977
* #2978
* #2980
* #2981
* #2982
* #2983
* #2984
* #2988
* #2989
* #2990
* #2991
* #2992
* #2993
* #2994
* #2995
* #2996
* #2997
* #2998
* #2999
* #3000
* #3001
* #3002
* #3004
* #3005
* #3006
* #3007
* #3008
* #3009
* #3011
* #3012
* #3013
* #3014
* #3015
* #3016
* #3018
* #3019
* #3020
* #3021
* #3022
* #3023
* #3024
* #3025
* #3026
* #3027
* #3028
* #3029
* #3030
* #3031
* #3033
* #3034
* #3035
* #3036
* #3037
* #3039
* #3040
* #3041
* #3042
* #3043
* #3044
* #3045
* #3046
* #3047
* #3048
* #3049
* #3050
* #3051
* #3052
* #3053
* #3054
* #3055
* #3056
* #3057
* #3058
* #3060
* #3061
* #3062
* #3063
* #3064
* #3065
* #3066
* #3067
* #3068
* #3069
* #3070
* #3071
* #3072
* #3073
* #3074
* #3075
* #3076
* #3077
* #3078
* #3079
* #3086
* #3087
* #3088
* #3089
* #3090
* #3091
* #3092
* #3093
* #3094
* #3095
* #3096
* #3097
* #3098
* #3099
* #3100
* #3101
* #3102
* #3103
* #3104
* #3105
* #3106
* #3107
* #3108
* #3109
* #3110
* #3112
* #3113
* #3114
* #3115
* #3116
* #3117
* #3118
* #3119
* #3120
* #3122
* #3123
* #3124
* #3127
* #3128
* #3129
* #3130
* #3131
* #3133
* #3134
* #3135
* #3136
* #3137
* #3138
* #3139
* #3140
* #3141
* #3142
* #3143
* #3144
* #3145
* #3146
* #3147
* #3148
* #3149
* #3150
* #3151
* #3152
* #3153
* #3154
* #3155
* #3157
* #3158
* #3159
* #3160
* #3161
* #3162
* #3163
* #3164
* #3165
* #3166
* #3167
* #3168
* #3169
* #3170
* #3174
* #3175
* #3176
* #3177
* #3178
* #3179
* #3181
* #3182
* #3184
* #3185
* #3186
* #3188
* #3189
* #3190
* #3191
* #3192
* #3194
* #3195
* #3196
* #3197
* #3198
* #3199
* #3200
* #3201
* #3202
* #3203
* #3205
* #3206
* #3208
* #3209
* #3210
* #3213
* #3214
* #3215
* #3216
* #3217
* #3218
* #3219
* #3220
* #3222
* #3223
* #3224
* #3225
* #3226
* #3227
* #3228
* #3229
* #3230
* #3231
* #3232
* #3233
* #3234
* #3235
* #3236
* #3237
* #3238
* #3239
* #3240
* #3241
* #3242
* #3243
* #3244
* #3246
* #3247
* #3248
* #3250
* #3251
* #3252
* #3253
* #3254
* #3255
* #3256
* #3257
* #3258
* #3259
* #3260
* #3261
* #3262
* #3263
* #3265
* #3266
* #3267
* #3268
* #3269
* #3270
* #3271
* #3272
* #3273
* #3274
* #3275
* #3276
* #3277
* #3278
* #3279
* #3280
* #3281
* #3282
* #3283
* #3284
* #3285
* #3286
* #3287
* #3288
* #3289
* #3290
* #3291
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.

2 participants