accessibleforall / accessiblewebdev

A resource for developers wanting to learn the basics of accessibility

Accessible For All

This is the place where all of the documentation and information about the Accessible For All Organisation will live. Right now it's a work in progress. If you have anything you'd like to add please feel free to make a suggestion.

Contributing

• To report a bug, please raise a bug report
• To request a new feature, please raise an issue
• To make a contribution to documentation, translation, code or design please follow the Contributing Guidelines

License

AccessibleForAll is licensed under the MIT License - see License

accessiblewebdev's Issues

import WIP to icons template

Please import the WorkInProgress component into the IconsTemplate found inside components/ContentTemplates folder.

Then render the WorkInProgress component instead of the current div and placeholder sentence.

See the AlertsTemplate component if unsure how to do this and follow the same pattern.

Update meta description

In pages/index.tsx the current meta description on line 12 is <meta name="description" content="Generated by create next app" />

This should be updated to <meta name="description" content="Learn the basics about web accessibility in a clear and easy to understand way" />

import WIP to form template

Please import the WorkInProgress component into the FormTemplate found inside components/ContentTemplates folder.

Then render the WorkInProgress component instead of the current div and placeholder sentence.

See the AlertsTemplate component if unsure how to do this and follow the same pattern.

[Feature] Open Graph

Is your feature request related to a problem? Please describe.
A link without open graph tags reduces the click rate.

Describe the solution you'd like
Add Open Graph meta tags, Open Graphs meta tags help users optimize their social media link previews, so users always see the essential information.

Additional context

Import WIP into breadcrumbs template

Please import the WorkInProgress component into the BreadcrumbsTemplate found inside components/ContentTemplates folder.

Then render the WorkInProgress component instead of the current div and placeholder sentence.

See the AlertsTemplate component if unsure how to do this and follow the same pattern.

Add MenusTemplate component

