khiga8 / github-a11y

Browser extension that encourages accessibility awareness while using GitHub

Hi there 👋

github-a11y's Issues

bug: this extension only loads on page refresh with turbo changes

Update validation to account for the fact that images are nested in links.

On GitHub, all images in markdown turn into links. Therefore, setting alt='' will never make sense because that results in a link being rendered without a name, potentially causing confusion. Our validation should account for that fact.

Test Issue

Please keep this for me 🙏

How to use this extension in Safari?

We now have guide for using this in Firefox and in Chrome.
Can this be used in Safari?

Replace Dev-tool components with Primer Components

We are rewriting css instead of using primer components -- this will lead to issues down the line if primer has a redesign. It would be nice to use primer components to avoid future issues and keep consistency.

We may need to spike this idea out. I am not actually sure how easy it is to use design system components inside a chrome extension since importing in a chrome extension is challenging.

Acceptance Criteria

• Replace buttons with primer button
• Replace links with primer link
• Utilize Primer color values

Add tests

Tests are always good for developer confidence.

Markdown suggestions should report bugs individually

Currently we report the "Non Descriptive Links" error once ... even if multiple links are not descriptive. We should report each bug individually to provide more descriptive feedback.

example

This markdown:

<a>Learn more</a>
<a>Click here</a>

Should output two non descriptive link errors -- right now it will output one.

Acceptance Criteria

• - each rule break is reported individually
• - a user can tell the exact link that is being broken. Perhaps this means adding a message "Link on line 10 is needs to be more descriptive.."

Validate against generic links

When there is alt text on a smaller image such as an emoji, the overlay text takes up the whole page

When there is alt text on a smaller image such as an emoji, the overlay text takes up the whole page. The content behind becomes unreadable. Also generally, long alt text won't be readable on small images. What's a good work around?

Installing in chrome shows error in extensions dashboard

After installing the extension in Chrome I see that there is an error.

Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.

Chrome: Version 113.0.5672.126 (Official Build) (x86_64)
OS: MacOS 13.4 (22F66)

Extension should detect when there is a change in UI (ex: switching to `Preview` tab)

This only runs once on page load, but it would be very high impact if this executed when switching between write and preview tabs to provide immediate feedback to those writing in markdown.

Maybe using MutationObserver?

This should account for how write/preview comment boxes are appended to pages.

This is a test issue

Add support for FireFox browser extension

Test

testing

Add Internationalization into the extension

We should add Internationalization throughout the chrome extension. I.e. We should have our chrome extension switch languages depending on user preference.

Acceptance Criteria

• The list of non descriptive link text changes with users language preference
• Our feedback changes with users language preference
• set the default language to english

Extension sometimes doesn't run upon first page load

Nesting the snippet in document.addEventListener("DOMContentLoaded", function(){ doesn't seem it.

Validate image alt text in devtool suggestions

Add a rule to validate image alt text inside the devtools suggestions.

Acceptance Criteria

• - does a user add alt text
• - is the alt text empty (this might be a warning instead of an error)

changes are not detected when previewing markdown file changes in web editor

I was working on a README update through web editor but the extension didn't run when switching to Preview tab.

Putting some print statements in, there is a mutation.target that matches .js-commit-preview but not .markdown-body even though the content of markdown-body changes. 🤔

Ensure that alt overlay appears on images that are links

SVG validation for mermaid charts?

Migrate to manifest 3

Manifest 2 is reaching end of life in 2023

Allow customization through extension options

It would be nice to allow customization without going into CSS file but not sure what options should be part of the options menu. I don't want to the menu to be limiting, so further research is required.