Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessibility edit #221

Open
wants to merge 9 commits into
base: digitdustin/restyling
Choose a base branch
from
Open

Accessibility edit #221

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
8b63b2f
Made excersize buttons more visible
MatthewJung14 Mar 9, 2023
2f93e65
Changed excersize buttons to be blue when hovered
MatthewJung14 Mar 9, 2023
4647279
Added role=button for divs that act like buttons
MatthewJung14 Mar 9, 2023
aaf4e5d
Added alt attribute to items.
MatthewJung14 Mar 9, 2023
3be1b3f
Added tabIndex types and roles for icons
MatthewJung14 Mar 9, 2023
50d35e9
Added tabIndex for exercises button
MatthewJung14 Mar 9, 2023
6f08df5
Added role for crocodile on a scooter
MatthewJung14 Mar 9, 2023
0def517
Added skip link
MatthewJung14 Mar 13, 2023
b2b9a57
Changed role from contentinfo to main
MatthewJung14 Mar 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions components/CodeEditor/CodeEditorContainer/CodeEditorView/editorIcons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export const icons: Record<string, JSX.Element> = {
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="button"
>
<path
fillRule="evenodd"
Expand All @@ -20,6 +21,7 @@ export const icons: Record<string, JSX.Element> = {
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="button"
>
<path
fillRule="evenodd"
Expand All @@ -35,6 +37,7 @@ export const icons: Record<string, JSX.Element> = {
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="button"
>
<path
fillRule="evenodd"
Expand All @@ -50,6 +53,7 @@ export const icons: Record<string, JSX.Element> = {
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="button"
>
<path
fillRule="evenodd"
Expand Down
4 changes: 2 additions & 2 deletions components/ContentSidebar/ContentSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ const ContentSidebar = ({
{/* Header */}
<div className="w-full h-20 min-h-[5rem] flex items-center px-6 justify-between">
<h1 className="text-white font-dm font-medium text-lg">Exercises</h1>
<div
<div role="button" tabIndex={0}
onClick={() => {
toggleContentSidebar(!contentSidebarHidden);
}}
Expand All @@ -89,7 +89,7 @@ const ContentSidebar = ({
{toggleExercisesLinks.map((link) => (
<Tabs.Trigger
key={link.id}
className="px-3 py-3 transition data-[state=active]:border-b data-[state=inactive]:border-b-slate-400 data-[state=active]:border-b-emerald-500 flex-1 flex items-center justify-center text-sm font-dm leading-none text-slate-500 select-none hover:text-white data-[state=active]:text-white outline-none cursor-default"
className="px-3 py-3 transition data-[state=active]:border-b data-[state=inactive]:text-white border-b-slate-500 data-[state=active]:border-b-emerald-400 flex-1 flex items-center justify-center text-sm font-dm leading-none text-slate-500 select-none hover:bg-blue-500/10 data-[state=active]:text-white outline-none cursor-default"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this should be reviewed by @digitdustin

value={link.id}
>
{link.text}
Expand Down
14 changes: 7 additions & 7 deletions components/SideNav/SideNavigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,7 @@ const SideNavigation = ({
asChild
className="rounded-sm relative"
>
<Image src={item.icon} layout="fill" objectFit="cover" />
<Image src={item.icon} layout="fill" objectFit="cover" alt={item.name}/>
</AspectRatio.Root>
</div>
{/* Class Info */}
Expand All @@ -231,7 +231,7 @@ const SideNavigation = ({
</NavLinkTooltip>
))}
<NavLinkTooltip disabled={!mainSidebarHidden} text="Add Class">
<div
<div role="button" tabIndex={0}
className={`w-full rounded-sm relative transition overflow-hidden cursor-pointer px-1 flex items-center group justify-start h-10`}
>
<div
Expand Down Expand Up @@ -312,7 +312,7 @@ const SideNavigation = ({
setTheme(currentTheme === "dark" ? "light" : "dark");
}}
>
<div className="flex space-x-4">
<div className="flex space-x-4" role="button" tabIndex={0}>
<div className="w-5 h-5 min-w-[20px] relative">
<div
className={`absolute top-0 left-0 w-full h-full transition-all ${
Expand Down Expand Up @@ -360,7 +360,7 @@ const SideNavigation = ({
</div>
{/* Settings */}
<NavLinkTooltip text="Settings" disabled={!mainSidebarHidden}>
<div
<div role="button" tabIndex={0}
className={`w-full cursor-pointer h-12 rounded-md overflow-hidden flex items-center justify-start px-[14px] group space-x-4 text-nav-inactive-light hover:bg-emerald-500/5`}
>
<div className="w-5 h-5 min-w-[20px]">{icons.cog(false)}</div>
Expand All @@ -377,18 +377,18 @@ const SideNavigation = ({
<Divider />
{/* Collapse/Expand Button */}
<NavLinkTooltip text={"Expand"} disabled={!mainSidebarHidden}>
<div
<div role="button" tabIndex={0}
onClick={() => toggleMainSidebar(!mainSidebarHidden)}
className={`w-full cursor-pointer h-12 rounded-md overflow-hidden flex items-center justify-start px-[14px] group space-x-4 text-nav-inactive-light hover:bg-emerald-500/5`}
>
<div
<div
className={`w-5 h-5 min-w-[20px] transition-transform ${
!mainSidebarHidden ? "rotate-180" : ""
}`}
>
{icons.expandArrow(false)}
</div>
<div
<div
className={`text-sm group-hover:text-white transition text-ellipsis whitespace-nowrap ${
!mainSidebarHidden ? "opacity-100" : "opacity-0"
}`}
Expand Down
15 changes: 15 additions & 0 deletions components/SideNav/navIcons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ export const EdugatorLogo = () => (
viewBox="0 0 25 5"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="none"
>
<path
fillRule="evenodd"
Expand All @@ -21,6 +22,7 @@ export const icons: Record<string, (active: boolean) => JSX.Element> = {
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="none"
>
<path
fillRule="evenodd"
Expand All @@ -36,6 +38,7 @@ export const icons: Record<string, (active: boolean) => JSX.Element> = {
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="none"
>
<path
fillRule="evenodd"
Expand All @@ -57,6 +60,7 @@ export const icons: Record<string, (active: boolean) => JSX.Element> = {
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="none"
>
<path
d="M2.56529 0.307575C7.07157 0.842213 11.037 2.61669 12 3.57969C12.963 2.61669 16.9284 0.842458 21.4347 0.307819C22.8449 0.1405 24 1.30264 24 2.7228V16.4371C24 17.8572 22.8394 18.989 21.4421 19.2427C18.2863 19.8156 15.6616 21.329 13.9872 22.5252C12.8316 23.3507 11.1672 23.3496 10.0116 22.5242C8.33712 21.3282 5.71294 19.8153 2.55794 19.2424C1.16062 18.9887 0 17.8571 0 16.4368V2.72255C0 1.30239 1.15502 0.140256 2.56529 0.307575Z"
Expand All @@ -77,6 +81,7 @@ export const icons: Record<string, (active: boolean) => JSX.Element> = {
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="none"
>
<path
fillRule="evenodd"
Expand Down Expand Up @@ -104,6 +109,7 @@ export const icons: Record<string, (active: boolean) => JSX.Element> = {
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="none"
>
<path
fillRule="evenodd"
Expand All @@ -130,6 +136,7 @@ export const icons: Record<string, (active: boolean) => JSX.Element> = {
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="none"
>
<path
fillRule="evenodd"
Expand All @@ -145,6 +152,7 @@ export const icons: Record<string, (active: boolean) => JSX.Element> = {
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="none"
>
<path
fillRule="evenodd"
Expand All @@ -160,6 +168,7 @@ export const icons: Record<string, (active: boolean) => JSX.Element> = {
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="none"
>
<path
fillRule="evenodd"
Expand All @@ -176,6 +185,7 @@ export const icons: Record<string, (active: boolean) => JSX.Element> = {
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="none"
>
<path
fillRule="evenodd"
Expand All @@ -197,6 +207,7 @@ export const icons: Record<string, (active: boolean) => JSX.Element> = {
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="none"
>
<path
fillRule="evenodd"
Expand All @@ -212,6 +223,7 @@ export const icons: Record<string, (active: boolean) => JSX.Element> = {
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="none"
>
<path
fillRule="evenodd"
Expand Down Expand Up @@ -243,6 +255,7 @@ export const icons: Record<string, (active: boolean) => JSX.Element> = {
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="none"
>
<path
fillRule="evenodd"
Expand All @@ -258,6 +271,7 @@ export const icons: Record<string, (active: boolean) => JSX.Element> = {
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="none"
>
<path
d="M12.3371 17.5716C15.4141 17.5716 17.9085 15.0772 17.9085 12.0001C17.9085 8.92312 15.4141 6.42871 12.3371 6.42871C9.2601 6.42871 6.76569 8.92312 6.76569 12.0001C6.76569 15.0772 9.2601 17.5716 12.3371 17.5716Z"
Expand All @@ -277,6 +291,7 @@ export const icons: Record<string, (active: boolean) => JSX.Element> = {
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="none"
>
<path
fillRule="evenodd"
Expand Down
9 changes: 8 additions & 1 deletion pages/code/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@ import { ReactNode } from "react";
import { Container, Typography, Grow } from "@mui/material";
import Lottie from "lottie-react";
import CrocodileOnAScooter from "public/crocodileonascooter.json";
import React, { useState } from 'react';

export default function CodePage() {
return (
<div className="flex items-center justify-center w-full flex-col h-full bg-slate-50 dark:bg-nav-darkest">
<div className="flex items-center justify-center w-full flex-col h-full bg-slate-50 dark:bg-nav-darkest" role="contentinfo">
kapooramanpreet marked this conversation as resolved.
Show resolved Hide resolved
<Lottie
animationData={CrocodileOnAScooter}
style={{
Expand All @@ -19,10 +20,16 @@ export default function CodePage() {
<p className="text-slate-900 dark:text-slate-300">
Select an exercise to get started.
</p>
<a href="https://edugator-tailwind.vercel.app/code/61dc5d16fd23ac28594f53ae" //Must change link after deployment
className="transition -top-5 bg-primary text-primary-content absolute p-3 m-3 -translate-y-16 focus:translate-y-0"
> Or click here to get started!
</a>
</div>
);
}

CodePage.getLayout = function getLayout(page: ReactNode) {
return <PlaygroundLayout>{page}</PlaygroundLayout>;
};