Skip to content

Commit

Permalink
3.2.0 dev (#87)
Browse files Browse the repository at this point in the history 
## New “Images” panel
The Images tab makes it easy to review all images and their corresponding alt text within a page. This feature is inspired by Editoria11y’s Alt Text tab! 

### Edit button for images
**Experimental feature:** Each image within the Images panel can display an "Edit" button, offering users convenient editing options. Multiple props are available to support implementations for various content management systems: `editImageURLofCMS`, `relativePathImageSRC`, and `relativePathImageID`. The edit button is selectively displayed for locally hosted images on the same domain. Explore [props & methods](https://sa11y.netlify.app/developers/props/) page for documentation.

## Interface enhancements
- Tooltips have a refreshed design, for a consistent look with the Images panel. Yellow and red text colours are used consistently depending on whether it’s an error or warning. 
- When using the Colour Filters feature, surrounding settings will disappear. This makes Sa11y’s panel more compact during page review.

## Rulesets
- The check for suspicious alt text words, such as "image of" or "photo of," now examines the first 6 characters of a string for the presence of stop words. This adjustment aims to reduce unnecessary warnings, considering that these words can be relevant in certain contexts, like "A black and white photo of a car."
- The word "thumbnail" has been included in the alt text stop words for English files. Consequently, images starting with the word "thumbnail" will now trigger a warning.

## Developers
- **New prop:** `aboutContent` allows for the inclusion of a custom "About" or "Help" section within the Settings panel. This prop, a string accepting HTML content, should only ever be populated by developers and admins to mitigate XSS attacks.
- **New Prop:** Developers can overwrite the `SUSPICIOUS_ALT_STOPWORDS` array (e.g. image of, graphic of) within the language files via the `susAltStopWords` prop.
- **New Prop:** Developers can overwrite the `WARNING_ALT_STOPWORDS` array (e.g. click here) within the language files via the `linkStopWords` prop.
- **New Prop:** Add additional stop words to flag at the beginning of an alt text string as a placeholder error via the `extraPlaceholderStopWords` prop. For example, pass the word “untitled” to flag any image who’s alt text starts with “untitled”.
- **Enhancement:** `detectSPArouting` feature listens for `click` events instead of `mousemove` for better performance.

Explore [props & methods](https://sa11y.netlify.app/developers/props/) page for documentation.

## Bug fixes
- Resolved an issue with the automatic detection of shadow DOM elements on the page.
- Resolved an issue where unique characters are not encoded via CSV export.
- Implemented support for `color-mix` for colour contrast checking. Thanks to @nmerget! (Issue #85)
- Resolved a false positive in the document link check. URLs like `https://press.un.org/en/2022/sc14904.doc.htm` will no longer trigger warnings due to ".doc" in the URL. Thanks to @gregrgay! (Issue #86)
  • Loading branch information
@adamchaboryk
adamchaboryk authored Jun 4, 2024
1 parent caf6f92 commit 12cdb95
Show file tree
Hide file tree
Showing 199 changed files with 10,847 additions and 7,944 deletions.
2 changes: 1 addition & 1 deletion bookmarklet/v2-en.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion bookmarklet/v2.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

194 changes: 148 additions & 46 deletions dist/css/control-panel.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ audio {
inset-inline-start: 42px;
}
#panel.top-right, #panel.top-left {
top: 45px;
top: 35px;
bottom: unset;
}
#panel.active {
Expand Down Expand Up @@ -225,6 +225,11 @@ audio {
border-bottom: 1px solid var(--sa11y-panel-bg-splitter);
}

.top-left #panel-alert-content,
.top-right #panel-alert-content {
border: 0;
}

#panel-alert-preview .close-tooltip {
display: none;
}
Expand Down Expand Up @@ -282,7 +287,7 @@ strong {
font-weight: 600;
}

a:not(#outline-list a) {
a:not(#outline-list a):not(.edit) {
color: var(--sa11y-hyperlink);
text-decoration: underline;
cursor: pointer;
Expand Down Expand Up @@ -434,6 +439,7 @@ hr {
/* 9. Outline and Settings shared styles */
/* ***************************************** */
#page-issues,
#images-panel,
#settings-panel,
#outline-panel {
display: none;
Expand All @@ -442,6 +448,7 @@ hr {
}

#page-issues.active,
#images-panel.active,
#settings-panel.active,
#outline-panel.active {
display: block;
Expand All @@ -453,13 +460,24 @@ hr {
text-align: start;
}

#about-content {
padding-top: 5px;
}
#about-content p {
display: block;
margin-block-end: 1em;
}

#page-issues-content,
#images-content,
#settings-content,
#outline-content {
padding: 0 15px 10px;
border-bottom: 1px solid var(--sa11y-panel-bg-splitter);
}
.top-right #page-issues-content, .top-left #page-issues-content,
.top-right #images-content,
.top-left #images-content,
.top-right #settings-content,
.top-left #settings-content,
.top-right #outline-content,
Expand All @@ -472,6 +490,13 @@ hr {
overflow-y: auto;
}

#settings-content {
max-height: 400px;
overflow-y: auto;
}

/* Note to self: stop tinkering with the max-height. This is the max height that will accommodate the Page Issues and Readability panel on your average 13" screen. */
#images-content,
#outline-content {
max-height: 250px;
overflow-y: auto;
Expand Down Expand Up @@ -528,34 +553,82 @@ hr {
margin-inline-start: 75px;
}

/* **************************************** */
/* 11. Page Outline extras */
/* **************************************** */
/* Badges */
.badge {
display: inline;
min-width: 10px;
padding: 2px 5px;
font-size: 13px;
font-weight: 700;
/* ***************************************** */
/* 10A. Images list */
/* ***************************************** */
#images-list {
display: block;
padding: 0;
margin: 0;
}
#images-list li {
display: block;
width: 100%;
margin: 15px 0;
overflow: hidden;
list-style-type: none;
border-bottom: 1px solid var(--sa11y-panel-bg-splitter);
}
#images-list li:first-child {
margin-top: 5px;
}
#images-list li:last-child {
margin-bottom: 0;
border: none;
}
#images-list li .alt {
padding: 2px 5px 10px;
}
#images-list li .edit {
position: relative;
padding: 4px 7px;
color: var(--sa11y-panel-primary);
text-align: center;
white-space: nowrap;
background-color: var(--sa11y-panel-badge);
border: 1px solid transparent;
border-radius: 10px;
text-decoration: none;
cursor: pointer;
background: var(--sa11y-panel-bg-secondary);
border: 2px solid var(--sa11y-button-outline);
border-radius: 5px;
}

