thepaciellogroup / arc-tracker Goto Github PK

View Code? Open in Web Editor NEW

8.0 8.0 1.0 68 KB

Public issue tracker for the ARC Toolkit extension

Home Page: https://www.paciellogroup.com/toolkit/

accessibility chrome-extension testing web-extension

arc-tracker's People

Contributors

Stargazers

Watchers

Forkers

aaronbnb

arc-tracker's Issues

SVG with aria-label still showing error

Summary

When running a test on an image it says the aria-label is missing, when it's actually there

Expected result

A passed test

Actual result

An error; failed test

Test Case

ARC Toolkit version

Version: 3.3.2.0

Operating System and version

Windows 10 Home

Browser and version:

Chrome Version 79.0.3945.130 (Official Build) (64-bit)

Unknown Table Purpose

Summary

I'm getting an Unknown Table Purpose when using role="grid". We're using a plugin so I do not own the code but willing to reach out to the developers to see if they'll make an update, I'm just not sure how to fix it. I tried adding a visually hidden and there is an aria-labelledby attribute that points to a <h2> tag/text. What am I missing? How do I fix this or would I consider this a false positive?

Test Case

Step 1: go to https://telegraphdistrict.com/events/
Step 2: click on Month link/button
Step 3: if no upcoming events appear use the "<" to go back to a month that has events (January 2023 should). A calendar should then appear
Step 4: run ARC Toolkit scan and the Unknown Table Purpose Alert should appear

Additional Information

ARC Toolkit version:

5.4.2

Operating System and version

Windows 10 Version 21H2 (OS Build 19044.2251)

Browser and version:

Chrome 108.0.5359.125 (Official Build) (64-bit)

Helpdesk notifications are not working anymore.

White icon image not rendered in image list

Summary

Using ARC toolkit, output list of images on a page where one of the images is a white icon or logo with a transparent background

Expected result

The image should be displayed in the list of images with a darker background

Actual result

The image is not visible as it renders a white image on a white background

Test Case

Go to this page: https://considerthesourceny.org/getting-started or any of the pages on this site and run ARC toolkit. The white logo in the footer won't be visible in the list of images.

Additional Information

ARC Toolkit version

4.3.2.1

Operating System and version

Windows 10

Browser and version:

Chrome 91

Screenshot of issue

White logo icon

No support for CustomElements Shadow DOM ?

Summary

ARC Toolkit does not work with the websites using CustomElements Shadow DOM

Expected result

ARC Toolkit should behave like assistive technology and support CustomElements Shadow DOM

Actual result

ARC Toolkit does not recognize any elements within the CustomElements Shadow DOM

Test Case

Without CustomElements

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ARC Toolkit Shadow DOM issue</title>
</head>
<body>
<main role="main"><h1>My Product</h1></main>
</body>
</html>

With CustomElements

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ARC Toolkit Shadow DOM issue</title>
    <script>
        class ProductTitle extends HTMLElement {
            connectedCallback() {
                this.attachShadow({ mode: 'open' });
                this.shadowRoot.innerHTML = "<h1>My Product</h1>";
            }
        }
        customElements.define('my-product-title', ProductTitle);
    </script>
</head>
<body>
<main role="main"><my-product-title></my-product-title></main>
</body>
</html>

Additional Information

CustomElements are a widely used standard and without support for it ARC Toolkit becomes useless in most modern websites.

ARC Toolkit version

Version: 3.3.2.0

Operating System and version

Windows 10

Browser and version:

Google Chrome Version 85.0.4183.121 (Official Build) (64-bit)

save tick box selection when console closes

Is your feature request related to a problem? Please describe.

The company I work for tests Website Accessibility, when opening console and selecting the ARC Toolkit tab, I then click on the check box for text spacing, it would be really helpful if while the browser is open for arc to save or remember the check box selected, that way when I close the console and reopen it, the check box is still active, this means I don't have to go through the same process each time I open Console.

Describe the solution you'd like

I would like to be able to open Console - Click on ARC - Select the Text Spacing check box once - then when I open and close console it activates and deactivates text spacing without further intervention.

Describe alternatives you've considered

n/a

Additional context

aria-hidden="true" is not respected for SVG elements

Summary

When running a scan on the following html using ARC Toolkit it will report the following errors even though the element has aria-hidden="true".

HTML:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false" aria-hidden="true"></svg>

Errors:

noImageRole Error: missing role = 'img' on SVG element
svgMissingAriaLabelledby Error: verify <svg> label

Expected result

I would not expect to get any errors.

Actual result

Got errors.

Test Case

https://codesandbox.io/s/unruffled-elbakyan-sg2r4?file=/index.html

Additional Information

ARC Toolkit version

4.3.2.0

Operating System and version

OSX 10.14.6

Browser and version:

Chrome Version 88.0.4324.150 (Official Build) (x86_64)

ARC Toolkit extension installed but not showing in Dev console (Windows 11)

Summary

ARC Toolkit extension has been installed in Chrome but doesn't show in Dev console.
Issue occurs in Windows 11.

