Removing Border for select / input and options, Issue #440

[ccsCoder]

Related issue

Closes #440

Context / Background

The border didn't look good when dark theme was used. It resulted in an Inconsistent visual look and feel across the application.

What change is being introduced by this PR?

• Inspected the elements in question, identified the styles and changed them
• Changed #preferences input/select/option and set border: none.
• Direct consequence: the borders are removed as intended, indirect consequence is that we now have a more uniform look and feel.

How will this be tested?

• We will verify that the borders are removed indeed and check the same across themes.

[thamara]

@ccsCoder Can you please provide screenshots?

[codecov]

Codecov Report

Merging #447 into main will decrease coverage by 0.11%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##             main     #447      +/-   ##
==========================================
- Coverage   64.07%   63.95%   -0.12%     
==========================================
  Files          28       28              
  Lines        2536     2536              
  Branches      389      389              
==========================================
- Hits         1625     1622       -3     
- Misses        805      806       +1     
- Partials      106      108       +2     

Impacted Files	Coverage Δ
js/update-manager.js	61.53% <0.00%> (-7.70%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 8fc311b...badf537. Read the comment docs.

[thamara]

Right after selecting the item, it still shows an outline. Can you please make it outline: 0?

[ccsCoder]

Screenshots:
Dark

Cadet Star

Light

[ccsCoder]

Right after selecting the item, it still shows an outline. Can you please make it outline: 0?

I think that is not a good idea. In-fact I was going to raise an issue about it.
Focus rings / Outlines are good for Accessibility. It tells Keyboard users, and screen readers which item is under focus.

We should make the other elements Focusable and interactable through keyboard also as per WAI-ARIA guidelines.

I can take this up if you're okay with this. 👍

Of-Course we can change the colour / style of the outline / focus ring.

[thamara]

Hmm, that's interesting, I haven't paid as much attention to it as I probably should have (given my background doesn't include anything UX-related it would be hard anyway hahaha).

Maybe we could just change the outline color for the focused item (I suppose this is something we can do), just to match the themes better.

We should make the other elements Focusable and interactable through keyboard also as per WAI-ARIA guidelines.
I can take this up if you're okay with this. 👍

I guess I have some reading to do regarding WAI-ARIA... But it does sound great! Feel free to work on those, and if you have any other suggestions regarding accessibility, keep them coming! :)

[ccsCoder]

Hmm, that's interesting, I haven't paid as much attention to it as I probably should have (given my background doesn't include anything UX-related it would be hard anyway hahaha).

Maybe we could just change the outline color for the focused item (I suppose this is something we can do), just to match the themes better.

We should make the other elements Focusable and interactable through keyboard also as per WAI-ARIA guidelines.
I can take this up if you're okay with this. 👍

I guess I have some reading to do regarding WAI-ARIA... But it does sound great! Feel free to work on those, and if you have any other suggestions regarding accessibility, keep them coming! :)

I wouldn't worry about it.
Sad truth is that most websites / applications are not developed with a11y in mind. I will change the outline colours for the time being.

[thamara]

Thank you a lot!

Sad truth is that most websites / applications are not developed with a11y in mind.

I'll be adding a goal for the project to become more accessible, without a question this is something we would like to support, even we don't really know how to (yet).

[ccsCoder]

Thank you a lot!

Sad truth is that most websites / applications are not developed with a11y in mind.

I'll be adding a goal for the project to become more accessible, without a question this is something we would like to support, even we don't really know how to (yet).

Luckily, I work a lot on a11y. I'd love to put those skills to some use and help you out.

[thamara]

Luckily, I work a lot on a11y. I'd love to put those skills to some use and help you out.

That would be absolutely awesome!

[ccsCoder]

Screenshots of Outline / focus ring.

Dark:

Light:

Cadent Star:

We can iterate over the L&F of the focus ring.

[ccsCoder]

@thamara please check now.

[thamara]

Apart from the color change, everything looks great!
Thank you a lot!

[thamara]

\changelog-update
Message: Accessibility: [#447] Including focus ring/outline for inputs in the App
User: cssCoder