From Front Desk to Front End p. 33 - Building an Accessible Toggle that Uses JS 1/3

Photo by Matt Hardy on Unsplash

Hi, I'm Tauri! I am a Front End Developer and a student (and enrollment counselor) with Skillcrush, the online coding and design school with a heart! I am looking for employment with a company, and working on adding to my skillset every day! This blog is chronicling my most recent projects! Thank you for reading!

My current active project is building this API UI interface with Front End Mentor. The job search and application process is taking a lot of my time and energy outside of work so unfortunately I'm not able to spend as much time on these as I truly like, but a little every day has still been some satisfying progress! 💪✨

Highlights of this Week:

• Continued solving some algorithms with my Pair Programming partner at Chingu thru HackerRank, and I was able to get through my initial intimidation when we first started and using my logic to start parsing them out!
• Started building a better and more accessible toggle component by using the resources given to me by a mentor thru Frontend Mentor!

Monday 5/22/23:

I just wanted to go into more detail about the process how my pair programming partner and I went through solving algorithms!

My summary of the challenge we tackled today: Given an array, find how many numbers are positive, how many negative, and how many are 0s and return these numbers as a ratio over the total number of numbers in the array.

So we came up with this on our own, but weren't sure if we could return multiple lines by putting commas between the outputs we were looking for.

function plusMinus(arr) {
let negative = 0;
let positive = 0;
let zero = 0;
for (let i = 0; i < arr.length; i++) {
if ((Math.sign(arr[i])) === 1) {
positive += 1;
}
if ((Math.sign(arr[i]) === -1) {
negative += 1;
}
if ((Math.sign(arr[i]) === 0) {
zero += 1;
}
}
return negative/arr.length.toFixed(6),
positive/arr.length,
zero/arr.length;
}

This wasn't working however so instead we consoled out each line seperately, and made our loop a little simple by designating n as the length of the array. Before creating rations we just wanted to make sure the values were getting added to properly. We actually ran this thru ChatGPT when it wasn't working, and it very helpfully pointed out to us that we were missing the semi-colons after our iterated positive, negative, zero statements in the loop! So small and silly but important and ChatGPT saved us some time by pointing out the syntax error.

function plusMinus(arr) {
const n = arr.length;
let negative = 0;
let positive = 0;
let zero = 0;
for (let i = 0; i < n; i++) {
const num = arr[i];
if (Math.sign(num) === 1) {
positive++;
} else if (Math.sign(num) === -1) {
negative++;
} else {
zero++;
}
console.log(positive);
console.log(negative),
console.log(zero);
}

This worked so then we added more statements to create the ratios, and the toFixed method in order to create a ratio within the parameters requested by the challenge!

function plusMinus(arr) {
const n = arr.length;
let negative = 0;
let positive = 0;
let zero = 0;
for (let i = 0; i < n; i++) {
const num = arr[i];
if (Math.sign(num) === 1) {
positive++;
} else if (Math.sign(num) === -1) {
negative++;
} else {
zero++;
}
}
const positiveRatio = positive / n;
const negativeRatio = negative / n;
const zeroRatio = zero / n;
console.log(positiveRatio.toFixed(6));
console.log(negativeRatio.toFixed(6)),
console.log(zeroRatio.toFixed(6));
}

Et voilà!

Tuesday 5/23/23:

Back to my Dictionary Web App!
I got some AMAZING feedback and resources on building an accessible toggle last week, especially this extremely well written guide by Kelly Giraudel! Radio buttons were suggested as an excellent way to build a toggle, but after reading the referenced article by Sara Soueidan, I felt like Kelly's build with a checkbox variant was more appropriate bc the toggle indicated in the design is not a "light mode/dark mode" toggle, it's turning the dark mode on and off! But the check box wasn't the most appropriate because I have decided not to call in the change with CSS as Kelly Giraudel did (super cool to learn about tho) but have called it in with JS, so I am using the button variant she suggests. To trigger whether or not the dark mode is on or off we use the aria-pressed value for buttons which I learned more about on MDN Docs! 💪✨
Today I started updating the HTML. Within the switch-container div class I already had set up, I set up a button instead of the checkbox I had. I set up a span class to be the toggle-display but it's hidden bc it'll be hidden if CSS is not available and just show the checkbox, and we'll override this in the CSS for when it is available. Then in the CSS I disabled the default styles for the button in much the same way I had previously done with the checkbox styling. The focus styles will be specified for the toggle input so I removed the default focus online on the button as well. For now I've just commented out the HTML and CSS input reset values that I have no replaced while I keep working on this.
Writing this blog and editing the styles certainly takes twice as long, but this is some great documentation and practice at doing that!

Wednesday 5/24/23:

Today I made the toggle super accessible by adding some icons that weren't originally in the design in order to signify if the switch is toggled on and off. This allows my toggle to really abide by WGAG guidelines that specify the importance of using color in order to indicate status changes for the checkbox, but also indicate that color should not be the only signifier to make it accessible for the color blind. I put them between the input and the toggle. We're also adding a visible label to clearly identify the toggle, which I'll have to fandangle styles for once I set the others for sure.
I could understand the explanation of all the values the svgs were set to that were explained in the blog, quoted directly here.

• We use aria-hidden="true" on our SVGs, because they should not be discoverable by assistive technologies since they are strictly decorative.
• We use focusable="false" on our SVGs as well to avoid an issue with Internet Explorer where SVGs are focusable by default.
• We use hidden on the .Toggle__display container to hide it when CSS is not available, since it should fall back to a basic checkbox. Its display value will be overriden in CSS.

But I have some things to research here.
svg viewbox is one that looked pretty self-expanatory considering that the icons are vectors and there are four vectors. Confirmed my understanding on MDN Web Docs.
And what is this svg xmlns attribute? Well it allows all of the values of the SVG to be properly namespaced to the content.
I also learned about CREATING SHAPES with the path value. And colors are designated by fill and stroke where the fill is the color inside the object and the stroke is the color of the line around the object. 💥

Thursday 5/25/23:

I learned about the flex: inline-flex; style in CSS from Kelly Giraudel's guide on accessible toggles in the section about styling the container the toggle is in, which is a game changer bc I kept doing a flex and then an align or justify of the content (depending on which axis the content was oriented) to achieve that effect!
I also learned about the ch unit, which is as wide as the "o" in the font you are using! Whaaaaat??!! Kelly gives us a flex gap in the CSS of 1ch but gap support is spotty so I elected to go with a right margin gap of 1ch as she also proposed.
I brought back in the styles I had previously under a switch class but now named toggle-display bc I like Kelly's naming conventions. I had to add flex-properties to it in order to center the new icons I added within it, and I added a thin semi-transparent border around it per her suggestions so that it would be visible in Window's high contrast mode!

Saturday 5/27/23:

I brought my "ball" or "handle" into my toggle by commenting the previous styles I had made back into the code, but renamed as a ::before pseudoelement to my toggle-display class. I had to add a content: ''; property in order to create a space for the ball pseudoelement, and I set a z-index in order to pull the ball on top of the toggle and the icons. I added a semi-transparent border to the ball as well so it would be visible in Windows High Contrast Mode.