Matching dropdown style improvements

[swashbuck]

Subject of the enhancement

Wondering if anyone else feels that the visual presentation of the Matching component's dropdown could be improved.

1. The dropdown can potentially overlap other MCQ items. This can create a visual mess, especially for users with low vision, as it's difficult to distinguish the dropdown from the underlying subsequent Matching item.

2. The selected item is indicated by using the @item-color-selected background color. However, the dropdown parent item (either "Select an item" or the selected item after it has been selected) also uses the same styles. This makes it difficult to discern which item actually has focus.

Screenshots / suggestions

Here are a few suggestions on how to tackle these issues. The item numbers below relate to the above items.

1. Add a drop shadow and/or offset to the dropdown menu.
2. Do not use the selected styles for the topmost item.

Example:

[oliverfoster]

I like it. @kirsty-hames any thoughts?

[kirsty-hames]

Hey @swashbuck, thanks for raising this. Please see comments below.

1. The dropdown can potentially overlap other MCQ items. This can create a visual mess, especially for users with low vision, as it's difficult to distinguish the dropdown from the underlying subsequent Matching item.
   Add a drop shadow and/or offset to the dropdown menu.

I'd be fine with a drop shadow and/or offset. I find some branding guidelines avoid the use of drop shadow or it's use is quite particular. As an alternative, we could use a solid border? The screenshot below uses @item-color-hover, the same colour used for .dropdown-item border-bottom.

However, if a drop shadow and/or offset is more aesthetic we can always amend this to a border on a project as and when needed so I'm not wedded to this.

2. The selected item is indicated by using the @item-color-selected background color. However, the dropdown parent item (either "Select an item" or the selected item after it has been selected) also uses the same styles. This makes it difficult to discern which item actually has focus.
Do not use the selected styles for the topmost item.

I agree, I don't think we need to set a style for aria-expanded.