-
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
Issue752 add index utility #951
Conversation
It seems to pass all the js linter tests, but required me to user older style Javascript, so while the coding change recommendations worked to generate the index.html file, they would not pass the js linter we are currently using, so I had to modify them to conform to the linter. |
@nschonni, could you please review this? I tried requesting a review, but you do not show in the list. It looks like you are not a member of the aria contributors team in github. |
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.
Mostly minor style stuff. For the node scripts using let
and const
would probably be a good idea
scripts/reference-tables.js
Outdated
var examplesDirectory = '../examples/'; | ||
|
||
var ariaRoles = [ | ||
'banner', |
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.
minor, but I'd suggest sorting the array so it's easier to see if anything is missing or when adding another one
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 see duplication. Could we generate the list from the ARIA spec? We could use ARIA query for this.
@@ -0,0 +1,409 @@ | |||
var fs = require('fs'); | |||
var i; |
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.
Seems like you mostly use local copies for loops. Maybe drop this and use let
indexStart = content.indexOf('>', indexStart) + 1; | ||
indexEnd = indexStart + 1; | ||
|
||
console.log('Replacing at: ' + indexStart + ' .... ' + indexEnd); |
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.
aside, since this is for node, you can probably safely use template literals https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
console.log(`Replacing at: ${indexStart} .... ${indexEnd}`);
} | ||
} | ||
|
||
var count = 0; |
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.
Think this should be inside the findHTMLFiles
function
|
||
function findHTMLFiles (path) { | ||
fs.readdirSync(path).forEach(function (file) { | ||
var newPath = path + '/' + file; |
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.
probably safer for multiplatform to use the node path
module and use path.join(filePath, file)
|
||
var count = 0; | ||
|
||
function findHTMLFiles (path) { |
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.
Might be better to use the glob
pack to just filter the files you want
scripts/reference-tables.js
Outdated
|
||
// Handle landmark examples separately | ||
if (res[r].indexOf('landmark') < 0) { | ||
} |
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.
There is nothing in this condition, so right now this loop isn't doing anything
|
||
exampleIndexFile = replaceSection('examples_by_role_tbody', exampleIndexFile, html); | ||
|
||
sorted = []; |
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.
probably clearer to use a new variable than re-using the existing one
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.
The linter we use flas let and const as errors
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.
OK, there should probably be some overrides for the scripts in this folder since they're node rather than browser based. That can be done afterwards though
It seems some roles are being left out of the index. For instance, I pushed b1bf298 to make two minor editorial changes to the template. I tried to run the script to update the index with the changes, but it failed with an error related to an invalid call back. |
@mcking65 I just get a deprecation error and it generates the index, so I will look it to getting the bug fixed. I think making it a Respec document is a little distracting, I liked the index as you originally proposed as a simple document that indexes the examples. The simpler document though should have a table of contents. |
@mcking65 I will look into the problem of missing roles from the table. |
@mcking65 sorry for the confusion about respec, I was looked at the wrong local directory on my computer, I am working on the role problem |
@mcking65 I fixed the bug that was not including all the roles in the index, I am working on the issue of the the call back issue. |
@mcking65 I fixed the bug related to the callback error, let me know if you can run the script now |
@mcking65 I added two links at the beginning of the document to the two types of indexes on the page. I think it makes it easier for people to know there is an index of properties and states without having to scroll through the document. |
* Simplified labels on nav regions because the nav regions at top and bottom are identical and have identical purpose, so they do not need unique labels. * Added a 1-sentence intro paragraph to make it more clear that this page is part of the APG. This would be important if google landed someone on this index page.
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.
We are getting very close here. I fixed lint errors, made a couple more changes to the template, and integrated into aria-practices.html in the appendices.
Please:
- Reply to my questions about changes in package.json
- In scripts/reference-tables.js, sort ariaRoles or consider my suggestion about aria.query.
- In scripts/reference-tables.js, sort ariaPropertiesAndStates or consider my suggestion about aria.query.
package.json
Outdated
@@ -28,8 +28,8 @@ | |||
"ava": "^0.25.0", | |||
"cheerio": "^1.0.0-rc.2", | |||
"eslint": "^4.19.1", | |||
"geckodriver": "^1.11.0", | |||
"geckodriver": "^1.14.1", |
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.
@jongund, was this change necessary for this PR? It seems unrelated.
It should be thoroughly tested. I believe I recall @spectranaut finding geckodriver versions being a factor in performance of tests, race conditions, etc. It seems like we might want to isolate changes like this so they are easy to roll back given that our regression testing has geckodriver as a primary dependency.
I might be making noise about nothing. Perhaps @sh0ji, or @spectranaut if available, should chime in here.
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 didn't modify this file, but I changed the values back
package.json
Outdated
"selenium-webdriver": "^4.0.0-alpha.1", | ||
"vnu-jar": "^18.7.23" |
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.
Similar question here ... Is this change related to this PR?
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.
@mcking65 I didn't directly modify this file, but I will change the value back
<script src="js/app.js"></script> | ||
</head> | ||
<body> | ||
<nav aria-label="ARIA Practices"> |
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 changed aria-label here and in the footer. It was previously "Top link to ARIA Practices". Per our landmark guidance, if two nav sections have identical content and identical purpose, they should have the same label, not distinct labels. Distinguishing regions with positional terms, "top" and "bottom" is not recommended.
@mcking65 The aria-query project maybe useful, but it provides more information than we need for the current index and it is not clear how files from the project should be merged into this pull request. |
@mcking65 I have sorted the lists for roles, properties and state lists in the source code. |
scripts/reference-tables.js
Outdated
var ariaPropertiesAndStates = [ | ||
'aria-activedescendant', | ||
'aria-atomic', | ||
'aria-atomic', |
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.
Duplicate. There is a few more below, but I'll skip commenting them each individually
@mcking65 removed duplicate properties and states from list. |
@nschonni, could you help us integrate this into travis build? I suppose it would go into travis-before_deploy.sh? If you have time to spin up a PR, that would be great! |
@mcking65 do you want to exclude the file from the regular branch and just generate it as part of the gh-pages build? |
This PR addresses issue #752.
The reference-tables.js is a node utility in the scripts directory that generates an index.html file in the examples directory. The index.html file is very simple with two tables and some navigation links to the practices document.
The appendices section of the aria-practices.html includes a new subsection for index with links to the indexes in examples/index.html.
View the new indexes section in this feature branch.
Preview | Diff