github / accessibility-alt-text-bot Goto Github PK

If a user adds an image in a code snippet, we should ignore the alt text.

<img alt='' src='' /> 

Hi Accessibility-alt-text-bot team :)

Context ❓

When the bot detects inaccessible alt text, or missing alt text, its target is generalized to "in the PR body" or "in the issue body", for example. However, if the issue body, for example, has multiple images, it's not clear which one is missing alt text from the comment itself.

Idea 💡

In the comment body, display which alt text is not accessible and/or which image has inaccessible / missing alt text.

What

This repo uses all-contributors to add contributors to the bottom of the readme. It would be nice to automate this process using the all-contributors bot.

When alt-text is added (and the flagged problem is resolved) the comment placed by the workflow should be removed or hidden (and marked as resolved)

When this action runs on a fork and doesn't have permissions to fetch comments (am I using the right terminology?), we see the dreaded Resource not accessible by integration error. Example from JoshuaKGoldberg/create-typescript-app#1110 -> https://github.com/JoshuaKGoldberg/create-typescript-app/actions/runs/7297169422/job/19886082551?pr=1110:

Run github/[email protected]
Run source /home/runner/work/_actions/github/accessibility-alt-text-bot/v1.4.0/queries.sh
Detected bad alt text: true
Event type: pr_description
GraphQL: Resource not accessible by integration (addComment)
Error: Process completed with exit code 1.

This is a similar issue to mtfoley/pr-compliance-action#368 -> mtfoley/pr-compliance-action#374.

Suggestion: can the bot log an informative message in the error about what it would post if it could? That way, if it's not able to actually post a comment, a useful error can still be logged.

What

A decorative image should not have alt text and instead should have null alt text: alt=''.

Currently we do not have guidance on decorative images in our automated message. Let's add some!

I really like the idea behind this action! However, the first few images I tried to test it with didn’t get flagged like I expected.

In the first instance, I happened to drag an image into the text area that had a filename that wasn’t “Screenshot ” (it was “edit-link.png”). I’m not sure if there’s a good way to identify stuff like this (maybe check alt-text with no spaces against a dictionary? tough to handle lots of languages, though…).

In the second instance, I tried just deleting the alt text entirely (all the variations of <img alt="" ...>, <img ...> (no alt attribute at all), and ![](<image url>)). These seem more obviously straightforward to identify, and it would be nice if they were caught by this action.

As a side note, I thought I’d configured something wrong because of the above. The first thing I did was look at the action’s logging output, and it would have been a little bit helpful to have the two outputs (whether an image was flagged and the type of thing being checked) labeled so I knew what they were:

(e.g. echo "Detected bad alt text: ${flag}" would have been helpful.)

Currently this action has support for Issues and Pull Requests. Let's add support for Discussions!

• Support for discussion body
• Support for discussion comment
• Cut new release

Right now, the bot's text is roughly:

Uh oh! @{{ author }}, the image you shared is missing helpful alt text. Check {{ link }}.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

...but nowhere does that link to this repository. I think it'd be useful for discoverability to immediately let people know what tooling is adding that message. I'd be most folks won't spend the time to dig into the repo's workflows to find it. Thoughts?

What

Now that we are using Markdown-lint to parse descriptions and comments, we have the ability for the bot to check against any markdown-lint. We should allow users to configure the lint rules that they want the bot to check against.

GitHub's accessibility alt text bot is complaining about images missing alt text in dependabot PR

Uh oh! https://github.com/dependabot[bot], the image you shared is missing helpful alt text. Check your pull request body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

The only image in the PR is the compatibility score which does have an alt text

[![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=github/accessibility-alt-text-bot&package-manager=github_actions&previous-version=1.2.0&new-version=1.3.0)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

Here the HTML output as well to verify:

<a href="https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores"><img src="https://camo.githubusercontent.com/dcc310bf5bed38d53e532c75b4c98d348b39d0121dab9d3bc931d10b10d7614b/68747470733a2f2f646570656e6461626f742d6261646765732e6769746875626170702e636f6d2f6261646765732f636f6d7061746962696c6974795f73636f72653f646570656e64656e63792d6e616d653d6769746875622f6163636573736962696c6974792d616c742d746578742d626f74267061636b6167652d6d616e616765723d6769746875625f616374696f6e732670726576696f75732d76657273696f6e3d312e322e30266e65772d76657273696f6e3d312e332e30" alt="Dependabot compatibility score" data-canonical-src="https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=github/accessibility-alt-text-bot&amp;package-manager=github_actions&amp;previous-version=1.2.0&amp;new-version=1.3.0" style="max-width: 100%;"></a>

What

As pointed out in JoshuaKGoldberg/create-typescript-app#997 the if statement in our alt-text-bot workflow is likely unnecessary.

Acceptance Criteria

• - Run a test to ensure the if statement is not necessary
• - Remove if statement from our 'test' workflow
• - Remove if statement from our readme

Testing alt-text-bot with an screen shot of the color orange. Appologies for having no alt text.

We're using this action in github.com/typescript-eslint/typescript-eslint and although it works well, it takes up a lot of workflow space. Since it needs to run on all comments & comment edits, every time another bot such as Netlify updates a comment -which is very often in auto-deploys!- the workflow runs. We filed typescript-eslint/typescript-eslint#8205 on ourselves to disable the action on bots.

Can I suggest having the README.md / first-run docs for accessibility-alt-text-bot disable the workflow for bot accounts?

There's something funny about the default docs of an action authored in the GitHub organization causing many many more workflow GitHub Action runs to take up more of GitHub's $.

Both the README and the blog post for this repo are very unclear about what it actually does. I was able to deduce from the code that it checks for HTML and Markdown images. But where do these check happen? Is it only for comments on pull requests or does it support the files added to the PR as well?

What

It would be great to add the generic-link-text markdown-lint rule. However, the name of this GitHub action would no longer apply if we added rules that do not pertain to alt text. Consider renaming this action and adding more rules.