In the components/templates folder add a MenusTemplate.tsx file. Copy the structure of one of the other templates (they're all currently the same apart from name - contents will be added later). Update the component name so it matches the file name.

In the pages/[content].tsx file import the template and add it alphabetically in the correct place between the layout tags {page === "menus" && <Menus />}

Add the template data to the config file in data/pages.tsx: { name: "Menus", href: "/menus", content: "menus" }

Add ListsTemplate component

In the components/templates folder add a ListsTemplate.tsx file. Copy the structure of one of the other templates (they're all currently the same apart from name - contents will be added later). Update the component name so it matches the file name.

In the pages/[content].tsx file import the template and add it alphabetically in the correct place between the layout tags {page === "lists" && <Lists />}

Add the template data to the config file in data/pages.tsx: { name: "Lists", href: "/lists", content: "lists" }

Import WIP component into AudioTemplate

Please import the WorkInProgress component into the AudioTemplate found inside components/ContentTemplates folder.

Then render the WorkInProgress component instead of the current div and placeholder sentence.

See the AlertsTemplate component if unsure how to do this and follow the same pattern.

Update and Add More Issue Templates

Should I work on this?

Update next config file

The next config file currently looks like this:

const nextConfig = {
	reactStrictMode: true,
	swcMinify: true,
	i18n: {
		locales: ["en", "sv"],
		defaultLocale: "en",
	},
}

module.exports = nextConfig

It should be updated to import i18n like this instead:

/** @type {import('next').NextConfig} */

const { i18n } = require('./next-i18next.config');

const nextConfig = {
	reactStrictMode: true,
	swcMinify: true,
	i18n
}

module.exports = nextConfig

Add i18n config

In the next.config.js file add the following code snippet after line 4

i18n: {
    locales: ['en'. 'sv'],
    defaultLocale: 'en',
  },

Add Links Template Components

Hi Emma, I notice you haven't added the links template component. I would like to work on that.

Add a PR template

Link to the official docs

Gitpodify the repo

Add a .gitpod.yml file to the root of the repository.

The contents of the file should be similar to the one here https://github.com/EddieHubCommunity/LinkFree/blob/main/.gitpod.yml but npm should be switched for yarn

Add WorkInProgress component

In the components folder add a new folder called WorkInProgress and inside that add two files: WorkInProgress.tsx and WorkInProgress.module.css.

Inside the WorkInProgress.tsx file create a react component with the same name that is a section.

The section should include:

• a h2 with text - This section is a work in progress
• a p tag with text - Please come back at a later date.
• a link to the github repo with text - Let us know what information you're looking for.

Import WIP to lists template

Please import the WorkInProgress component into the ListsTemplate found inside components/ContentTemplates folder.

Then render the WorkInProgress component instead of the current div and placeholder sentence.

See the AlertsTemplate component if unsure how to do this and follow the same pattern.

Bug: a missing comma (,) in file pages.ts is throwing an error

Describe the bug
A missing , in the file pages.ts throws an error

To Reproduce
Steps to reproduce the behavior:

1. Run yarn dev
2. Go to http://localhost:3000/
3. See the error

Expected behavior
It's expected to see the home page.

Screenshots

Desktop (please complete the following information):

• OS: MacOs
• Browser Chrome, Safari, firefox

Additional context
I believe it was introduced in PR #54

Add gitpod badge to readme

Please add the following code snippet to the bottom of the readme file

[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/AccessibleForAll/AccessibleWebDev)

Create i18n config file

In the root of the project create a file named next-i18next.config.js

Inside the file add the following code snippet:

module.exports = {
  i18n: {
    locales: ['en', 'sv'],
    defaultLocale: 'en',
  },
};

Add sentence about gitpod to readme.

Between the gitpod heading and the gitpod button add the following sentence to explain what Gitpod is:

Gitpod allows you to view and interact with this code directly in the browser without the need to clone it to your local machine. If you wish to make changes that lead to a pull request, remember to fork the repository then click the Gitpod button in the forked readme. Otherwise, feel free to play around with the code by clicking here.

404 page

Add a 404.tsx file to the pages folder. Wrap the contents with the layout (see other pages for an example). Then write a 404 message eg. Oops, that page doesn't exist! and add a link back to the homepage.

Import WIP to menus template

Please import the WorkInProgress component into the MenusTemplate found inside components/ContentTemplates folder.

Then render the WorkInProgress component instead of the current div and placeholder sentence.

See the AlertsTemplate component if unsure how to do this and follow the same pattern.

Add TablesTemplate component

In the components/templates folder add a TablesTemplate.tsx file. Copy the structure of one of the other templates (they're all currently the same apart from name - contents will be added later). Update the component name so it matches the file name.

In the pages/[content].tsx file import the template and add it alphabetically in the correct place between the layout tags {page === "tables" && <Tables />}

Add the template data to the config file in data/pages.tsx: { name: "Tables", href: "/tables", content: "tables" }

Update .gitpod.yml file

Describe the bug
On line 5 in the .gitpod.yml file it says yarn run start when it should say yarn dev

Theme Switcher should close when someone clicks outside of the component

Describe the bug
When the theme switcher dropdown is open and someone clicks outside of the component with a mouse, the dropdown should close and focus should return to the button.

Import WIP to Images template

Please import the WorkInProgress component into the ImagesTemplate found inside components/ContentTemplates folder.

Then render the WorkInProgress component instead of the current div and placeholder sentence.

See the AlertsTemplate component if unsure how to do this and follow the same pattern.

Add NavigationTemplate component

In the components/templates folder add a NavigationTemplate.tsx file. Copy the structure of one of the other templates (they're all currently the same apart from name - contents will be added later). Update the component name so it matches the file name.

In the pages/[content].tsx file import the template and add it alphabetically in the correct place between the layout tags {page === "navigation" && <Navigation />}

Add the template data to the config file in data/pages.tsx: { name: "Navigation", href: "/navigation", content: "navigation" }

Add Skiplink

Add a skiplink button component.

[] It should be a html a element
[] It should be imported into the layout component and placed before the header.
[] It should be hidden offscreen a few pixels above where it will normally be positioned but appear in the center of the header when tabbed to. Maybe a small transition could be added so it slides into place?
[] It should be styled to have black text, white background and a pink border (like a button).
[] It should move focus to the main element (also inside layout) when pressed - add an id to the main tag to do this.
[] Text should be: Skip to main content

Add ButtonsTemplate component

In the components/templates folder add a ButtonsTemplate.tsx file. Copy the structure of one of the other templates (they're all currently the same apart from name - contents will be added later). Update the component name so it matches the file name.

In the pages/[content].tsx file import the template and add it alphabetically in the correct place between the layout tags {page === "buttons" && <Buttons />}

Add the template data to the config file in data/pages.tsx: { name: "Buttons", href: "/buttons", content: "buttons" }

Add favicon

The project is currently using the default next favicon. Either it can be switched out for the AccessibleForAll icon on github or if you wish to design one that is in line with the project feel free to have a go at that.

Theme Switcher should close when tabbed out of

Describe the bug
If someone is tabbing through the theme switcher, when it reaches the last item (dark) and someone continues to tab they end up on the navigation (home). When this happens the popup should automatically close.

Add a footer

Create a footer component that can be imported into the layout component.

The Footer should have the same background and text colors as the header.

Add a link to the the github repository https://github.com/AccessibleForAll/AccessibleWebDev

Change font family of paragraph text.

Is your feature request related to a problem? Please describe.
This is a new feature.

Describe the solution you'd like
I would like to change the font family of paragrah text to either Inconsolata or to Roboto in order to differentiate it from the header and sidebar.

Describe alternatives you've considered
No alternatives. You can help me to choose any one of the above fonts which looks good to you.

Additional context
This is under hacktoberfest contribution. Kindly assign it to me.

Indicate to Screen readers which theme is active when in the theme popup

Because only one theme can be active at once then an aria-pressed attribute should fix this problem attached to each button in the themeSwitcher component (In Header.tsx). However, it needs to detect which theme is active when the page firsts loads and if system settings are changed while the page is open, not just when the buttons are pressed.

Update button text on ThemeSwitcher component

OS settings should be updated to Device settings. The container probably needs to be made wider to fit this.
Light should be updated to Light mode
Dark should be updated to Dark mode

Add LinksTemplate component

In the components/templates folder add a LinksTemplate.tsx file. Copy the structure of one of the other templates (they're all currently the same apart from name - contents will be added later). Update the component name so it matches the file name.

In the pages/[content].tsx file import the template and add it alphabetically in the correct place between the layout tags {page === "links" && <Links />}

Add the template data to the config file in data/pages.tsx: { name: "Links", href: "/links", content: "links" }

Import WIP to captchas template

Please import the WorkInProgress component into the CaptchasTemplate found inside components/ContentTemplates folder.

Then render the WorkInProgress component instead of the current div and placeholder sentence.

See the AlertsTemplate component if unsure how to do this and follow the same pattern.

Add HeadingsTemplate component

In the components/templates folder add a HeadingsTemplate.tsx file. Copy the structure of one of the other templates (they're all currently the same apart from name - contents will be added later). Update the component name so it matches the file name.

In the pages/[content].tsx file import the template and add it alphabetically in the correct place between the layout tags {page === "headings" && <Headings />}

Add the template data to the config file in data/pages.tsx: { name: "Headings", href: "/headings", content: "headings" }

import WIP to buttons template

Please import the WorkInProgress component into the ButtonsTemplate found inside components/ContentTemplates folder.

Then render the WorkInProgress component instead of the current div and placeholder sentence.

See the AlertsTemplate component if unsure how to do this and follow the same pattern.

Add BreadcrumbsTemplate component

In the components/templates folder add a BreadcrumbsTemplate.tsx file. Copy the structure of one of the other templates (they're all currently the same apart from name - contents will be added later). Update the component name so it matches the file name.

In the pages/[content].tsx file import the template and add it alphabetically in the correct place between the layout tags {page === "breadcrumbs" && <Breadcrumbs />}

Add the template data to the config file in data/pages.tsx: { name: "Breadcrumbs", href: "/breadcrumbs", content: "breadcrumbs" }

Move focus back to theme button when popup closes

Describe the bug
The focus does not return to the theme button when a choice is made with the keyboard.

To Reproduce
Steps to reproduce the behavior:

1. Tab to theme
2. Press enter to open the pop up
3. Tab through options and choose one with enter or space
4. The focus does not return to the theme button

Expected behavior
Focus returns to the theme button when the popup closes. This can most probably be done with saving a ref to the button when the popup opens and returning the focus when the button is pressed which triggers the popup to close.

Desktop (please complete the following information):
MacOS Chrome but probably the same on all browsers

Add AlertsTemplate component

In the components/templates folder add a AlertsTemplate.tsx file. Copy the structure of one of the other templates (they're all currently the same apart from name - contents will be added later). Update the component name so it matches the file name.

In the pages/[content].tsx file import the template and add it alphabetically in the correct place between the layout tags {page === "alerts" && <Alerts />}

Add the template data to the config file in data/pages.tsx: { name: "Alerts", href: "/alerts", content: "alerts" }

Add FormsTemplate component

In the components/templates folder add a FormsTemplate.tsx file. Copy the structure of one of the other templates (they're all currently the same apart from name - contents will be added later). Update the component name so it matches the file name.

In the pages/[content].tsx file import the template and add it alphabetically in the correct place between the layout tags {page === "forms" && <Forms />}

Add the template data to the config file in data/pages.tsx: { name: "Forms", href: "/forms", content: "forms" }

Import WIP to charts template

Please import the WorkInProgress component into the ChartsTemplate found inside components/ContentTemplates folder.

Then render the WorkInProgress component instead of the current div and placeholder sentence.

See the AlertsTemplate component if unsure how to do this and follow the same pattern.

import WIP to headings template

Please import the WorkInProgress component into the HeadingsTemplate found inside components/ContentTemplates folder.

Then render the WorkInProgress component instead of the current div and placeholder sentence.

See the AlertsTemplate component if unsure how to do this and follow the same pattern.

Add PaginationTemplate component

In the components/templates folder add a PaginationTemplate.tsx file. Copy the structure of one of the other templates (they're all currently the same apart from name - contents will be added later). Update the component name so it matches the file name.

In the pages/[content].tsx file import the template and add it alphabetically in the correct place between the layout tags

Add the template data to the config file in data/pages.tsx

Import WIP component to Animation template

Please import the WorkInProgress component into the AnimationTemplate found inside components/ContentTemplates folder.

Then render the WorkInProgress component instead of the current div and placeholder sentence.

See the AlertsTemplate component if unsure how to do this and follow the same pattern.

Add a GitHub logo in the Navbar

Is your feature request related to a problem? Please describe.
No, it's not related to a problem.

Describe the solution you'd like
Add a GitHub logo in the navbar next to the theme changer which will redirect to this repo.

Describe alternatives you've considered
No alternatives.

Additional context
This is under hacktoberfest contribution. Kindly assign it to me.

Add ModalsTemplate component

In the components/templates folder add a ModalsTemplate.tsx file. Copy the structure of one of the other templates (they're all currently the same apart from name - contents will be added later). Update the component name so it matches the file name.

In the pages/[content].tsx file import the template and add it alphabetically in the correct place between the layout tags {page === "modals" && <Modals />}

Add the template data to the config file in data/pages.tsx: { name: "Modals", href: "/modals", content: "modals" }

Import WIP to links template

Please import the WorkInProgress component into the LinksTemplate found inside components/ContentTemplates folder.

Then render the WorkInProgress component instead of the current div and placeholder sentence.

See the AlertsTemplate component if unsure how to do this and follow the same pattern.