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.

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

Feature/add null text alt #9296

Open
wants to merge 10 commits into
base: master
Choose a base branch
from

Conversation

JanhviHarwani
Copy link

@JanhviHarwani JanhviHarwani commented May 21, 2024

See JENKINS-62424.

Testing done

Proposed changelog entries

Proposed upgrade guidelines

N/A

Submitter checklist

Edit tasklist title
Beta Give feedback Tasklist Submitter checklist, more options

Delete tasklist

Delete tasklist block?
Are you sure? All relationships in this tasklist will be removed.
  1. The Jira issue, if it exists, is well-described.
    Options
  2. The changelog entries and upgrade guidelines are appropriate for the audience affected by the change (users or developers, depending on the change) and are in the imperative mood (see examples). Fill in the Proposed upgrade guidelines section only if there are breaking changes or changes that may require extra steps from users during upgrade.
    Options
  3. There is automated testing or an explanation as to why this change has no tests.
    Options
  4. New public classes, fields, and methods are annotated with @Restricted or have @since TODO Javadocs, as appropriate.
    Options
  5. New deprecations are annotated with @Deprecated(since = "TODO") or @Deprecated(forRemoval = true, since = "TODO"), if applicable.
    Options
  6. New or substantially changed JavaScript is not defined inline and does not call eval to ease future introduction of Content Security Policy (CSP) directives (see documentation).
    Options
  7. For dependency updates, there are links to external changelogs and, if possible, full differentials.
    Options
  8. For new APIs and extension points, there is a link to at least one consumer.
    Options

Desired reviewers

@mention

Before the changes are marked as ready-for-merge:

Maintainer checklist

Edit tasklist title
Beta Give feedback Tasklist Maintainer checklist, more options

Delete tasklist

Delete tasklist block?
Are you sure? All relationships in this tasklist will be removed.
  1. There are at least two (2) approvals for the pull request and no outstanding requests for change.
    Options
  2. Conversations in the pull request are over, or it is explicit that a reviewer is not blocking the change.
    Options
  3. Changelog entries in the pull request title and/or Proposed changelog entries are accurate, human-readable, and in the imperative mood.
    Options
  4. Proper changelog labels are set so that the changelog can be generated automatically.
    Options
  5. If the change needs additional upgrade steps from users, the upgrade-guide-needed label is set and there is a Proposed upgrade guidelines section in the pull request title (see example).
    Options
  6. If it would make sense to backport the change to LTS, a Jira issue must exist, be a Bug or Improvement, and be labeled as lts-candidate to be considered (see query).
    Options

Open Issue: https://issues.jenkins.io/plugins/servlet/mobile#issue/JENKINS-62424
resolved: added null text to alt attribute to img tags wherever necessary

Copy link

welcome bot commented May 21, 2024

Yay, your first pull request towards Jenkins core was created successfully! Thank you so much!

A contributor will provide feedback soon. Meanwhile, you can join the chats and community forums to connect with other Jenkins users, developers, and maintainers.

@MarkEWaite
Copy link
Contributor

@JanhviHarwani I'm leaving this pull request open because it might address the Jira issue that is mentioned. It does not complete the pull request template. It does not provide a description of the testing that was performed to assure that the pull request works as expected. It does not include a usable changelog entry.

Could you complete those items on the pull request?

We're happy to have more contributors to Jenkins, but we need those new contributors to follow the processes that we've outlined so that we don't waste the time of maintainers as they process pull requests that do not provide the required information.

Copy link
Contributor

@MarkEWaite MarkEWaite left a comment

Choose a reason for hiding this comment

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

Thanks for the proposals. I've suggested different text based on the context of the images.

@@ -20,6 +20,6 @@ firstPRMergeComment: >

<a href="https://www.jenkins.io/participate/" target="_blank">
<picture>
<img width="600" src="https://raw.githubusercontent.com/jenkinsci/jenkins/master/.github/images/jenkins-welcome.svg">
<img width="600" alt="jenkins welcome page" src="https://raw.githubusercontent.com/jenkinsci/jenkins/master/.github/images/jenkins-welcome.svg">
Copy link
Contributor

Choose a reason for hiding this comment

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

Jenkins is an English language proper noun. It needs to be capitalized.

Suggested change
<img width="600" alt="jenkins welcome page" src="https://raw.githubusercontent.com/jenkinsci/jenkins/master/.github/images/jenkins-welcome.svg">
<img width="600" alt="Jenkins welcome page" src="https://raw.githubusercontent.com/jenkinsci/jenkins/master/.github/images/jenkins-welcome.svg">

Copy link
Member

Choose a reason for hiding this comment

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

Needs to be localizable.