.error-badge {
color: var(--sa11y-error-text);
background: var(--sa11y-error);
#images-list li .edit:hover, #images-list li .edit:focus {
background-color: var(--sa11y-shortcut-hover);
}

.warning-badge {
color: var(--sa11y-panel-bg);
background: var(--sa11y-yellow-text);
#images-list li .edit::before {
position: absolute;
top: -10px;
right: -10px;
bottom: -10px;
left: -10px;
content: "";
}
#images-list li .badge {
margin-inline-end: 4px;
}
#images-list li img {
float: inline-start;
max-width: 110px;
margin-inline-end: 10px;
margin-block-end: 15px;
border-radius: 5px;
}
#images-list li.warning .alt {
color: var(--sa11y-yellow-text);
}
#images-list li.warning img {
border: 5px solid var(--sa11y-yellow-text);
}
#images-list li.error .alt {
color: var(--sa11y-error);
}
#images-list li.error img {
border: 5px solid var(--sa11y-error);
}
#images-list li.good img {
border: 5px solid var(--sa11y-panel-badge);
}

/* **************************************** */
/* 11. Page Outline extras */
/* **************************************** */
/* Error icon */
.error-icon {
display: inline-block;
Expand Down Expand Up @@ -600,8 +673,7 @@ hr {
border-radius: 0 0 4px 4px;
}

#settings-toggle,
#outline-toggle {
#panel-controls button {
position: relative;
display: block;
width: 100%;
Expand All @@ -618,26 +690,18 @@ hr {
background-color: var(--sa11y-panel-bg-secondary);
border-top: 1px solid var(--sa11y-panel-bg-splitter);
border-bottom: 1px solid var(--sa11y-panel-bg-splitter);
border-inline-end: 1px solid var(--sa11y-panel-bg-splitter);
outline: 0;
opacity: 1;
transition: background 0.2s;
}
#settings-toggle:hover, #settings-toggle.settings-active, #settings-toggle.outline-active,
#outline-toggle:hover,
#outline-toggle.settings-active,
#outline-toggle.outline-active {
#panel-controls button:hover, #panel-controls button.active {
background-color: var(--sa11y-shortcut-hover);
}
#settings-toggle.settings-active, #settings-toggle.outline-active,
#outline-toggle.settings-active,
#outline-toggle.outline-active {
#panel-controls button.active {
font-weight: 500;
}

