User Accessibility and Developer Experience
Tags: opensource, react, css
Published: 2021-03-28 03:36:24

Telescope 1.9 release is shipped! Hooray!

In this week, I gain some new experience in user experience and developer experience. I'll explain them in this post.

#### UX
As discussed in the [last post](https://dev.to/yuanleemidori/what-are-users-thinking-1jk9), Pedro and I want to handle the title issue. The old title has big font size which causes the title wrapped easily, and will need to expand the title to 2 lines, which is what we want to avoid.

In [this PR](https://github.com/Seneca-CDOT/telescope/pull/2006), I shrunk the title size to make titles showed in one line (in most cases), and with smaller space used.

*Before*:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v6nyrtfn98l6htkn36gd.png)

*After*:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zwqihww6pvvmea1a9pdu.png)

This PR also solved the [letter-spacing issue on mobile](https://github.com/Seneca-CDOT/telescope/issues/1917)

*Before*:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hiqkoh3h08646lpei388.png)

*After*:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q6al3hhcypgdv1bkiux5.png)

The other 2 PRs I want to mention is to improve user accessibility. We have an amazing dark mode to switch, but some font/element colors does not meet WCAG AAA rating, or even AA level.

Our old color choosing for links in dark mode looks like this,
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hrh9l2h5iuzpt4lml6zo.png)
The gray one is visited link and the light blue one is unvisited link. The gray one is hard to read, but when I check the contrast ratio, the blue one also has AA rating instead of AAA.

There are many colors I can choose to meet the required contrast ratio. However, I want it to be more consistent with light mode (the default mode). In light mode, unvisited link has blue color, and visited link has the color like dark red-violet.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bsajdqe8jhtiltx1vyu7.png)

Therefore, I stick with blue for unvisited link in dark mode (but make it brighter to meet AAA rating) and change gray to a pale pink with a hint of purple.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1qvfemjlr3ecd5hy0v3r.png)

The [other PR](https://github.com/Seneca-CDOT/telescope/pull/2029) is to change the search bar color in dark mode. There is no config for dark mode **hovered** search bar. Therefore, the color is using the same one with light mode. I changed the color based on the same design pattern with light mode (same color with background but use border to tell apart).

These couple of weeks gave me lots of chance to work with user accessibility and I enjoy it. I took over another [user accessibility issue](https://github.com/Seneca-CDOT/telescope/issues/1608) and will be discussing with other developers to file more specific improvement issues.

#### DX
When I was shipping [this PR](https://github.com/Seneca-CDOT/telescope/pull/2018) to bring back our admin button in [UI2.0](https://github.com/Seneca-CDOT/telescope/projects/21#card-57567002), I found that the old method to run login server does not work. The reason is that we're in the transition to change to microservice. There are easier ways to start the needed services separately.

After talked to professor Dave, he suggested me to write a new document to help other developers handling these environment setups. (Since this is the second time I asked him about it)

In [this PR](https://github.com/Seneca-CDOT/telescope/pull/2020), I gather different scenarios and explain how to do env setup and explain why we do that. It is challenging for me since I need to read other people's code and to understand. This PR is still in progress, I hope I can get more people to review it and get it merged!