Suggested change
<img width="600" alt="jenkins welcome page" src="https://raw.githubusercontent.com/jenkinsci/jenkins/master/.github/images/jenkins-welcome.svg">
<img width="600" alt="${%Jenkins welcome page}" src="https://raw.githubusercontent.com/jenkinsci/jenkins/master/.github/images/jenkins-welcome.svg">

Additionally I am not sure welcome page adequately describes what this is.

Copy link
Contributor

Choose a reason for hiding this comment

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

I don't think that we can localize the text in pages that are generated by GitHub Actions.

Copy link
Member

Choose a reason for hiding this comment

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

Good point, I managed to comment this on the only file it doesn't apply to 😅 (all your suggestions are not localizable).

@@ -61,7 +61,7 @@ THE SOFTWARE.
</j:otherwise>
</j:choose>
</div>
<img src="graph?type=${type}&amp;width=500&amp;height=300" />
<img src="graph?type=${type}&amp;width=500&amp;height=300" alt="null" />
Copy link
Contributor

Choose a reason for hiding this comment

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

Since this is the memory usage monitor graph, I think that the alt text should say that. The word "null" won't help a disabled user understand what is being shown in the image.

Suggested change
<img src="graph?type=${type}&amp;width=500&amp;height=300" alt="null" />
<img src="graph?type=${type}&amp;width=500&amp;height=300" alt="memory usage monitor graph" />

@@ -50,13 +50,13 @@ THE SOFTWARE.
${%No files in directory}
<j:if test="${showSymlinkWarning}">
<p>
<img id="symlinkalert" src="${imagesURL}/svgs/warning.svg" width="16" height="16" />
<img id="symlinkalert" src="${imagesURL}/svgs/warning.svg" width="16" height="16" alt="null"/>
Copy link
Contributor

Choose a reason for hiding this comment

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

Since this is showing a symlink warning, I think that the alt text should mention symlink alert

Suggested change
<img id="symlinkalert" src="${imagesURL}/svgs/warning.svg" width="16" height="16" alt="null"/>
<img id="symlinkalert" src="${imagesURL}/svgs/warning.svg" width="16" height="16" alt="symlink alert"/>

${%Symlinks are hidden}
</p>
</j:if>
<j:if test="${showTmpDirWarning}">
<p>
<img id="tmpdiralert" src="${imagesURL}/svgs/warning.svg" width="16" height="16" />
<img id="tmpdiralert" src="${imagesURL}/svgs/warning.svg" width="16" height="16" alt="null"/>
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
<img id="tmpdiralert" src="${imagesURL}/svgs/warning.svg" width="16" height="16" alt="null"/>
<img id="tmpdiralert" src="${imagesURL}/svgs/warning.svg" width="16" height="16" alt="temporary directory warning"/>

@@ -124,13 +124,13 @@ THE SOFTWARE.
</table>
<j:if test="${showSymlinkWarning}">
<p>
<img id="alert" src="${imagesURL}/svgs/warning.svg" width="16" height="16" />
<img id="alert" src="${imagesURL}/svgs/warning.svg" width="16" height="16" alt="warning image"/>
Copy link
Contributor

Choose a reason for hiding this comment

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

I don't think that we need to use the word "image" in alt text, since the disabled user receives hints that they are seeing the alt text for an image. A Harvard accessibility page advises against including the "image of" or "image" in the alt text

Suggested change
<img id="alert" src="${imagesURL}/svgs/warning.svg" width="16" height="16" alt="warning image"/>
<img id="alert" src="${imagesURL}/svgs/warning.svg" width="16" height="16" alt="symlink warning"/>

@@ -34,7 +34,7 @@ THE SOFTWARE.
<l:header />
<l:main-panel>
<h1 style="text-align: center">
<img src="${imagesURL}/rage.svg" height="179" width="154"/>
<img src="${imagesURL}/rage.svg" height="179" width="154" alt="null"/>
Copy link
Contributor

Choose a reason for hiding this comment

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

This is the "page not found" image.

Suggested change
<img src="${imagesURL}/rage.svg" height="179" width="154" alt="null"/>
<img src="${imagesURL}/rage.svg" height="179" width="154" alt="Page not found"/>

@@ -48,7 +48,7 @@ THE SOFTWARE.
</head>
<body style="font-family: system-ui, sans-serif">
<h1 style="text-align: center">
<img src="${imagesURL}/rage.svg" height="179" width="154" style="vertical-align: middle"/>
<img src="${imagesURL}/rage.svg" height="179" width="154" style="vertical-align: middle" alt="null"/>
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
<img src="${imagesURL}/rage.svg" height="179" width="154" style="vertical-align: middle" alt="null"/>
<img src="${imagesURL}/rage.svg" height="179" width="154" style="vertical-align: middle" alt="page not found"/>

