Copilot commented on code in PR #1492:
URL: https://github.com/apache/camel-website/pull/1492#discussion_r2715326488
##########
antora-ui-camel/src/partials/header-content.hbs:
##########
@@ -22,10 +22,10 @@
<div id="search_results"></div>
</div>
<div class="navbar-tools">
- <a rel="noopener noreferrer nofollow"
href="https://github.com/apache/camel/"; title="Collaborate on GitHub"><svg
focusable="false" class="brand-icon"><use
xlink:href="{{uiRootPath}}/img/brand-logos.svg#github" /></svg></a>
- <a rel="noopener noreferrer nofollow"
href="https://camel.zulipchat.com"; title="Chat on Zulip"><svg focusable="false"
class="brand-icon"><use xlink:href="{{uiRootPath}}/img/brand-logos.svg#zulip"
/></svg></a>
- <a rel="noopener noreferrer nofollow"
href="https://twitter.com/ApacheCamel"; title="Follow Apache Camel on
Twitter"><svg focusable="false" class="brand-icon"><use
xlink:href="{{uiRootPath}}/img/brand-logos.svg#twitter" /></svg></a>
- <a rel="noopener noreferrer nofollow"
href="https://www.linkedin.com/groups/2447439/"; title="Apache Camel group on
Linkedin"><svg focusable="false" class="brand-icon"><use
xlink:href="{{uiRootPath}}/img/brand-logos.svg#linkedin" /></svg></a>
+ <a rel="noopener noreferrer nofollow"
href="https://github.com/apache/camel/"; title="Collaborate on GitHub"><svg
focusable="false" class="brand-icon" aria-label="GitHub" role="img"><use
xlink:href="{{uiRootPath}}/img/brand-logos.svg#github" /></svg></a>
+ <a rel="noopener noreferrer nofollow"
href="https://camel.zulipchat.com"; title="Chat on Zulip"><svg focusable="false"
class="brand-icon" aria-label="Zulip" role="img"><use
xlink:href="{{uiRootPath}}/img/brand-logos.svg#zulip" /></svg></a>
+ <a rel="noopener noreferrer nofollow"
href="https://twitter.com/ApacheCamel"; title="Follow Apache Camel on
Twitter"><svg focusable="false" class="brand-icon" aria-label="Twitter"
role="img"><use xlink:href="{{uiRootPath}}/img/brand-logos.svg#twitter"
/></svg></a>
+ <a rel="noopener noreferrer nofollow"
href="https://www.linkedin.com/groups/2447439/"; title="Apache Camel group on
Linkedin"><svg focusable="false" class="brand-icon" aria-label="LinkedIn"
role="img"><use xlink:href="{{uiRootPath}}/img/brand-logos.svg#linkedin"
/></svg></a>
Review Comment:
Labeling the <svg> inside an icon-only link can result in the link being
announced only as “GitHub”/“Zulip”/etc. Since the more descriptive label is
currently only in the title attribute, consider moving the accessible name to
the <a> via aria-label (e.g., “Collaborate on GitHub”) and treating the <svg>
as decorative (aria-hidden / role=presentation) to avoid redundant AT output.
```suggestion
<a rel="noopener noreferrer nofollow"
href="https://github.com/apache/camel/"; title="Collaborate on GitHub"
aria-label="Collaborate on GitHub"><svg focusable="false" class="brand-icon"
aria-hidden="true" role="presentation"><use
xlink:href="{{uiRootPath}}/img/brand-logos.svg#github" /></svg></a>
<a rel="noopener noreferrer nofollow"
href="https://camel.zulipchat.com"; title="Chat on Zulip" aria-label="Chat on
Zulip"><svg focusable="false" class="brand-icon" aria-hidden="true"
role="presentation"><use xlink:href="{{uiRootPath}}/img/brand-logos.svg#zulip"
/></svg></a>
<a rel="noopener noreferrer nofollow"
href="https://twitter.com/ApacheCamel"; title="Follow Apache Camel on Twitter"
aria-label="Follow Apache Camel on Twitter"><svg focusable="false"
class="brand-icon" aria-hidden="true" role="presentation"><use
xlink:href="{{uiRootPath}}/img/brand-logos.svg#twitter" /></svg></a>
<a rel="noopener noreferrer nofollow"
href="https://www.linkedin.com/groups/2447439/"; title="Apache Camel group on
Linkedin" aria-label="Apache Camel group on Linkedin"><svg focusable="false"
class="brand-icon" aria-hidden="true" role="presentation"><use
xlink:href="{{uiRootPath}}/img/brand-logos.svg#linkedin" /></svg></a>
```
##########
layouts/partials/header.html:
##########
@@ -71,10 +71,10 @@
<div id="search_results"></div>
</div>
<div class="navbar-tools">
- <a rel="noopener noreferrer nofollow"
href="https://github.com/apache/camel/"; title="Collaborate on GitHub"><svg
focusable="false" class="brand-icon"><use href="{{ path.Join "_" (index
.Site.Data "rev-manifest" "img/brand-logos.svg") | relURL }}#github"
/></svg></a>
- <a rel="noopener noreferrer nofollow"
href="https://camel.zulipchat.com"; title="Chat on Zulip"><svg focusable="false"
class="brand-icon"><use href="{{ path.Join "_" (index .Site.Data "rev-manifest"
"img/brand-logos.svg") | relURL }}#zulip" /></svg></a>
- <a rel="noopener noreferrer nofollow"
href="https://twitter.com/ApacheCamel"; title="Follow Apache Camel on
Twitter"><svg focusable="false" class="brand-icon"><use href="{{ path.Join "_"
(index .Site.Data "rev-manifest" "img/brand-logos.svg") | relURL }}#twitter"
/></svg></a>
- <a rel="noopener noreferrer nofollow"
href="https://www.linkedin.com/groups/2447439/"; title="Apache Camel group on
Linkedin"><svg focusable="false" class="brand-icon"><use href="{{ path.Join "_"
(index .Site.Data "rev-manifest" "img/brand-logos.svg") | relURL }}#linkedin"
/></svg></a>
+ <a rel="noopener noreferrer nofollow"
href="https://github.com/apache/camel/"; title="Collaborate on GitHub"><svg
focusable="false" class="brand-icon" aria-label="GitHub" role="img"><use
href="{{ path.Join "_" (index .Site.Data "rev-manifest" "img/brand-logos.svg")
| relURL }}#github" /></svg></a>
+ <a rel="noopener noreferrer nofollow"
href="https://camel.zulipchat.com"; title="Chat on Zulip"><svg focusable="false"
class="brand-icon" aria-label="Zulip" role="img"><use href="{{ path.Join "_"
(index .Site.Data "rev-manifest" "img/brand-logos.svg") | relURL }}#zulip"
/></svg></a>
+ <a rel="noopener noreferrer nofollow"
href="https://twitter.com/ApacheCamel"; title="Follow Apache Camel on
Twitter"><svg focusable="false" class="brand-icon" aria-label="Twitter"
role="img"><use href="{{ path.Join "_" (index .Site.Data "rev-manifest"
"img/brand-logos.svg") | relURL }}#twitter" /></svg></a>
+ <a rel="noopener noreferrer nofollow"
href="https://www.linkedin.com/groups/2447439/"; title="Apache Camel group on
Linkedin"><svg focusable="false" class="brand-icon" aria-label="LinkedIn"
role="img"><use href="{{ path.Join "_" (index .Site.Data "rev-manifest"
"img/brand-logos.svg") | relURL }}#linkedin" /></svg></a>
Review Comment:
The accessible name for each icon-only link will likely come from the nested
<svg>. With the current change, screen readers may announce these links simply
as “GitHub”/“Zulip”/etc (because of the SVG aria-label), which is less
descriptive than the existing intent expressed by the link’s title (e.g.,
“Collaborate on GitHub”). Consider moving the accessible label to the <a>
(aria-label="Collaborate on GitHub", etc.) and marking the <svg> as decorative
(e.g., aria-hidden="true" / role="presentation") to avoid redundant
announcements.
```suggestion
<a rel="noopener noreferrer nofollow"
href="https://github.com/apache/camel/"; title="Collaborate on GitHub"
aria-label="Collaborate on GitHub"><svg focusable="false" class="brand-icon"
aria-hidden="true" role="presentation"><use href="{{ path.Join "_" (index
.Site.Data "rev-manifest" "img/brand-logos.svg") | relURL }}#github"
/></svg></a>
<a rel="noopener noreferrer nofollow"
href="https://camel.zulipchat.com"; title="Chat on Zulip" aria-label="Chat on
Zulip"><svg focusable="false" class="brand-icon" aria-hidden="true"
role="presentation"><use href="{{ path.Join "_" (index .Site.Data
"rev-manifest" "img/brand-logos.svg") | relURL }}#zulip" /></svg></a>
<a rel="noopener noreferrer nofollow"
href="https://twitter.com/ApacheCamel"; title="Follow Apache Camel on Twitter"
aria-label="Follow Apache Camel on Twitter"><svg focusable="false"
class="brand-icon" aria-hidden="true" role="presentation"><use href="{{
path.Join "_" (index .Site.Data "rev-manifest" "img/brand-logos.svg") | relURL
}}#twitter" /></svg></a>
<a rel="noopener noreferrer nofollow"
href="https://www.linkedin.com/groups/2447439/"; title="Apache Camel group on
Linkedin" aria-label="Apache Camel group on Linkedin"><svg focusable="false"
class="brand-icon" aria-hidden="true" role="presentation"><use href="{{
path.Join "_" (index .Site.Data "rev-manifest" "img/brand-logos.svg") | relURL
}}#linkedin" /></svg></a>
```
##########
antora-ui-camel/src/partials/footer-content.hbs:
##########
@@ -66,10 +66,10 @@
</div>
</div>
<div class="footer-icons">
- <a rel="noopener noreferrer nofollow"
href="https://github.com/apache/camel/"; title="Collaborate on GitHub"><svg
class="brand-icon" focusable="false"><use
xlink:href="{{uiRootPath}}/img/brand-logos.svg#github" /></svg></a>
- <a rel="noopener noreferrer nofollow"
href="https://camel.zulipchat.com"; title="Chat on Zulip"><svg
class="brand-icon" focusable="false"><use
xlink:href="{{uiRootPath}}/img/brand-logos.svg#zulip" /></svg></a>
- <a rel="noopener noreferrer nofollow"
href="https://twitter.com/ApacheCamel"; title="Follow Apache Camel on
Twitter"><svg class="brand-icon" focusable="false"><use
xlink:href="{{uiRootPath}}/img/brand-logos.svg#twitter" /></svg></a>
- <a rel="noopener noreferrer nofollow"
href="https://www.linkedin.com/groups/2447439/"; title="Apache Camel group on
Linkedin"><svg class="brand-icon" focusable="false"><use
xlink:href="{{uiRootPath}}/img/brand-logos.svg#linkedin" /></svg></a>
+ <a rel="noopener noreferrer nofollow"
href="https://github.com/apache/camel/"; title="Collaborate on GitHub"><svg
class="brand-icon" focusable="false" aria-label="GitHub" role="img"><use
xlink:href="{{uiRootPath}}/img/brand-logos.svg#github" /></svg></a>
+ <a rel="noopener noreferrer nofollow"
href="https://camel.zulipchat.com"; title="Chat on Zulip"><svg
class="brand-icon" focusable="false" aria-label="Zulip" role="img"><use
xlink:href="{{uiRootPath}}/img/brand-logos.svg#zulip" /></svg></a>
+ <a rel="noopener noreferrer nofollow"
href="https://twitter.com/ApacheCamel"; title="Follow Apache Camel on
Twitter"><svg class="brand-icon" focusable="false" aria-label="Twitter"
role="img"><use xlink:href="{{uiRootPath}}/img/brand-logos.svg#twitter"
/></svg></a>
+ <a rel="noopener noreferrer nofollow"
href="https://www.linkedin.com/groups/2447439/"; title="Apache Camel group on
Linkedin"><svg class="brand-icon" focusable="false" aria-label="LinkedIn"
role="img"><use xlink:href="{{uiRootPath}}/img/brand-logos.svg#linkedin"
/></svg></a>
Review Comment:
Same pattern here: aria-label is on the nested <svg>, which can make the
icon-only link’s accessible name just the platform name and leave the action
text only in title (not reliably exposed). Prefer aria-label on the <a> (e.g.,
“Chat on Zulip”) and mark the <svg> as decorative (aria-hidden /
role=presentation) to avoid duplicate announcements.
```suggestion
<a rel="noopener noreferrer nofollow"
href="https://github.com/apache/camel/"; title="Collaborate on GitHub"
aria-label="Collaborate on GitHub"><svg class="brand-icon" focusable="false"
aria-hidden="true" role="presentation"><use
xlink:href="{{uiRootPath}}/img/brand-logos.svg#github" /></svg></a>
<a rel="noopener noreferrer nofollow"
href="https://camel.zulipchat.com"; title="Chat on Zulip" aria-label="Chat on
Zulip"><svg class="brand-icon" focusable="false" aria-hidden="true"
role="presentation"><use xlink:href="{{uiRootPath}}/img/brand-logos.svg#zulip"
/></svg></a>
<a rel="noopener noreferrer nofollow"
href="https://twitter.com/ApacheCamel"; title="Follow Apache Camel on Twitter"
aria-label="Follow Apache Camel on Twitter"><svg class="brand-icon"
focusable="false" aria-hidden="true" role="presentation"><use
xlink:href="{{uiRootPath}}/img/brand-logos.svg#twitter" /></svg></a>
<a rel="noopener noreferrer nofollow"
href="https://www.linkedin.com/groups/2447439/"; title="Apache Camel group on
Linkedin" aria-label="Apache Camel group on Linkedin"><svg class="brand-icon"
focusable="false" aria-hidden="true" role="presentation"><use
xlink:href="{{uiRootPath}}/img/brand-logos.svg#linkedin" /></svg></a>
```
##########
layouts/partials/footer.html:
##########
@@ -72,10 +72,10 @@
</div>
</div>
<div class="footer-icons">
- <a rel="noopener noreferrer nofollow"
href="https://github.com/apache/camel/"; title="Collaborate on GitHub"><svg
class="brand-icon" focusable="false"><use href="{{ path.Join "_" (index
.Site.Data "rev-manifest" "img/brand-logos.svg") | relURL }}#github"
/></svg></a>
- <a rel="noopener noreferrer nofollow"
href="https://camel.zulipchat.com"; title="Chat on Zulip"><svg
class="brand-icon" focusable="false"><use href="{{ path.Join "_" (index
.Site.Data "rev-manifest" "img/brand-logos.svg") | relURL }}#zulip" /></svg></a>
- <a rel="noopener noreferrer nofollow"
href="https://twitter.com/ApacheCamel"; title="Follow Apache Camel on
Twitter"><svg class="brand-icon" focusable="false"><use href="{{ path.Join "_"
(index .Site.Data "rev-manifest" "img/brand-logos.svg") | relURL }}#twitter"
/></svg></a>
- <a rel="noopener noreferrer nofollow"
href="https://www.linkedin.com/groups/2447439/"; title="Apache Camel group on
Linkedin"><svg class="brand-icon" focusable="false"><use href="{{ path.Join "_"
(index .Site.Data "rev-manifest" "img/brand-logos.svg") | relURL }}#linkedin"
/></svg></a>
+ <a rel="noopener noreferrer nofollow"
href="https://github.com/apache/camel/"; title="Collaborate on GitHub"><svg
class="brand-icon" focusable="false" aria-label="GitHub" role="img"><use
href="{{ path.Join "_" (index .Site.Data "rev-manifest" "img/brand-logos.svg")
| relURL }}#github" /></svg></a>
+ <a rel="noopener noreferrer nofollow"
href="https://camel.zulipchat.com"; title="Chat on Zulip"><svg
class="brand-icon" focusable="false" aria-label="Zulip" role="img"><use
href="{{ path.Join "_" (index .Site.Data "rev-manifest" "img/brand-logos.svg")
| relURL }}#zulip" /></svg></a>
+ <a rel="noopener noreferrer nofollow"
href="https://twitter.com/ApacheCamel"; title="Follow Apache Camel on
Twitter"><svg class="brand-icon" focusable="false" aria-label="Twitter"
role="img"><use href="{{ path.Join "_" (index .Site.Data "rev-manifest"
"img/brand-logos.svg") | relURL }}#twitter" /></svg></a>
+ <a rel="noopener noreferrer nofollow"
href="https://www.linkedin.com/groups/2447439/"; title="Apache Camel group on
Linkedin"><svg class="brand-icon" focusable="false" aria-label="LinkedIn"
role="img"><use href="{{ path.Join "_" (index .Site.Data "rev-manifest"
"img/brand-logos.svg") | relURL }}#linkedin" /></svg></a>
Review Comment:
These icon-only <a> elements are being labeled via aria-label on the nested
<svg>. In practice this can cause the link’s accessible name to become just
“GitHub”/“Zulip”/etc, while the more descriptive action text is only in the
title attribute (which is not a reliable accessible name). Prefer putting
aria-label on the <a> (e.g., “Collaborate on GitHub”) and hiding the <svg> from
AT (aria-hidden/role=presentation) to prevent duplicate announcements.
```suggestion
<a rel="noopener noreferrer nofollow"
href="https://github.com/apache/camel/"; title="Collaborate on GitHub"
aria-label="Collaborate on GitHub"><svg class="brand-icon" focusable="false"
aria-hidden="true" role="presentation"><use href="{{ path.Join "_" (index
.Site.Data "rev-manifest" "img/brand-logos.svg") | relURL }}#github"
/></svg></a>
<a rel="noopener noreferrer nofollow"
href="https://camel.zulipchat.com"; title="Chat on Zulip" aria-label="Chat on
Zulip"><svg class="brand-icon" focusable="false" aria-hidden="true"
role="presentation"><use href="{{ path.Join "_" (index .Site.Data
"rev-manifest" "img/brand-logos.svg") | relURL }}#zulip" /></svg></a>
<a rel="noopener noreferrer nofollow"
href="https://twitter.com/ApacheCamel"; title="Follow Apache Camel on Twitter"
aria-label="Follow Apache Camel on Twitter"><svg class="brand-icon"
focusable="false" aria-hidden="true" role="presentation"><use href="{{
path.Join "_" (index .Site.Data "rev-manifest" "img/brand-logos.svg") | relURL
}}#twitter" /></svg></a>
<a rel="noopener noreferrer nofollow"
href="https://www.linkedin.com/groups/2447439/"; title="Apache Camel group on
Linkedin" aria-label="Apache Camel group on Linkedin"><svg class="brand-icon"
focusable="false" aria-hidden="true" role="presentation"><use href="{{
path.Join "_" (index .Site.Data "rev-manifest" "img/brand-logos.svg") | relURL
}}#linkedin" /></svg></a>
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
