Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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
1 change: 0 additions & 1 deletion Gruntfile.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
// eslint-disable-next-line no-undef
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
Expand Down
2 changes: 1 addition & 1 deletion cookie-editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ import { PermissionHandler } from './interface/lib/permissionHandler.js';
browserDetector
.getApi()
.sidePanel.setPanelBehavior({ openPanelOnActionClick: false })
// eslint-disable-next-line prettier/prettier

.catch(error => {
console.error(error);
});
Expand Down
14 changes: 12 additions & 2 deletions eslint.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,16 @@ import prettier from 'eslint-plugin-prettier';
import simpleImportSort from 'eslint-plugin-simple-import-sort';
import globals from 'globals';

// Override Google's rules that are removed in ESLint 9
const googleWithOverrides = {
...google,
rules: {
...google.rules,
'valid-jsdoc': 'off',
'require-jsdoc': 'off',
},
};

export default [
// Global ignores
{
Expand All @@ -20,8 +30,8 @@ export default [
// Base configuration for JS/MJS files
js.configs.recommended,

// Google's style guide
google,
// Google's style guide (with ESLint 9 compatible overrides)
googleWithOverrides,

// Main custom configuration
{
Expand Down
4 changes: 2 additions & 2 deletions interface/lib/browserDetector.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,14 @@ export class BrowserDetector {
this.supportPromises =
this.namespace.runtime.getPlatformInfo() instanceof Promise;
console.info('Promises support: ', this.supportPromises);
} catch (e) {
} catch {
/* empty */
}

try {
this.supportSidePanel = typeof this.getApi().sidePanel !== 'undefined';
console.info('SidePanel support: ', this.supportSidePanel);
} catch (e) {
} catch {
/* empty */
}

Expand Down
23 changes: 12 additions & 11 deletions interface/options/options.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@
</head>

<body>
<div class="container">
<a href="#main-content" class="visually-hidden">Skip to main content</a>
<div class="container" id="main-content">
<fieldset>
<legend>Options</legend>
<div class="input-container">
Expand Down Expand Up @@ -138,8 +139,8 @@

<fieldset>
<legend>All Cookies</legend>
<div class="notice danger">
<svg class="icon">
<div class="notice danger" role="alert">
<svg class="icon" aria-hidden="true">
<use href="../sprites/solid.svg#exclamation-triangle"></use>
</svg>
<strong>Be careful!</strong> Operations in this section will apply to ALL sites.
Expand All @@ -149,20 +150,20 @@
to every account you are currently logged in.
</div>
<div class="input-container">
Export All Cookies
<div class="button-group">
<button id="export-all-json">As JSON</button>
<button id="export-all-netscape">As Netscape</button>
<span id="export-all-label" class="label-text">Export All Cookies</span>
<div class="button-group" role="group" aria-labelledby="export-all-label">
<button id="export-all-json" aria-label="Export all cookies as JSON">As JSON</button>
<button id="export-all-netscape" aria-label="Export all cookies in Netscape format">As Netscape</button>
</div>
<div class="hint">
<div class="hint" id="export-all-hint">
Header string is not available for browser-wide export since it does
not contain information about which site it comes from.
</div>
</div>
<div class="input-container">
Delete All Cookies
<button class="danger" id="delete-all">Delete All</button>
<div class="hint danger">
<span id="delete-all-label" class="label-text">Delete All Cookies</span>
<button class="danger" id="delete-all" aria-describedby="delete-all-hint">Delete All</button>
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

For better accessibility and consistency, you should programmatically link the button to its descriptive label. The span with id="delete-all-label" is currently not associated with the button. You can fix this by adding aria-labelledby="delete-all-label" to the button. This will provide a more descriptive accessible name for screen reader users.

Suggested change
<button class="danger" id="delete-all" aria-describedby="delete-all-hint">Delete All</button>
<button class="danger" id="delete-all" aria-labelledby="delete-all-label" aria-describedby="delete-all-hint">Delete All</button>

<div class="hint danger" id="delete-all-hint">
This will delete all the cookies on all the site on this browser.
This action is irreversible. Be very careful.
</div>
Expand Down
103 changes: 54 additions & 49 deletions interface/popup/cookie-list.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,18 +15,14 @@ <h1 class="container">
</h1>
<div id="version"></div>
<div id="main-menu">
<button id="main-menu-button">
<svg class="icon">
<button id="main-menu-button" aria-label="Open menu">
<svg class="icon" aria-hidden="true">
<use href="../sprites/solid.svg#ellipsis-v"></use>
</svg>
</button>
<div id="main-menu-content">
<label
class="menu-item switch"
for="advanced-toggle-all"
id="advanced-toggle-all-label"
>
Show Advanced
<div class="menu-item switch" role="group" aria-labelledby="advanced-toggle-all-label">
<span id="advanced-toggle-all-label">Show Advanced</span>
<label class="switch">
<input
type="checkbox"
Expand All @@ -35,10 +31,10 @@ <h1 class="container">
/>
<span class="slider"></span>
</label>
</label>
<button class="menu-item" id="menu-all-options">
</div>
<button class="menu-item" id="menu-all-options" aria-label="See all options">
See All Options
<svg class="icon">
<svg class="icon" aria-hidden="true">
<use href="../sprites/solid.svg#external-link-alt"></use>
</svg>
</button>
Expand All @@ -56,9 +52,10 @@ <h1 class="container">
class="panel-section-footer-button"
id="create-cookie"
type="button"
aria-label="Create new cookie"
>
<div>
<svg class="icon"><use href="../sprites/solid.svg#plus"></use></svg>
<svg class="icon" aria-hidden="true"><use href="../sprites/solid.svg#plus"></use></svg>
<div class="tooltip" role="tooltip">Add</div>
</div>
</button>
Expand All @@ -68,9 +65,10 @@ <h1 class="container">
class="panel-section-footer-button danger"
id="delete-all-cookies"
type="button"
aria-label="Delete all cookies"
>
<div>
<svg class="icon">
<svg class="icon" aria-hidden="true">
<use href="../sprites/solid.svg#trash"></use>
</svg>
<div class="tooltip" role="tooltip">Delete All</div>
Expand All @@ -82,9 +80,10 @@ <h1 class="container">
class="panel-section-footer-button"
id="import-cookies"
type="button"
aria-label="Import cookies"
>
<div>
<svg class="icon">
<svg class="icon" aria-hidden="true">
<use href="../sprites/solid.svg#file-import"></use>
</svg>
<div class="tooltip" role="tooltip">Import</div>
Expand All @@ -96,9 +95,10 @@ <h1 class="container">
class="panel-section-footer-button"
id="export-cookies"
type="button"
aria-label="Export cookies"
>
<div>
<svg class="icon">
<svg class="icon" aria-hidden="true">
<use href="../sprites/solid.svg#file-export"></use>
</svg>
<div class="tooltip" role="tooltip">Export</div>
Expand All @@ -113,9 +113,10 @@ <h1 class="container">
class="panel-section-footer-button"
id="return-list-add"
type="button"
aria-label="Cancel and return to list"
>
<div>
<svg class="icon">
<svg class="icon" aria-hidden="true">
<use href="../sprites/solid.svg#arrow-left"></use>
</svg>
<div class="tooltip" role="tooltip">Cancel</div>
Expand All @@ -127,9 +128,10 @@ <h1 class="container">
class="panel-section-footer-button primary"
id="save-create-cookie"
type="button"
aria-label="Save new cookie"
>
<div>
<svg class="icon"><use href="../sprites/solid.svg#save"></use></svg>
<svg class="icon" aria-hidden="true"><use href="../sprites/solid.svg#save"></use></svg>
<div class="tooltip" role="tooltip">Add</div>
</div>
</button>
Expand All @@ -142,9 +144,10 @@ <h1 class="container">
class="panel-section-footer-button"
id="return-list-import"
type="button"
aria-label="Cancel and return to list"
>
<div>
<svg class="icon">
<svg class="icon" aria-hidden="true">
<use href="../sprites/solid.svg#arrow-left"></use>
</svg>
<div class="tooltip" role="tooltip">Cancel</div>
Expand All @@ -156,9 +159,10 @@ <h1 class="container">
class="panel-section-footer-button primary"
id="save-import-cookie"
type="button"
aria-label="Import cookies"
>
<div>
<svg class="icon">
<svg class="icon" aria-hidden="true">
<use href="../sprites/solid.svg#file-import"></use>
</svg>
<div class="tooltip" role="tooltip">Import</div>
Expand All @@ -175,7 +179,7 @@ <h1 class="container">
aria-label="Dismiss Notification"
type="button"
>
<svg class="icon"><use href="../sprites/solid.svg#times"></use></svg>
<svg class="icon" aria-hidden="true"><use href="../sprites/solid.svg#times"></use></svg>
</button>
</div>
</div>
Expand All @@ -191,7 +195,7 @@ <h1 class="container">
role="button"
aria-expanded="false"
>
<svg class="icon arrow">
<svg class="icon arrow" aria-hidden="true">
<use href="../sprites/solid.svg#angle-down"></use>
</svg>
<span class="header-name"></span>
Expand All @@ -204,7 +208,7 @@ <h1 class="container">
tabindex="-1"
type="button"
>
<svg class="icon">
<svg class="icon" aria-hidden="true">
<use href="../sprites/solid.svg#trash"></use>
</svg>
</button>
Expand All @@ -219,7 +223,7 @@ <h1 class="container">
aria-label="Delete"
type="button"
>
<svg class="icon">
<svg class="icon" aria-hidden="true">
<use href="../sprites/solid.svg#trash"></use>
</svg>
</button>
Expand All @@ -229,43 +233,44 @@ <h1 class="container">
aria-label="Save"
type="submit"
>
<svg class="icon">
<svg class="icon" aria-hidden="true">
<use href="../sprites/solid.svg#save"></use>
</svg>
</button>
</div>
<form data-id="" class="form container">
<div>
<label class="label-name">Name</label>
<input name="name" type="text" class="input-name" />
<label class="label-name" for="input-name">Name</label>
<input name="name" type="text" class="input-name" id="input-name" />
</div>
<div>
<label class="label-value">Value</label>
<textarea name="value" class="input-value"></textarea>
<label class="label-value" for="input-value">Value</label>
<textarea name="value" class="input-value" id="input-value"></textarea>
</div>
<button class="advanced-toggle" type="button">
<button class="advanced-toggle" type="button" aria-expanded="false" aria-controls="advanced-form">
Show Advanced
</button>
<div class="advanced-form">
<div class="advanced-form" id="advanced-form">
<div>
<label class="label-domain">Domain</label>
<input name="domain" type="text" class="input-domain" />
<label class="label-domain" for="input-domain">Domain</label>
<input name="domain" type="text" class="input-domain" id="input-domain" />
</div>
<div>
<label class="label-path">Path</label>
<input name="path" type="text" class="input-path" />
<label class="label-path" for="input-path">Path</label>
<input name="path" type="text" class="input-path" id="input-path" />
</div>
<div>
<label class="label-expiration">Expiration</label>
<label class="label-expiration" for="input-expiration">Expiration</label>
<input
name="expiration"
type="text"
class="input-expiration"
id="input-expiration"
/>
</div>
<div>
<label class="label-sameSite">Same Site</label>
<select name="sameSite" class="input-sameSite">
<label class="label-sameSite" for="input-sameSite">Same Site</label>
<select name="sameSite" class="input-sameSite" id="input-sameSite">
<option value="no_restriction">None</option>
<option value="lax">Lax</option>
<option value="strict">Strict</option>
Expand Down Expand Up @@ -367,13 +372,13 @@ <h1 class="container">
<div class="button-container">
<button
id="request-permission"
title="Request permission to read cookies for this site."
aria-label="Request permission to read cookies for this site"
>
This site
</button>
<button
id="request-permission-all"
title="Request permission to read cookies for all sites."
aria-label="Request permission to read cookies for all sites"
>
All sites
</button>
Expand All @@ -391,32 +396,32 @@ <h1 class="container">
<template id="tmp-search-bar">
<li>
<div id="searchContainer">
<svg class="icon search">
<svg class="icon search" aria-hidden="true">
<use href="../sprites/solid.svg#search"></use>
</svg>
<input id="searchField" type="text" placeholder="Search" />
<input id="searchField" type="text" placeholder="Search" aria-label="Search cookies" />
</div>
</li>
</template>

<template id="tmp-export-options">
<div id="export-menu">
<h3>Export As:</h3>
<button id="export-json" type="button">JSON</button>
<button id="export-headerstring" type="button">Header String</button>
<button id="export-netscape" type="button">Netscape</button>
<div id="export-menu" role="menu" aria-label="Export options">
<h3 id="export-menu-heading">Export As:</h3>
Comment on lines +408 to +409
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

An element with role="menu" has strict requirements for its children. A <h3> element is not a valid direct child. This can cause unpredictable behavior in screen readers. The direct children should have roles like menuitem or group.

To fix this, you could either:

  1. Move the <h3> outside and before the menu div, and use aria-labelledby on the menu div to reference it.
  2. If this is just a simple list of choices, consider using role="group" on the div instead, which is more flexible about its children.

<button id="export-json" type="button" role="menuitem">JSON</button>
<button id="export-headerstring" type="button" role="menuitem">Header String</button>
<button id="export-netscape" type="button" role="menuitem">Netscape</button>
</div>
</template>

<template id="tmp-ad-item">
<div>
<span class="ad-tag">Ad</span>
<span class="ad-tag" aria-label="Advertisement">Ad</span>
<div class="ad-link">
<a href="" target="_blank" rel="noopener noreferrer">Ad Text!</a>
</div>
<div class="ad-actions">
<button class="dont-show">Not interested</button>
<button class="later">Later</button>
<button class="dont-show" aria-label="Not interested in this ad">Not interested</button>
<button class="later" aria-label="Show this ad later">Later</button>
</div>
</div>
</template>
Expand Down
Loading