ARC Toolkit extension can be seen in Dev console in Windows 10.

Expected result

View developers console.
Click on >>.
Select ARC Toolkit from list.
ARC Toolkit sidebar is displayed.

Actual result

View developers console.
Click on >>.
List is displayed but does not contain ARC Toolkit.

Test Case

n/a

Additional Information

ARC Toolkit version

4.3.2.1

Operating System and version

Windows 11 Home
Version 21H2
Installed 17/03/2022
OS Build 22000.739
Experience Windows Feature Experience Pack 1000.22000.739.0

Browser and version:

Chrome v103.0.5060.114 (Official Build) (64-bit)

Incorrect warning for aria-expanded on role combobox

Summary

The Arc Toolkit displays a warning for elements with role="combobox" and aria-expanded="true" combination.

But this combination is absolutely compliant to the standard and even recommended with examples in the official documentation https://www.w3.org/TR/wai-aria-1.2/#combobox

Expected result

No warning

Actual result

A warning is shown: ariaExpandedOnInvalidRole - Warning: aria-expanded is on an element where it will not be conveyed to screen reader users - Recommend: aria-expanded should be placed on the element which controls the visibility of another element

Test Case

Official example from here https://www.w3.org/TR/wai-aria-1.2/#combobox

<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>

Additional Information

ARC Toolkit version

3.3.2.0

Operating System and version

Windows 10

Browser and version:

Chrome Version 84.0.4147.135 (Official Build) (64-bit)

Negative text-indent in audited page crops the "badge" text displayed near each element

Summary

If an element in the audited page is styled with a negative text-indent text-indent: -2rem and is highlighted by ARC Toolkit, the yellow text ("badge") is displayed outside the black background because of the negative text-indent on parent element and is unreadable.

Text added by the extension would need some CSS reset to avoid this situation.

Expected result

I'd expect highlighting text to be readable (all characters of the yellow text displayed on the black background.

Actual result

The first letters of the yellow highlighting text have no background and are unreadable.

Test Case

JSBin where 2 H2 and 3 paragraphs are styled with text-indent: -2rem ➡️ https://jsbin.com/fobowivupi/

Run ARC Toolkit then select any of the following features: Language, Headings, Pseudo content or Buttons.
Yellow text is only partially readable.
Bugfix: Inspect yellow text, add to .languages-highlight-note span (*) text-indent: 0 declaration. Highlighting text is now readable in this situation.

(*) Or .headings-highlight-note, .pseudoContent-highlight-note, .forms-highlight-note-pre-node for the 3 other features I tested. There are others obviously

Additional Information

There are probably a dozen other CSS properties that can be inherited by highlighting text and cause problems…
all: initial is resetting too much properties, alas.
all: unset seems OK with pseudo content and headings but not button, maybe because in the former case, it's inserted into the headings and in the latter case it's inserted right before the button?

ARC Toolkit version

Version 3.3.2.0

Operating System and version

Windows 10 Pro, x64

Browser and version:

Chromium Version 79.0.3922.0 (64-bits)

"Limit to selected node" does not work for elements in an iframe

Summary

In the "Elements" tab of the dev tools, I have a

element selected that is contained in an <iframe>. When I bring up ARC Toolkit and select "Limit to selected node", it shows me the tag of the main page is selected.

If I select an element in the main body of the page (not in an <iframe>), then "Limit to selected node" works fine.

Expected result

Be able to limit the tool to run on the selected element.

Actual result

The entire page was evaluated

Test Case

www.espn.com, select the "sign up" blue button in the left navigation area (under the "Customize ESPN" section). A "Create Account" dialog displays that is contained in an iframe.

Additional Information

ARC Toolkit version

3.3.2.0

Operating System and version

Windows 10

Browser and version:

Chrome Version 79.0.3945.130 (Official Build) (64-bit)

badAriaAttribute errors for ids containing colons in aria-labeledby, aria-controls etc.

Summary

When I run ARC Toolkit, using the Send DOM to ARIA Checker feature, I am getting badAriaAtrribute errors for ids containing colons in aria-labeledby, aria-controls etc.

Expected result

The HTML spec is very liberal about ids - they must contain at least one non-whitespace character, and must be unique. "in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.", therefore, ARC Toolkit (or the ARIA Checker it uses) should accept ids that contain colons, or indeed any other punctuation character.

Actual result

Here's some example output for this snippet of code

	<div id="dialog" role="dialog" hidden aria-labeledby="dialog:heading">
		<h2 id="dialog:heading">This is the open dialog</h2>
		<p>The dialog HTML element represents a dialog box.</p>
		<button id="close">Close</button>
	</div>

aria-labeledby=dialog:headingtag: DIV[dialog]
badAriaAttribute
Error: invalid aria state or property specified
WCAG 2.1 Success Criterion 4.1.2 Name, Role, Value (A)
Recommend: use a valid aria property or state name

Test Case

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test case for ids containing colons, referred to by ARIA attributes</title>

