-
Notifications
You must be signed in to change notification settings - Fork 779
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
fix: Solve several accessible-name issues #1163
Conversation
I came across this earlier today. The acceptance tests for AccName 1.1. I'm going to see if we can somehow use this. |
I'd like to do an update to better align with the following as well: |
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.
Couple of fixes left to do. Lots of test case writing left as well.
@WilcoFiers can you describe the fixes this intends to solve, and the status of this PR? |
@@ -0,0 +1,45 @@ | |||
/* global aria, dom, text */ | |||
aria.getAriaLabelledbyText = function getAriaLabelledbyText( |
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.
nitpick: needs jsdoc comments
// Prevent the infinite reference loop: | ||
inLabelledByContext: true, | ||
// Allow hidden content if the elm is hidden | ||
includeHidden: !dom.isVisible(elm, true), |
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.
why not use the dom.isHidden
?
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 need to look if this is part of the accessibility tree, axe.utils.isHidden doesn't do that.
return ''; | ||
}; | ||
|
||
text.descendingContentText = function descendingContentText( |
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.
jsdoc comments please
lib/commons/text/subtree-text.js
Outdated
if (!phrasingElements.includes(nodeName.toUpperCase())) { | ||
const seperator = ' '; | ||
if (textContent) { | ||
textContent += seperator; |
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 saw this string concatenation technique above as well. It is better to reduce into an array
and then .join(' ')
later, as it is easy to comprehend.
Simple change I need for the accName update in #1163. ## Reviewer checks **Required fields, to be filled out by PR reviewer(s)** - [x] Follows the commit message policy, appropriate for next version - [x] Has documentation updated, a DU ticket, or requires no documentation change - [x] Includes new tests, or was unnecessary - [x] Code is reviewed for security by: dylanb
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.
👍
@@ -41,6 +41,7 @@ describe('text.accessibleTextVirtual', function() { | |||
}); | |||
|
|||
it('should match the second example from the ARIA spec', function() { | |||
// TODO: Figure out of input value really should trump aria-label |
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.
Should this be resolved?
test/commons/text/accessible-text.js
Outdated
@@ -61,6 +62,8 @@ describe('text.accessibleTextVirtual', function() { | |||
var rule2a = axe.utils.querySelectorAll(axe._tree, '#beep')[0]; | |||
var rule2b = axe.utils.querySelectorAll(axe._tree, '#flash')[0]; | |||
assert.equal(axe.commons.text.accessibleTextVirtual(rule2a), 'Beep'); | |||
// Chrome: "Flash the screen Number of times to flash screen times" | |||
// Firefox: "Flash the screen Number of times to flash screen 3 times" |
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.
What are these comments?
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.
Tested, fixing the comments separately.
* When `aria-labelledby` directly references a `hidden` element | ||
* the element needs to be included in the accessible name. | ||
* | ||
* When a descendent of the `aria-labelledby` reference is `hidden` |
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.
Where do you get this statement from?
* - AccName-AAM 1.1 suggests going one level deep, but to treat | ||
* each ref type separately. | ||
* | ||
* Axe-core's implementation behaves most closely like Firefox as it seems |
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.
nit: describe the way this works as "implementing the common denominator"
Review 10% (50 max) of the following (Product manager only): - [ ] feat: Rebuild the accessible text algorithm (#1163) (Commit - 5f420e5) --- **Note:** This release was manually generated. Steps followed: - cut a branch `release-320` from `develop`. - run `npm run release`, which bumped versions and created CHANGELOG. - CHANGELOG & various files had to be resolved for conflicts - see 021c933 - randomly picked a commit to be reviewed above, by product manager.
…sibleText usage (#4332) #### Details Our `AxeUtils.getAccessibleText` accepted a `isLabelledByContext` boolean parameter which we always pass as `false` in our usage. We pass this as-is to `axe-core`'s `axe.commons.text.accessibleText`. Unfortunately, `axe-core` changed the signature of `accessibleText` [two years ago](dequelabs/axe-core#1163) to use an options object rather than a boolean second parameter, and our tests never caught it. Thankfully, by complete luck, passing `false` happens to be interpreted the same as an object which includes the property as false, and that's the only way we use it (because you'd get the `false` behavior if we were to ever pass `true`!) This PR removes our support for the options entirely, since we don't use it, and adds an integration test similar to other `AxeUtils` cases that would have caught the issue earlier. ##### Motivation Fix broken usage of axe-core ##### Context n/a #### Pull request checklist <!-- If a checklist item is not applicable to this change, write "n/a" in the checkbox --> - [x] Addresses an existing issue: #0000 - [x] Ran `yarn fastpass` - [x] Added/updated relevant unit test(s) (and ran `yarn test`) - [x] Verified code coverage for the changes made. Check coverage report at: `<rootDir>/test-results/unit/coverage` - [x] PR title *AND* final merge commit title both start with a semantic tag (`fix:`, `chore:`, `feat(feature-name):`, `refactor:`). See `CONTRIBUTING.md`. - [n/a] (UI changes only) Added screenshots/GIFs to description above - [n/a] (UI changes only) Verified usability with NVDA/JAWS
Accessible Name computation.
Reviewer checks
Required fields, to be filled out by PR reviewer(s)