Skip to content

GitLab

T
tangled
Commit db99d60f authored by Chandani Shrestha's avatar Chandani Shrestha Committed by Commit Bot
Browse files
Options

Devtools: Make remote debugging landing page accessible 

This change addresses all accessiblity issues listed by AXE accessiblity tool:
a. <html> element must have a lang attribute
b. Document must have one main landmark
c. Page must contain a level-one heading
d. All page content must be contained by a landmarks
e. Page must have a means to bypass repeated blocks

Verified screen reader reads content on the page.
a. Screen reader was working as expected when accessing links. This was already working.
b. Added a role heading with level 1 value for header of the links to inspectables pages.

Verified keyboard accessibility:
Scenario 1: Launch browser without custom flag e.g. chrome.exe --remote-debugging-port=9222 http://localhost:9222
If the url of page doesn't contain '#custom=true' flag e.g. http://localhost:9222
User can navigate to any inspectable page link using Tab and pressing Enter opens the link
This was already working as expected before this change.
https://imgur.com/7zZ9BIn

Scenario 2: Launch remote debugging using npm run start
If the url of page has '#custom=true' flag e.g. http://localhost:9222/#custom=true&experiments=true
This change adds tabIndex=0 to element which holds of the remote-url. Pressing Enter or Space copies the url value.
https://imgur.com/aWShNVk

Gif: Showing keyboard accessibility in remote debugging page where it has a #custom flag in url
e.g. http://localhost:9222/#custom=true&experiments=true which is a default url opened up by
'npm run start' in devtools
https://imgur.com/l2j75TD

Bug: 963183
Change-Id: Ifc3dfc288591fd198c1e9e99d4828d0ebd933894
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1788287Reviewed-by: default avatarYang Guo <yangguo@chromium.org>
Commit-Queue: Chandani Shrestha <chshrest@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#699383}
parent 75a6a306
Hide whitespace changes
Inline Side-by-side
Showing with 23 additions and 5 deletions
chrome/browser/devtools/frontend/devtools_discovery_page.html
View file @ db99d60f
<html>
<head>
<!doctype html>
<html lang="en">
<title>Inspectable pages</title>
<meta name="referrer" content="no-referrer">
<style>
......@@ -102,6 +102,19 @@ function onReady() {
}
}
function onBlur(event) {
const selection = window.getSelection();
selection.removeAllRanges();
event.stopPropagation();
event.preventDefault();
}
function onFocus(selectElement, event) {
selectNodeText(selectElement, event);
event.stopPropagation();
event.preventDefault();
}
function customFrontendURL(url) {
if (!url || !window.location.hash)
return null;
......@@ -164,6 +177,9 @@ function appendItem(item_object) {
var urlValue = document.createElement('div');
urlValue.classList.add("custom-url-value");
urlValue.textContent = customURL;
urlValue.tabIndex = 0;
urlValue.addEventListener('blur', onBlur);
urlValue.addEventListener('focus', event => onFocus(urlValue, event));
urlContainer.appendChild(urlValue);
description.appendChild(urlContainer);
item_element.addEventListener('click', selectNodeText.bind(null, urlValue));
......@@ -189,9 +205,11 @@ function selectNodeText(selectElement, event)
</script>
</head>
<body onload='onLoad()'>
<div id='caption'>Inspectable pages</div>
<hr>
<div id='items'>
<div role='main'>
<div id='caption' role='heading' aria-level='1'>Inspectable pages</div>
<hr>
<div id='items'>
</div>
</div>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment