Skip to content
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.

Sign up for GitHub

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

feat(adhoc-tools-accessible-names): overwrite accessible name results for some native elements #5960

Merged
merged 6 commits into from
Aug 25, 2022
Merged

feat(adhoc-tools-accessible-names): overwrite accessible name results for some native elements #5960

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
78532d0
Add guidance link
Aug 15, 2022
3d1e305
update e2e tests
Aug 15, 2022
72f80b1
Update snapshot
Aug 16, 2022
1f29df0
Merge branch 'main' of https://github.com/microsoft/accessibility-ins…
Aug 17, 2022
d6612ea
Overwrite results from accessible name calculation
Aug 24, 2022
7dbaec3
Overwrite axe results for some native elements
Aug 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion src/scanner/custom-rules/display-accessible-names.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const accessibleNamesConfiguration: RuleConfiguration = {
id: accessibleNamesCheckId,
//this list of roles and elements was derived from the ARIA 1.2 documentation (Section 5.2.8.4: Roles supporting name from author or content): https://www.w3.org/TR/wai-aria-1.2/#namefromauthor
selector:
'[role=alert], [role=alertdialog], [role=application], [role=article], article, [role=banner], [role=blockquote], blockquote, [role=button], button, [role=cell], [role=checkbox], [role=columnheader], [role=combobox], [role=command], [role=complementary], [role=composite], [role=contentinfo], [role=definition], [role=dialog], [role=directory],[role=document], [role=feed], [role=figure], figure, [role=form], form,[role=grid], table, [role=gridcell], td, [role=group], fieldset, [role=heading], h1,h2, h3, h4, h5, h6, [role=img],img,[role=input], [role=landmark], [role=link], a, link, [role=list], ol, ul, [role=listbox], [role=listitem], li, [role=log], [role=main], [role=marquee],[role=math], [role=meter], meter, [role=menu], [role=menubar], [role=menuitem], [role=menuitemcheckbox], [role=menuitemradio], [role=navigation], nav, [role=note], [role=option], option, [role=progressbar], [role=radio], [role=radiogroup], [role=range], [role=region], section, [role=row], tr, [role=rowgroup], tbody, tfoot, thead, [role=rowheader], th[scope="row"], [role=scrollbar], [role=searchbox], [role=search], [role=select], select, [role=sectionhead], [role=separator], hr, [role=slider], [role=status], [role=spinbutton, [role=switch], [role=tab], [role=table], [role=tablelist], [role=tabpanel], [role=term], dfn, td, [role=textbox], textarea, th, [role=time], time, [role=timer], [role=toolbar], [role=tooltip], [role=tree], [role=treegrid], [role=treeitem], input,[role=input],[role=window]',
'[role=alert], [role=alertdialog], [role=application], [role=article], article, [role=banner], [role=blockquote], blockquote, [role=button], button, [role=cell], [role=checkbox], [role=columnheader], [role=combobox], [role=command], [role=complementary], [role=composite], [role=contentinfo], [role=definition], [role=dialog], [role=directory],[role=document], [role=feed], [role=figure], figure, [role=form], form,[role=grid], table, [role=gridcell], td, [role=group], fieldset, [role=heading], h1,h2, h3, h4, h5, h6, [role=img],img,[role=input], [role=landmark], [role=link], a, link, [role=list], [role=listbox], [role=listitem],li, ol, ul, [role=log], [role=main], [role=marquee],[role=math], [role=meter], meter,[role=menu], [role=menubar], [role=menuitem], [role=menuitemcheckbox], [role=menuitemradio], [role=navigation], nav, [role=note], [role=option], option, [role=progressbar], [role=radio], [role=radiogroup], [role=range], [role=region], [role=row], tr, [role=rowgroup], [role=rowheader], th[scope="row"], [role=scrollbar], [role=searchbox], [role=search], [role=select], select, [role=sectionhead], [role=separator], hr, [role=slider], [role=status], [role=spinbutton, [role=switch], [role=tab], [role=table], [role=tablelist], [role=tabpanel], [role=term], td, [role=textbox], textarea, th, [role=time], time, [role=timer], [role=toolbar], [role=tooltip], [role=tree], [role=treegrid], [role=treeitem], input,[role=input],[role=window]',
enabled: false,
any: [accessibleNamesCheckId],
matches: hasAccessibleName,
Expand All @@ -28,9 +28,18 @@ function hasAccessibleName(node: HTMLElement): boolean {
// this list of roles and elements were derived from the ARIA 1.2 documentation (Section 5.2.8.6: Roles which cannot be named): https://www.w3.org/TR/wai-aria-1.2/#namefromprohibited
const nameProhibitedSelectors: string =
'caption, figcaption, [role=caption], code, [role=code], del, [role=deletion], em, [role=emphasis],[role=generic], ins, [role=insertion], p, [role=paragraph], [role=presentation], [role=strong], strong, sub, sup, [role=subscript], [role=superscript], [role=none]';
const nativeElements: string = 'blockquote, figure, form, li, meter, time,section, tr'; // overwriting axe-cores accessible name value as their calculation tends to return the contents of these elements
if (axe.utils.matchesSelector(node, nameProhibitedSelectors)) {
return false;
}
if (
axe.utils.matchesSelector(node, nativeElements) &&
node.hasAttribute('aria-label') === false &&
node.hasAttribute('aria-labelledby') === false &&
node.hasAttribute('title') === false
) {
return false;
}
if (AxeUtils.getAccessibleText(node) === '') {
return false;
}
Expand Down
129 changes: 129 additions & 0 deletions src/tests/end-to-end/test-resources/accessible-names/accessible-names.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,134 @@ <h1>Page heading</h1>
<button>Submit</button>
<p>This is just a paragraph. It should not have an Accessible name</p>
<h4 aria-hidden="true">Heading has empty accessible name</h4>
<h1>Files</h1>
<ul>
<li>
<a id="file_row1" href="./files/Documentation.pdf">Documentation.pdf</a>
<span
role="button"
tabindex="0"
id="del_row1"
aria-label="Delete"
aria-labelledby="del_row1 file_row1"
></span>
</li>
<li>A list</li>
</ul>
<table>
<p>This is not from author, so won't be highlighted</p>
</table>
<fieldset>
<p>No highlight</p>
</fieldset>
<nav aria-label="navigation">Navigation with aria-label</nav>
<nav>Navigation should not he highlighted</nav>
<meter aria-label="highlight meter">Some text</meter>
<meter>60%</meter>
<div role="meter" aria-valuemax="10" , aria-valuemin="10" aria-valuenow="10">A meter</div>
<div role="region">A section</div>
<option>Thius should be option's accessible name</option>
<input type="radio" aria-label="A radio element" />
<hr aria-label="A separtor element" />
<table>
<!-- Typical example of subTree text -->
<tr>
<th>Day</th>
<th>Miles</th>
</tr>
<tr>
<td>Tuesday</td>
<td aria-label="In miles">10</td>
</tr>
</table>
<table title="Highlight table">
<tr title="Workout stats">
<th>Day</th>
<th>Miles</th>
</tr>
<tr>
<td>Friday</td>
<td>30</td>
</tr>
</table>
<table>
<!-- Typical example of subTree text -->
<tr>
<th>Day</th>
<th>Miles</th>
</tr>
<tr>
<td>Tuesday</td>
<td aria-label="In miles">10</td>
</tr>
</table>
<table title="Highlight table">
<tr aria-label="Workout stats 2">
<th>Day</th>
<th>Miles</th>
</tr>
<tr>
<td>Friday</td>
<td>30</td>
</tr>
</table>
<dfn>This is the term element</dfn>
<article>Article element</article>
<blockquote>Some blockquote text</blockquote>
<textarea aria-label="myText">Some text in a text area</textarea>
<textarea>Some text in a text area</textarea>
<h2>The premiere show starts at <time>21:00</time> today.</h2>
<div role="table" aria-labelledby="name" aria-describedby="desc">
<div role="caption">
<div id="name">Contest Entrants</div>
<div id="desc">
This table shows the total number of entrants (500) the contest accepted over
the past four weeks.
</div>
</div>
<code>Let x = 10</code>
</div>
<label for="tag_combo">Tag</label>
<input
type="text"
id="tag_combo"
role="combobox"
aria-autocomplete="list"
aria-haspopup="listbox"
aria-expanded="true"
aria-controls="popup_listbox"
aria-activedescendant="selected_option"
/>
<ul role="listbox" id="popup_listbox">
<li role="option">Zebra</li>
<li role="option" id="selected_option">Zoom</li>
</ul>
<select>
Select this
</select>
<figure aria-label="A figure">Some text in a figure</figure>
<figure>Some second text in a figure</figure>
<form aria-label="form">Some text in form</form>
<h3>New Tests</h3>
<fieldset>Text in a field text</fieldset>
<fieldset aria-label="Some text">Text in a field text with aria-label</fieldset>
<ul title="My list">
An unordered list. Highlight
</ul>
<ul>
An unordered second list. No highlight
</ul>
<ol title="My second list">
An ordered list. Highlight
</ol>
<ol>
An ordered second list. No highlight
</ol>
<ol>
<li aria-label="orange">orange</li>
<li>
<span>mango</span>
</li>
</ol>
</body>
</html>
7 changes: 7 additions & 0 deletions src/tests/unit/tests/scanner/custom-rules/display-accessible-names.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,13 @@ describe('evaluateAccessibleNames', () => {
expect(result).toBe(false);
});

it('should not match because it has no attributes', () => {
document.body.innerHTML = `<blockquote>Text in quotes</blockquote>`;
const node = document.querySelector(`blockquote`);
const result = withAxeSetup(() => accessibleNamesConfiguration.rule.matches(node, null));
expect(result).toBe(false);
});

it('should match because element has accessible name and accurate role', () => {
document.body.innerHTML = `<div role="button" aria-labelled-by="click">Some text</div>`;
const node = document.querySelector(`div`);
Expand Down