@@ -32,7 +32,7 @@ THE SOFTWARE.
<l:header />
<l:main-panel>
<h1 style="text-align: center">
<img src="${imagesURL}/rage.svg" height="179" width="154"/> <span style="font-size:50px"><st:nbsp/>${%Oops!}</span>
<img src="${imagesURL}/rage.svg" height="179" width="154" alt="null"/> <span style="font-size:50px"><st:nbsp/>${%Oops!}</span>
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
<img src="${imagesURL}/rage.svg" height="179" width="154" alt="null"/> <span style="font-size:50px"><st:nbsp/>${%Oops!}</span>
<img src="${imagesURL}/rage.svg" height="179" width="154" alt="Oops"/> <span style="font-size:50px"><st:nbsp/>${%Oops!}</span>

Copy link
Member

Choose a reason for hiding this comment

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

Decorative only. Also, null isn't intended as a literal value, but to represent the explicitly specified empty value (alt="").

Suggested change
<img src="${imagesURL}/rage.svg" height="179" width="154" alt="null"/> <span style="font-size:50px"><st:nbsp/>${%Oops!}</span>
<img src="${imagesURL}/rage.svg" height="179" width="154" alt=""/> <span style="font-size:50px"><st:nbsp/>${%Oops!}</span>

@@ -41,7 +41,7 @@ THE SOFTWARE.
<j:if test="${c.offline}">
<j:choose>
<j:when test="${c.offlineCause!=null and !c.connecting}">
(<img src="${imagesURL}/svgs/error.svg" width="16" height="16" title="${c.offlineCause}"/> ${%offline})
(<img src="${imagesURL}/svgs/error.svg" width="16" height="16" title="${c.offlineCause}" alt="error image"/> ${%offline})
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
(<img src="${imagesURL}/svgs/error.svg" width="16" height="16" title="${c.offlineCause}" alt="error image"/> ${%offline})
(<img src="${imagesURL}/svgs/error.svg" width="16" height="16" title="${c.offlineCause}" alt="Agent offline"/> ${%offline})

@@ -31,7 +31,7 @@ THE SOFTWARE.