<style type="text/css" media="screen">
/* useful boilerplate stuff */
* {
    box-sizing:border-box;
}
html {
    background:gray;
}
body {
    background:white;
    font-family:sans-serif;
}
main[role='main'] {
    max-width: 38rem;
    padding: 1.5rem;
    margin: auto;
    background:silver;
}

div[role='dialog'] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    max-width: 36rem;
    padding: 1.5rem;
    margin: auto;
    background:lightblue;
	border:1px solid black;
}

</style>

</head>

<body>
<main role="main">
	<h1>Test case</h1>
	<p>...for ids containing colons, referred to by ARIA attributes</p>
	<p>The dialog element has aria-labeledby pointing at the id of the heading within. This contains a colon character, which should be a valid id value.</p>
	<button id="b">Open Dialog</button>
	<div id="dialog" role="dialog" hidden aria-labeledby="dialog:heading">
		<h2 id="dialog:heading" tabindex="-1">This is the open dialog</h2>
		<p>The dialog HTML element represents a dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.</p>
		<button id="close">Close</button>
	</div>
</main>
<script>
    
window.onload = function() {
	var b = document.getElementById("b");
	var d = document.getElementById("dialog");
	var c = document.getElementById("close");
	var h = document.getElementById("dialog:heading");
	c.onclick = function() {
		d.setAttribute("hidden", "");
	};
	//
	b.onclick = function () {
		d.removeAttribute("hidden");
		h.focus();
	};
	d.onkeydown = function (e) {
		if (e.keyCode === 27) { // ESC key
			d.setAttribute("hidden", "");
		}
	};
}
</script>
</body>
</html>

Additional Information

ARC Toolkit version

4.3.2.1

Operating System and version

Windows 10

Browser and version:

Chrome Version 94.0.4606.61 (Official Build) (64-bit)

The "check text spacing" option does not appear to set the paragraph spacing

Summary

When inspecting the CSS that is injected by selecting the "Check text spacing (WCAG 2.1)" option, the CSS only contains three of the four requirements by 1.4.12.

Line height (line spacing) to at least 1.5 times the font size;
Spacing following paragraphs to at least 2 times the font size;
Letter spacing (tracking) to at least 0.12 times the font size;
Word spacing to at least 0.16 times the font size.

<style type="text/css" id="ia11yVarsTextSpacingCss">
 *{line-height: 1.5 !important; 
   letter-spacing: 0.12em !important; 
   word-spacing: 0.16em !important;}
 </style>

(Note, format of block above was adjusted to make it easier to read but it was copy/pasted from the Chrome devtools inspector)

Expected result

I expected to see a 4th CSS property such as p{ margin-bottom: 2em !important; } to match 1.4.12's second bullet point.

Actual result

Three of the four requirements are properly applied. The fourth requirement is missing.

Test Case

Bring up any website and ARC Toolkit and check the box for "Check text spacing" then inspect the element of the page. The last element in the block is a <style> that was injected by the ARC Toolkit. It only contains three of the four CSS properties needed to test 1.4.12.

Additional Information

ARC Toolkit version

3.3.2.0

Operating System and version

Windows 10

Browser and version:

Chrome Version 84.0.4147.125 (Official Build) (64-bit)

ARC element class naming conflicts

Summary

The styles that are added to the page to aid with highlighting failing elements can sometimes conflict with class names used on the site.

Expected result

Click on a group name in the results panel to highlight those results in the viewport.

Actual result

Styles that are inlined by the extension override classes in the site's stylesheet (in my case, .callout), causing the page layout to break.

Recommendation:

Scope added elements and their associated inlined styles with a more unique namespace to avoid conflicts.

Example:
.callout => .arc__callout,
.ia11y-hover => arc__ia11y-hover,
.pseudoContent-highlight => .arc__pseudoContent-highlight, etc

ARC Toolkit version

Version: 3.1.2.0

Operating System and version

OSX 10.14.5

Browser and version:

Version 74.0.3729.169 (Official Build) (64-bit)

nonPUAContentInSameTextElement failure possibly too aggressive

Summary

I am encountering the nonPUAContentInSameTextElement failure on content inserted via the CSS content rule in a ::before pseudo-element, which should be innocuous: for example CSS counters created with the counter() function, and on a zero-width space used to "fix" a Safari accessbility bug, where Safari does not report list semantics to AT when list-style: none is applied (see https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html)

The toolkit's suggestion that I should apply these characters in a span with aria-hidden="true" is not possible in this case, as this is raw HTML text content received from a CMS; nor would it be the correct way anyway, of applying css-counters for example.

Expected result

Characters such as a zero-width space or a css counter should not cause a failure.

Actual result

Failure

Test Case

The following codepen shows both techniques:

https://codepen.io/lunelson/full/abzRZYo

Additional Information

ARC Toolkit version

3.3.2.0

Operating System and version

macOS 10.15.2

Browser and version:

Chrome Version 79.0.3945.117 (Official Build) (64-bit)