-
-
Notifications
You must be signed in to change notification settings - Fork 8.6k
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
base: master
Are you sure you want to change the base?
Feature/add null text alt #9296
Conversation
merging current changes
Yay, your first pull request towards Jenkins core was created successfully! Thank you so much! |
@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. |
There was a problem hiding this 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.
.github/config.yml
Outdated
@@ -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"> |
There was a problem hiding this comment.
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.
<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"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Needs to be localizable.
<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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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}&width=500&height=300" /> | |||
<img src="graph?type=${type}&width=500&height=300" alt="null" /> |
There was a problem hiding this comment.
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.
<img src="graph?type=${type}&width=500&height=300" alt="null" /> | |
<img src="graph?type=${type}&width=500&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"/> |
There was a problem hiding this comment.
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
<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"/> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<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"/> |
There was a problem hiding this comment.
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
<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"/> |
There was a problem hiding this comment.
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.
<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"/> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<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> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<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> |
There was a problem hiding this comment.
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=""
).
<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}) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
(<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"/> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<img src="jenkins.svg" alt="null"/> | |
<img src="jenkins.svg" alt="Jenkins logo"/> |
There was a problem hiding this 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=""
).
.github/config.yml
Outdated
@@ -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"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Needs to be localizable.
<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> |
There was a problem hiding this comment.
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=""
).
<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> |
merge jenkins master branch to feature/add-null-text
…o feature/add-null-text-alt
merging to local branch
…Harwani/jenkins into feature/add-null-text-alt
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"> |
There was a problem hiding this comment.
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.)
<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"> |
There was a problem hiding this comment.
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}&width=500&height=300" /> | |||
<img src="graph?type=${type}&width=500&height=300" alt="memory usage monitor graph" /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<img src="graph?type=${type}&width=500&height=300" alt="memory usage monitor graph" /> | |
<img src="graph?type=${type}&width=500&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"/> |
There was a problem hiding this comment.
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"/> |
There was a problem hiding this comment.
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"/> |
There was a problem hiding this comment.
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"/> |
There was a problem hiding this comment.
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> |
There was a problem hiding this comment.
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.)
Please take a moment and address the merge conflicts of your pull request. Thanks! |
See JENKINS-62424.
Testing done
Proposed changelog entries
Proposed upgrade guidelines
N/A
Submitter checklist
@Restricted
or have@since TODO
Javadocs, as appropriate.@Deprecated(since = "TODO")
or@Deprecated(forRemoval = true, since = "TODO")
, if applicable.eval
to ease future introduction of Content Security Policy (CSP) directives (see documentation).Desired reviewers
@mention
Before the changes are marked as
ready-for-merge
:Maintainer checklist
upgrade-guide-needed
label is set and there is a Proposed upgrade guidelines section in the pull request title (see example).lts-candidate
to be considered (see query).Open Issue: https://issues.jenkins.io/plugins/servlet/mobile#issue/JENKINS-62424
resolved: added null text to alt attribute to img tags wherever necessary