<![CDATA[
<dd:custom>
<img src="jenkins.svg" />
<img src="jenkins.svg" alt="null"/>
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
<img src="jenkins.svg" alt="null"/>
<img src="jenkins.svg" alt="Jenkins logo"/>

Copy link
Member

@daniel-beck daniel-beck left a comment

Choose a reason for hiding this comment

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

This PR misunderstands the recommendation in Jira. null isn't intended as a literal value, but to represent the explicitly specified empty value (alt="").

@@ -20,6 +20,6 @@ firstPRMergeComment: >

<a href="https://www.jenkins.io/participate/" target="_blank">
<picture>
<img width="600" src="https://raw.githubusercontent.com/jenkinsci/jenkins/master/.github/images/jenkins-welcome.svg">
<img width="600" alt="jenkins welcome page" src="https://raw.githubusercontent.com/jenkinsci/jenkins/master/.github/images/jenkins-welcome.svg">
Copy link
Member

Choose a reason for hiding this comment

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

Needs to be localizable.

Suggested change
<img width="600" alt="jenkins welcome page" src="https://raw.githubusercontent.com/jenkinsci/jenkins/master/.github/images/jenkins-welcome.svg">
<img width="600" alt="${%Jenkins welcome page}" src="https://raw.githubusercontent.com/jenkinsci/jenkins/master/.github/images/jenkins-welcome.svg">

Additionally I am not sure welcome page adequately describes what this is.

@@ -32,7 +32,7 @@ THE SOFTWARE.
<l:header />
<l:main-panel>
<h1 style="text-align: center">
<img src="${imagesURL}/rage.svg" height="179" width="154"/> <span style="font-size:50px"><st:nbsp/>${%Oops!}</span>
<img src="${imagesURL}/rage.svg" height="179" width="154" alt="null"/> <span style="font-size:50px"><st:nbsp/>${%Oops!}</span>
Copy link
Member

Choose a reason for hiding this comment

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

Decorative only. Also, null isn't intended as a literal value, but to represent the explicitly specified empty value (alt="").

Suggested change
<img src="${imagesURL}/rage.svg" height="179" width="154" alt="null"/> <span style="font-size:50px"><st:nbsp/>${%Oops!}</span>
<img src="${imagesURL}/rage.svg" height="179" width="154" alt=""/> <span style="font-size:50px"><st:nbsp/>${%Oops!}</span>

@JanhviHarwani
Copy link
Author

I have resolved all the comments in the PR. Thank you for taking out time to look at the PR.

@@ -20,6 +20,6 @@ firstPRMergeComment: >

<a href="https://www.jenkins.io/participate/" target="_blank">
<picture>
<img width="600" src="https://raw.githubusercontent.com/jenkinsci/jenkins/master/.github/images/jenkins-welcome.svg">
<img width="600" alt=${%Jenkins welcome page} src="https://raw.githubusercontent.com/jenkinsci/jenkins/master/.github/images/jenkins-welcome.svg">
Copy link
Member

Choose a reason for hiding this comment

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

This applied the wrong suggestion from the comment thread. Mark pointed out I was wrong. (Also would be syntactically invalid in Jelly.)

Suggested change
<img width="600" alt=${%Jenkins welcome page} src="https://raw.githubusercontent.com/jenkinsci/jenkins/master/.github/images/jenkins-welcome.svg">
<img width="600" alt="Jenkins welcome page" src="https://raw.githubusercontent.com/jenkinsci/jenkins/master/.github/images/jenkins-welcome.svg">

Copy link
Member

Choose a reason for hiding this comment

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

(Also I'm not sure this particular alt text is good, but that's a separate problem. I encourage you to consider what the image represents on this page, and how that would be accomplished in alt text.)

@@ -61,7 +61,7 @@ THE SOFTWARE.
</j:otherwise>
</j:choose>
</div>
<img src="graph?type=${type}&amp;width=500&amp;height=300" />
<img src="graph?type=${type}&amp;width=500&amp;height=300" alt="memory usage monitor graph" />
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
<img src="graph?type=${type}&amp;width=500&amp;height=300" alt="memory usage monitor graph" />
<img src="graph?type=${type}&amp;width=500&amp;height=300" alt="${%memory usage monitor graph}" />

The same applies to all .jelly files. (Previously mentioned in #9296 (comment))

@@ -50,13 +50,13 @@ THE SOFTWARE.
${%No files in directory}
<j:if test="${showSymlinkWarning}">
<p>
<img id="symlinkalert" src="${imagesURL}/svgs/warning.svg" width="16" height="16" />
<img id="symlinkalert" src="${imagesURL}/svgs/warning.svg" width="16" height="16" alt="symlink alert"/>
Copy link
Member

Choose a reason for hiding this comment

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

Since the text in the next line exists, there is no need for an alt text here. This icon exists only to make the notice stand out.

${%Symlinks are hidden}
</p>
</j:if>
<j:if test="${showTmpDirWarning}">
<p>
<img id="tmpdiralert" src="${imagesURL}/svgs/warning.svg" width="16" height="16" />
<img id="tmpdiralert" src="${imagesURL}/svgs/warning.svg" width="16" height="16" alt="temporary directory warning"/>
Copy link
Member

Choose a reason for hiding this comment

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

Since the text in the next line exists, there is no need for an alt text here. This icon exists only to make the notice stand out.

@@ -124,13 +124,13 @@ THE SOFTWARE.
</table>
<j:if test="${showSymlinkWarning}">
<p>
<img id="alert" src="${imagesURL}/svgs/warning.svg" width="16" height="16" />
<img id="alert" src="${imagesURL}/svgs/warning.svg" width="16" height="16" alt="symlink warning"/>
Copy link
Member

Choose a reason for hiding this comment

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

Since the text in the next line exists, there is no need for an alt text here. This icon exists only to make the notice stand out.

${%Symlinks are hidden}
</p>
</j:if>
<j:if test="${showTmpDirWarning}">
<p>
<img id="alert" src="${imagesURL}/svgs/warning.svg" width="16" height="16" />
<img id="alert" src="${imagesURL}/svgs/warning.svg" width="16" height="16" alt="temporary directory warning"/>
Copy link
Member

Choose a reason for hiding this comment

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

Since the text in the next line exists, there is no need for an alt text here. This icon exists only to make the notice stand out.

@@ -32,7 +32,7 @@ THE SOFTWARE.
<l:header />
<l:main-panel>
<h1 style="text-align: center">
<img src="${imagesURL}/rage.svg" height="179" width="154"/> <span style="font-size:50px"><st:nbsp/>${%Oops!}</span>
<img src="${imagesURL}/rage.svg" height="179" width="154" alt=""/> <span style="font-size:50px"><st:nbsp/>${%Oops!}</span>
Copy link
Member

Choose a reason for hiding this comment

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

Inconsistent with the change in _404_simple.jelly, why?

(Personally I like this one more for the same reason as I mentioned in a number of other comments.)

@github-actions github-actions bot added the unresolved-merge-conflict There is a merge conflict with the target branch. label Jun 18, 2024
Copy link

Please take a moment and address the merge conflicts of your pull request. Thanks!

@github-actions github-actions bot removed the unresolved-merge-conflict There is a merge conflict with the target branch. label Jun 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
4 participants