diff --git a/src/scanner/custom-rules/display-accessible-names.ts b/src/scanner/custom-rules/display-accessible-names.ts index 866041b2026..ce18642cb47 100644 --- a/src/scanner/custom-rules/display-accessible-names.ts +++ b/src/scanner/custom-rules/display-accessible-names.ts @@ -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, @@ -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; } diff --git a/src/tests/end-to-end/test-resources/accessible-names/accessible-names.html b/src/tests/end-to-end/test-resources/accessible-names/accessible-names.html index 3d4fead4408..4db5076c38c 100644 --- a/src/tests/end-to-end/test-resources/accessible-names/accessible-names.html +++ b/src/tests/end-to-end/test-resources/accessible-names/accessible-names.html @@ -16,5 +16,134 @@

Page heading

This is just a paragraph. It should not have an Accessible name

+

Files

+ + +

This is not from author, so won't be highlighted

+
+
+

No highlight

+
+ + + Some text + 60% +
A meter
+
A section
+ + +
+ + + + + + + + + + +
DayMiles
Tuesday10
+ + + + + + + + + +
DayMiles
Friday30
+ + + + + + + + + + +
DayMiles
Tuesday10
+ + + + + + + + + +
DayMiles
Friday30
+ This is the term element +
Article element
+
Some blockquote text
+ + +

The premiere show starts at today.

+
+
+
Contest Entrants
+
+ This table shows the total number of entrants (500) the contest accepted over + the past four weeks. +
+
+ Let x = 10 +
+ + + + +
Some text in a figure
+
Some second text in a figure
+
Some text in form
+

New Tests

+
Text in a field text
+
Text in a field text with aria-label
+ + +
    + An ordered list. Highlight +
+
    + An ordered second list. No highlight +
+
    +
  1. orange
    2. +
  2. + mango +
    3. +
diff --git a/src/tests/unit/tests/scanner/custom-rules/display-accessible-names.test.ts b/src/tests/unit/tests/scanner/custom-rules/display-accessible-names.test.ts index 2570f049e9f..7ee436d2693 100644 --- a/src/tests/unit/tests/scanner/custom-rules/display-accessible-names.test.ts +++ b/src/tests/unit/tests/scanner/custom-rules/display-accessible-names.test.ts @@ -48,6 +48,13 @@ describe('evaluateAccessibleNames', () => { expect(result).toBe(false); }); + it('should not match because it has no attributes', () => { + document.body.innerHTML = `
Text in quotes
`; + 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 = `
Some text
`; const node = document.querySelector(`div`);