Bugzilla

Focus on focus is key for keyboard users ;-))

Between multiple selected pills, it's virtually impossible to see which one has focus. Maybe the times of dotted focus rings are gone, but it should still be visible somehow without magnifiers and creeping into my screen...

STR

1) compose, have 7 recipient pills
2) select pills 3 to 5 in that order (using Shift+cursor-right or Ctrl+click)
3) press Ctrl+Cursor left 2 times and try to see which pill has focus
4) press Ctrl+Cursor left again

Actual
- it's virtually impossible to identify the focused pill between multiple selected pills, because the focus border is almost same color (dark-blue) like Highlight-background-color (blue).
- focus becomes visible as a grey border only on unselected pills which have a light background color.

Expected
- it should be easily possible to see which pill out of multiple selected pills has focus
- focus marker must be visible against the blue background-color of selected pills (Highlight)

Implementation ideas:
- Problem only occurs on selected pills, so we could change their CSS.
- Lighter focus ring, gradient, anything which makes the focus stand out.
- I tried gradient and I find that quite cool right now: looks modern and a bit like a tiny spotlight on the focused pill, which carries the idea of "focus" pretty well.

.address-pill[selected]:hover:not(.editing),
.address-pill[selected]:focus:not(.editing) {
  background: linear-gradient(135deg, white, Highlight 1em);
}

Focus on focus is key for keyboard users especially when they choose to select ;-))

Between multiple selected pills, it's virtually impossible to see which one has focus. Maybe the times of dotted focus rings are gone, but it should still be visible somehow without magnifiers and creeping into my screen...

STR

1) compose, have 7 recipient pills
2) select pills 3 to 5 in that order (using Shift+cursor-right or Ctrl+click)
3) press Ctrl+Cursor left 2 times and try to see which pill has focus
4) press Ctrl+Cursor left again

Actual
- it's virtually impossible to identify the focused pill between multiple selected pills, because the focus border is almost same color (dark-blue) like Highlight-background-color (blue).
- focus becomes visible as a grey border only on unselected pills which have a light background color.

Expected
- it should be easily possible to see which pill out of multiple selected pills has focus
- focus marker must be visible against the blue background-color of selected pills (Highlight)

Implementation ideas:
- Problem only occurs on selected pills, so we could change their CSS.
- Lighter focus ring, gradient, anything which makes the focus stand out.
- I tried gradient and I find that quite cool right now: looks modern and a bit like a tiny spotlight on the focused pill, which carries the idea of "focus" pretty well.

.address-pill[selected]:hover:not(.editing),
.address-pill[selected]:focus:not(.editing) {
  background: linear-gradient(135deg, white, Highlight 1em);
}

Focus on focus is key for keyboard users especially when they choose to select ;-))

Between multiple selected pills, it's virtually impossible to see which one has focus. Maybe the times of dotted focus rings are gone, but it should still be visible somehow without magnifiers and creeping into my screen...

STR

1) compose, have 7 recipient pills
2) select pills 3 to 5 in that order (using Shift+cursor-right or Ctrl+click)
3) press Ctrl+Cursor left 2 times and try to see which pill has focus (you can just hold Ctrl while pressing cursor keys)
4) press Ctrl+Cursor left again

Actual
- it's virtually impossible to identify the focused pill between multiple selected pills, because the focus border is almost same color (dark-blue) like Highlight-background-color (blue).
- focus becomes visible as a grey border only on unselected pills which have a light background color.

Expected
- it should be easily possible to see which pill out of multiple selected pills has focus
- focus marker must be visible against the blue background-color of selected pills (Highlight)

Implementation ideas:
- Problem only occurs on selected pills, so we could change their CSS.
- Lighter focus ring, gradient, anything which makes the focus stand out.
- I tried gradient and I find that quite cool right now: looks modern and a bit like a tiny spotlight on the focused pill, which carries the idea of "focus" pretty well.

.address-pill[selected]:hover:not(.editing),
.address-pill[selected]:focus:not(.editing) {
  background: linear-gradient(135deg, white, Highlight 1em);
}

Focus on focus is key for keyboard users especially when they choose to select ;-))

Between multiple selected pills, it's virtually impossible to see which one has focus. Maybe the times of dotted focus rings are gone, but it should still be visible somehow without magnifiers and creeping into my screen...

STR

1) compose, have 7 recipient pills
2) select pills 3 to 5 in that order (using Shift+cursor-right or Ctrl+click)
3) press Ctrl+Cursor left 2 times and try to see which pill has focus (you can just hold Ctrl while pressing cursor keys)
4) press Ctrl+Cursor left again

Actual
- it's virtually impossible to identify the focused pill between multiple selected pills, because the focus border is almost same color (dark-blue) like Highlight-background-color (blue).
- focus becomes visible as a grey border only on unselected pills which have a light background color.

Expected
- it should be easily possible to see which pill out of multiple selected pills has focus
- focus marker must be visible against the blue background-color of selected pills (Highlight)

Implementation ideas:
- Problem only occurs on selected pills, so we could change their CSS.
- Lighter focus ring, gradient, anything which makes the focus stand out.
- I tried gradient and I find that quite cool right now: looks modern and a bit like a tiny spotlight on the focused pill, which carries the idea of "focus" pretty well.

````
.address-pill[selected]:hover:not(.editing),
.address-pill[selected]:focus:not(.editing) {
  background: linear-gradient(135deg, white, Highlight 1em);
}
````