search

adeo / mozaic-design-system

Mozaic Design System
https://mozaic.adeo.cloud
Apache License 2.0
68 stars 17 forks source link

ListBox - visual focus for accessibility #1588

Closed AdeoRemiDoolaeghe closed 2 weeks ago

AdeoRemiDoolaeghe commented 1 month ago

I am opening an issue for

Styles (CSS, SCSS, ...)

Package version

@mozaic-ds/1.70.0

Description

On the ListBox component from Mozaic-vue, there is no visual clue on which element is currently focused (appart from the "check" element, which should only inform the user which element is selected)

GitHub repository

No response

Mock-up(s)

No response

What happened?

No response

What is expected?

There is an obvious visual hihjlight on which element of the list currently has the focus.

To Reproduce

  1. Go to Mozaic-Vue storybook, ListBox component: https://adeo.github.io/mozaic-vue/?path=/docs/overlay-listbox-options--docs
  2. Click just before the component
  3. Hit "tab" key, until the first element of the list has the focus

Code example

No response

Is this a regression?

Additional comments

I suggest having the same visuel effect than the hover

AdeoRemiDoolaeghe commented 1 month ago

The proposed modification could be the following one. In _c.listbox.scss, modify:

&:not(#{$selector-empty}):not(.is-disabled):hover {
  background-color: $color-listbox-tile-hover-background;
  box-shadow: inset 9px 0 0 -7px $color-listbox-tile-shadow;
}

By adding something inspired by this selector:

.mc-listbox__tile:has(.mc-listbox__input:focus) {
  // Same style as hover
}
tiloyi commented 2 weeks ago

Resolves by https://github.com/adeo/mozaic-design-system/pull/1590