#outline-toggle {
border-inline-end: 1px solid var(--sa11y-panel-bg-splitter);
}

#export-results-mode,
label {
display: inline-block;
Expand Down Expand Up @@ -746,6 +810,13 @@ label:not(#colour-filter-mode, #export-results-mode) {
display: block;
}

.top-left.has-page-issues #page-issues,
.top-right.has-page-issues #page-issues {
/* Hide double border. */
margin-top: -1px;
border-top: 1px solid var(--sa11y-panel-bg-splitter);
}

/* ************************************* */
/* 15. Colour filters plugin */
/* ************************************* */
Expand Down Expand Up @@ -815,16 +886,19 @@ label:not(#colour-filter-mode, #export-results-mode) {
}
}

.select-dropdown {
position: relative;
display: flex;
align-items: center;
}

.select-dropdown:after {
position: absolute;
width: 0;
height: 0;
margin-top: 22.5px;
content: " ";
border-top: 5px solid var(--sa11y-setting-switch-bg-off);
border-right: 5px solid transparent;
border-left: 5px solid transparent;
inset-inline-end: 25px;
inset-inline-end: 14px;
}

#colour-filter-select {
Expand Down Expand Up @@ -872,11 +946,20 @@ label:not(#colour-filter-mode, #export-results-mode) {
opacity: 1;
}

.top-left #readability-content,
.top-right #readability-content {
border-top: 1px solid var(--sa11y-panel-bg-splitter);
}

.left #readability-content,
.right #readability-content {
border-bottom: 1px solid var(--sa11y-panel-bg-splitter);
}

#readability-content {
width: 100%;
padding: 10px 15px;
color: var(--sa11y-panel-primary);
border-bottom: 1px solid var(--sa11y-panel-bg-splitter);
}

#readability-details {
Expand Down Expand Up @@ -944,6 +1027,15 @@ label:not(#colour-filter-mode, #export-results-mode) {
padding: 0 15px !important;
border-bottom: 0 !important;
}
.hide-settings-border li:not(#colour-filter-item) {
display: none !important;
}
.hide-settings-border #about-content {
display: none;
}
.hide-settings-border.scrollable::before {
all: unset;
}

/* ***************************************** */
/* 19. Scrollbar styling */
Expand All @@ -970,14 +1062,24 @@ label:not(#colour-filter-mode, #export-results-mode) {
bottom: auto;
left: 0;
z-index: -1;
width: 100%;
height: 250px;
content: "";
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%, var(--sa11y-panel-scrollable) 100%);
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, var(--sa11y-panel-scrollable) 100%);
background-position: bottom;
transition: opacity 1s ease-in-out;
animation: fade 1s ease-in-out;
}

#settings-content.scrollable::before {
height: 400px;
}

.top-right .scrollable::before,
.top-left .scrollable::before {
border-radius: 5px;
}

#page-issues-content.scrollable::before {
height: 160px;
}
Expand Down Expand Up @@ -1019,7 +1121,7 @@ label:not(#colour-filter-mode, #export-results-mode) {
/* 21. Internationalization (i18n) */
/* ***************************************** */
#panel {
width: 375px;
width: 400px;
}

#container:lang(en) #panel {
Expand All @@ -1032,7 +1134,7 @@ label:not(#colour-filter-mode, #export-results-mode) {
#container:lang(de) #panel,
#container:lang(sv) #panel,
#container:lang(zh) #panel {
width: 335px;
width: 350px;
}

#container:lang(bg) .switch:not(#export-results-item *),
Expand Down
2 changes: 1 addition & 1 deletion dist/css/control-panel.min.css
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 12cdb95

Please sign in to comment.