-
Notifications
You must be signed in to change notification settings - Fork 355
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
Infrastructure: Fix failing link checker on GitHub README link #2931
Changes from 3 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -33,7 +33,24 @@ async function checkLinks() { | |
return getLineNumber; | ||
}; | ||
|
||
const checkPathForHash = (hrefOrSrc, ids = [], hash) => { | ||
const getHashCheckHandler = (hrefOrSrc) => { | ||
return options.hashCheckHandlers.find(({ pattern }) => | ||
pattern.test(hrefOrSrc) | ||
); | ||
}; | ||
|
||
const getReactPartial = (hrefOrSrc, html) => { | ||
const handler = getHashCheckHandler(hrefOrSrc); | ||
if (handler) return handler.getPartial(html); | ||
return undefined; | ||
}; | ||
|
||
const checkPathForHash = ( | ||
hrefOrSrc, | ||
ids = [], | ||
hash, | ||
{ reactPartial } = {} | ||
) => { | ||
// On some websites, the ids may not exactly match the hash included | ||
// in the link. | ||
// For e.g. GitHub will prepend client facing ids with their own | ||
|
@@ -43,10 +60,8 @@ async function checkLinks() { | |
// as being 'user-content-foo-bar' for its own page processing purposes. | ||
// | ||
// See https://github.com/w3c/aria-practices/issues/2809 | ||
const handler = options.hashCheckHandlers.find(({ pattern }) => | ||
pattern.test(hrefOrSrc) | ||
); | ||
if (handler) return handler.matchHash(ids, hash); | ||
const handler = getHashCheckHandler(hrefOrSrc); | ||
if (handler) return handler.matchHash(ids, hash, { reactPartial }); | ||
else return ids.includes(hash); | ||
}; | ||
|
||
|
@@ -149,7 +164,15 @@ async function checkLinks() { | |
.querySelectorAll('[id]') | ||
.map((idElement) => idElement.getAttribute('id')); | ||
|
||
return { ok: response.ok, status: response.status, ids }; | ||
// Handle GitHub README links. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Since this is solely related to GitHub-related urls with hashes, I think checking |
||
// These links are stored within a react-partial element | ||
const reactPartial = getReactPartial(hrefOrSrc, html); | ||
return { | ||
ok: response.ok, | ||
status: response.status, | ||
ids, | ||
reactPartial, | ||
}; | ||
} catch (error) { | ||
return { | ||
errorMessage: | ||
|
@@ -305,7 +328,9 @@ async function checkLinks() { | |
if ( | ||
!isHashCheckingDisabled && | ||
hash && | ||
!checkPathForHash(hrefOrSrc, pageData.ids, hash) | ||
!checkPathForHash(hrefOrSrc, pageData.ids, hash, { | ||
reactPartial: pageData.reactPartial, | ||
}) | ||
) { | ||
consoleError( | ||
`Found broken external link on ${htmlPath}:${lineNumber}:${columnNumber}, ` + | ||
|
Unchanged files with check annotations Beta
If the scope of the header element were body, browsers would automatically treat the header as an ARIA banner, | ||
so the header would not need the role="banner". --> | ||
<div class="page"> | ||
<header role="banner"> | ||
<div class="title" id="id_website_title">Mythical University</div> | ||
<div class="tagline">Using a Tree widget pattern for navigation links</div> | ||
</header> | ||
<!-- NOTE: In a real website the following SECTION element should be MAIN element --> | ||
<section class="main" aria-labelledby="id_website_title id_page_title"> | ||
<h1 class="page_title" id="id_page_title">Mythical University</h1> | ||
Check warning on line 296 in content/patterns/treeview/examples/treeview-navigation.html GitHub Actions / lint-html
|
||
<div class="content"> | ||
<p></p> | ||
</div> | ||
<!-- NOTE: In a real website the footer element would be a top level element, i.e., it would have the body as its scope. | ||
If the scope of the footer element were body, browsers would automatically treat the header as an ARIA contentinfo, | ||
so the footer would not need the role="contentinfo". --> | ||
<footer role="contentinfo">Mythical University footer information</footer> | ||
</div> | ||
</div> | ||
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div> |
<!-- NOTE: In an actual website, the header element would be a top level element, i.e., it would have the body as its scope. | ||
If the scope of the header element were body, browsers would automatically treat the header as an ARIA banner, | ||
so the header would not need the role="banner". --> | ||
<header role="banner"> | ||
<div class="title">Mythical University</div> | ||
<div class="tagline">Using a Menubar for navigation links</div> | ||
</header> | ||
<!-- NOTE: The following SECTION element would be a MAIN element in an actual website --> | ||
<div class="main"> | ||
<section aria-labelledby="id-page-title"> | ||
<h1 id="id-page-title" class="page_title">Mythical University</h1> | ||
Check warning on line 217 in content/patterns/menubar/examples/menubar-navigation.html GitHub Actions / lint-html
|
||
<div class="content"> | ||
<p></p> | ||
</div> | ||
NOTE: In an actual website, the footer element would be a top level element, i.e., it would have the body as its scope. | ||
If the scope of the footer element were body, browsers would automatically treat the footer as an ARIA contentinfo landmark, so the footer would not need the role="contentinfo". | ||
--> | ||
<footer role="contentinfo">Mythical University footer information</footer> | ||
</div> | ||
</div> | ||
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div> |
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.
Could you add a brief comment here on what this does for future context? Something like:
// Checks object for attribute and returns value. If not found on first pass, recursively checks nested objects and arrays of nested object(s) until attribute is found. If not found, returns undefined.
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.
Added