Accessibility fixes. Resolve #306

- Improved contrast and font size in the search input. - Tweaked colors and font sizes to meet WCAG requirements. - Adjusted the behavior of the select input for better accessibility. - Marked decorative elements with `role="presentation"` for screen readers.
zotero · Oct 21, 2024 · 4ea64d4 · 4ea64d4
1 parent 95e5b50
commit 4ea64d4
Show file tree

Hide file tree

Showing 12 changed files with 70 additions and 43 deletions.
diff --git a/modules/web-common b/modules/web-common
diff --git a/src/js/components/bibliography.jsx b/src/js/components/bibliography.jsx
@@ -86,7 +86,7 @@ const BibliographyItem = memo(props => {
 			<div className="citation" ref={containerRef}>
 				{allowReorder && (
 					<div className="drag-handle" onMouseDown={onDrag} onTouchStart={onDrag}>
-						<Icon type="24/grip" width="24" height="24" />
+						<Icon type="24/grip" role="presentation" width="24" height="24" />
 					</div>
 				)}
 				<div
@@ -102,7 +102,7 @@ const BibliographyItem = memo(props => {
 						className={cx('d-xs-none d-md-block btn-outline-secondary btn-copy')}
 						onClick={onCopyCitationDialogOpen}
 					>
-						<Icon type={'16/quote'} width="16" height="16" />
+						<Icon type={'16/quote'} role="presentation" width="16" height="16" />
 					</Button>
 					<Button
 						icon
@@ -113,7 +113,7 @@ const BibliographyItem = memo(props => {
 						)}
 						onClick={handleCopySingleClick}
 					>
-						<Icon type={isCopied ? '16/tick' : '16/copy'} width="16" height="16" />
+							<Icon type={isCopied ? '16/tick' : '16/copy'} role="presentation" width="16" height="16" />
 					</Button>
 					</Fragment>
 				)}
@@ -127,7 +127,7 @@ const BibliographyItem = memo(props => {
 						className="btn-icon dropdown-toggle"
 						title="Options"
 					>
-						<Icon type={'28/dots'} width="28" height="28" />
+						<Icon type={'28/dots'} role="presentation" width="28" height="28" />
 					</DropdownToggle>
 					<DropdownMenu aria-label="Options" right>
 						{!isNumericStyle && (
@@ -190,7 +190,7 @@ const BibliographyItem = memo(props => {
 					className="btn-outline-secondary btn-remove"
 					onClick={onDeleteCitation}
 				>
-					<Icon type={'16/remove-sm'} width="16" height="16" />
+					<Icon type={'16/remove-sm'} role="presentation" width="16" height="16" />
 				</Button>
 				<script type="application/vnd.zotero.data+json">
 					{JSON.stringify(rawItem)}

diff --git a/src/js/components/bibliographySection.jsx b/src/js/components/bibliographySection.jsx
@@ -80,7 +80,7 @@ const BibliographySection = props => {
 			<div className="container" suppressHydrationWarning={ true }>
 				{ (!isReadOnly && localCitationsCount === 0) ? (
 					<Fragment>
-						<img className="empty-bibliography" src="static/images/empty-bibliography.svg" width="320" height="200" />
+						<img className="empty-bibliography" src="static/images/empty-bibliography.svg" width="320" height="200" role="presentation" />
 						<h2 className="empty-title">
 							<FormattedMessage
 								wrapRichTextChunksInFragment={ true }

diff --git a/src/js/components/form/creator-field.jsx b/src/js/components/form/creator-field.jsx
@@ -350,7 +350,7 @@ const CreatorField = forwardRef((props, ref) => {
 								onClick={ handleCreatorTypeSwitch }
 								title="Switch Creator Type"
 							>
-								<Icon type={ icon } width="20" height="20" />
+								<Icon type={ icon } role="presentation" width="20" height="20" />
 							</Button>
 							{
 								isDeleteAllowed ? (
@@ -360,7 +360,7 @@ const CreatorField = forwardRef((props, ref) => {
 										onClick={ handleCreatorRemove }
 										title="Remove Creator"
 									>
-										<Icon type={ '16/minus' } width="16" height="16" />
+										<Icon type={'16/minus'} role="presentation" width="16" height="16" />
 									</Button>
 								) : (
 									<Button
@@ -369,7 +369,7 @@ const CreatorField = forwardRef((props, ref) => {
 										disabled={ true }
 										title="Remove Creator"
 									>
-										<Icon type={ '16/minus' } width="16" height="16" />
+										<Icon type={'16/minus'} role="presentation" width="16" height="16" />
 									</Button>
 								)
 							}
@@ -381,7 +381,7 @@ const CreatorField = forwardRef((props, ref) => {
 										onClick={ handleCreatorAdd }
 										title="Add Creator"
 									>
-										<Icon type={ '16/plus' } width="16" height="16" />
+										<Icon type={ '16/plus' } role="presentation" width="16" height="16" />
 									</Button>
 								) : (
 									<Button
@@ -390,7 +390,7 @@ const CreatorField = forwardRef((props, ref) => {
 										disabled={ true }
 										title="Add Creator"
 									>
-										<Icon type={ '16/plus' } width="16" height="16" />
+										<Icon type={ '16/plus' } role="presentation" width="16" height="16" />
 									</Button>
 								)
 							}

diff --git a/src/js/components/message.jsx b/src/js/components/message.jsx
@@ -55,10 +55,11 @@ const Message = ({ action, id, message, kind, href, onDismiss, onReadMore, onSho
 				) }
 			</p>
 			<button
+				title="Dismiss"
 				className="btn btn-icon close"
 				onClick={ handleDismiss }
 			>
-				<Icon type={ '24/remove' } width="24" height="24" />
+				<Icon type={ '24/remove' } role="presentation" width="24" height="24" />
 			</button>
 		</div>
 	);

diff --git a/src/scss/abstracts/_variables.scss b/src/scss/abstracts/_variables.scss
@@ -11,8 +11,8 @@
 // Colors
 //
 
-$red:           #e52e3d;
-$blue:          #2970ff;
+$red:           #e42535;
+$blue:          #2464e5;
 $blue-dark:     #333c66;
 $blue-darkest:  #3d4466;
 $violet:        #5959ff;
@@ -23,7 +23,7 @@ $primary:   $red;
 $secondary: $blue;
 $error:     $primary;
 $warning:   #ff794d;
-$success:   #3abd57;
+$success:   #31a149;
 $info:      $blue;
 
 $shade-0: #fff;
@@ -32,8 +32,8 @@ $shade-2: #ebebeb;
 $shade-3: #ddd;
 $shade-4: #ccc;
 $shade-4: #bbb;
-$shade-5: #999;
-$shade-6: #777;
+$shade-5: #949494; // the lightest shade that can be used on white and still meet 3:1 contrast (WCAG AA for large text)
+$shade-6: #757575; // the lightest shade that can be used on white and still meet 4.5:1 contrast (WCAG AA for normal text)
 $shade-7: #222;
 $shade-8:  #333;
 $shade-9:  #111;
@@ -203,7 +203,7 @@ $btn-padding-y: 7px;
 $btn-padding-x-xl: $space-lg;
 $btn-padding-y-xl: $space-sm;
 $btn-padding-x-lg: $space-md;
-$btn-padding-y-lg: 4px;
+$btn-padding-y-lg: 6px;
 $btn-padding-x-sm: $space-sm;
 $btn-padding-y-sm: 3px;
 
@@ -240,8 +240,8 @@ $input-border-radius: $input-btn-border-radius;
 $input-border-radius-lg: $border-radius-sm;
 
 $input-focus-color:  $secondary;
-$input-border-color: $shade-3;
-$placeholder-color:  $shade-4;
+$input-border-color: $shade-6;
+$placeholder-color:  $shade-5;
 $label-color:        $shade-6;
 
 $input-border-width: $border-width;

diff --git a/src/scss/components/_about.scss b/src/scss/components/_about.scss
@@ -39,7 +39,8 @@
 	}
 
 	a {
-		color: mix($link-color, $shade-0, 40%);
+		color: #a6c3ff;
+		text-decoration: underline;
 	}
 
 	p {

diff --git a/src/scss/components/_cite-tools.scss b/src/scss/components/_cite-tools.scss
@@ -19,6 +19,7 @@
 	}
 
 	.form-control {
+		font-size: 1.125em;
 		transition: border $input-transition, box-shadow $input-transition, padding $input-transition;
 
 		&:focus {

diff --git a/src/scss/components/_message.scss b/src/scss/components/_message.scss
@@ -78,6 +78,8 @@
 	}
 
 	.btn:not(.btn-icon) {
+		font-size: 20px;
+		font-weight: bold;
 		margin-top: $space-xl - 8px;
 		margin-bottom: 8px;
 

diff --git a/src/scss/layout/_footer.scss b/src/scss/layout/_footer.scss
@@ -64,14 +64,19 @@ footer {
 .zotero-bib-container {
 	&.write {
 		footer {
+			color: $shade-0;
 			border-top-color: rgba(0, 0, 0, 0.2);
 			background: $about-bg;
 			-webkit-font-smoothing: antialiased;
 			-moz-osx-font-smoothing: grayscale;
 
-			&,
-			a {
-				color: $shade-0;
+			.copyright {
+				opacity: 1;
+				color: #a5a9bb;
+
+				a {
+					color: #a5a9bb;
+				}
 			}
 		}
 	}

diff --git a/src/scss/layout/_forms.scss b/src/scss/layout/_forms.scss
@@ -122,7 +122,7 @@
 		border: none;
 
 		.select-control {
-			padding: $input-btn-padding-y-sm $input-btn-padding-x-sm;
+			padding: $input-btn-padding-y-sm + 4px $input-btn-padding-x-sm;
 		}
 	}
 }

diff --git a/test/translate.test.jsx b/test/translate.test.jsx
@@ -90,16 +90,19 @@ describe('Translate', () => {
 			'searchbox', { name: 'Enter a URL, ISBN, DOI, PMID, arXiv ID, or title' })
 		).toHaveAttribute('readonly'));
 
-		const newItemSection = await screen.findByRole('region', { name: 'New item…' });
-
 		await waitFor(() => expect(screen.getByRole(
 			'searchbox', { name: 'Enter a URL, ISBN, DOI, PMID, arXiv ID, or title' }
 		)).not.toHaveAttribute('readonly'));
 
+		let newItemSection;
+		await waitFor(async () => {
+			newItemSection = await screen.findByRole('region', { name: 'New item…' });
+			return expect(getByText(newItemSection, /The Complete Golden Retriever Handbook/)).toBeInTheDocument();
+		});
+
 		expect(getByRole(newItemSection, 'button', { name: 'Close' })).toBeInTheDocument();
 		expect(getByRole(newItemSection, 'button', { name: 'Delete' })).toBeInTheDocument();
 		expect(getByRole(newItemSection, 'button', { name: 'Edit' })).toBeInTheDocument();
-		expect(getByText(newItemSection, /The Complete Golden Retriever Handbook/)).toBeInTheDocument();
 
 		const bibliography = screen.getByRole("list", { name: "Bibliography" });
 		expect(getAllByRole(bibliography, 'listitem')).toHaveLength(6);
@@ -128,16 +131,19 @@ describe('Translate', () => {
 			'searchbox', { name: 'Enter a URL, ISBN, DOI, PMID, arXiv ID, or title' })
 		).toHaveAttribute('readonly'));
 
-		const newItemSection = await screen.findByRole('region', { name: 'New item…' });
-
 		await waitFor(() => expect(screen.getByRole(
 			'searchbox', { name: 'Enter a URL, ISBN, DOI, PMID, arXiv ID, or title' }
 		)).not.toHaveAttribute('readonly'));
 
+		let newItemSection;
+		await waitFor(async () => {
+			newItemSection = await screen.findByRole('region', { name: 'New item…' });
+			return expect(getByText(newItemSection, /The Complete Golden Retriever Handbook/)).toBeInTheDocument();
+		});
+
 		expect(getByRole(newItemSection, 'button', { name: 'Close' })).toBeInTheDocument();
 		expect(getByRole(newItemSection, 'button', { name: 'Delete' })).toBeInTheDocument();
 		expect(getByRole(newItemSection, 'button', { name: 'Edit' })).toBeInTheDocument();
-		expect(getByText(newItemSection, /The Complete Golden Retriever Handbook/)).toBeInTheDocument();
 
 		const bibliography = screen.getByRole("list", { name: "Bibliography" });
 		expect(getAllByRole(bibliography, 'listitem')).toHaveLength(6);
@@ -169,16 +175,19 @@ describe('Translate', () => {
 			'searchbox', { name: 'Enter a URL, ISBN, DOI, PMID, arXiv ID, or title' })
 		).toHaveAttribute('readonly'));
 
-		const newItemSection = await screen.findByRole('region', { name: 'New item…' });
-
 		await waitFor(() => expect(screen.getByRole(
 			'searchbox', { name: 'Enter a URL, ISBN, DOI, PMID, arXiv ID, or title' }
 		)).not.toHaveAttribute('readonly'));
 
+		let newItemSection;
+		await waitFor(async () => {
+			newItemSection = await screen.findByRole('region', { name: 'New item…' });
+			return expect(getByText(newItemSection, /The Complete Golden Retriever Handbook/)).toBeInTheDocument();
+		});
+
 		expect(getByRole(newItemSection, 'button', { name: 'Close' })).toBeInTheDocument();
 		expect(getByRole(newItemSection, 'button', { name: 'Delete' })).toBeInTheDocument();
 		expect(getByRole(newItemSection, 'button', { name: 'Edit' })).toBeInTheDocument();
-		expect(getByText(newItemSection, /The Complete Golden Retriever Handbook/)).toBeInTheDocument();
 
 		const bibliography = screen.getByRole("list", { name: "Bibliography" });
 		expect(getAllByRole(bibliography, 'listitem')).toHaveLength(6);
@@ -211,16 +220,19 @@ describe('Translate', () => {
 			'searchbox', { name: 'Enter a URL, ISBN, DOI, PMID, arXiv ID, or title' })
 		).toHaveAttribute('readonly'));
 
-		const newItemSection = await screen.findByRole('region', { name: 'New item…' });
-
 		await waitFor(() => expect(screen.getByRole(
 			'searchbox', { name: 'Enter a URL, ISBN, DOI, PMID, arXiv ID, or title' }
 		)).not.toHaveAttribute('readonly'));
 
+		let newItemSection;
+		await waitFor(async () => {
+			newItemSection = await screen.findByRole('region', { name: 'New item…' });
+			return expect(getByText(newItemSection, /The New Era of Canine Science: Reshaping Our Relationships With Dogs/)).toBeInTheDocument();
+		});
+
 		expect(getByRole(newItemSection, 'button', { name: 'Close' })).toBeInTheDocument();
 		expect(getByRole(newItemSection, 'button', { name: 'Delete' })).toBeInTheDocument();
 		expect(getByRole(newItemSection, 'button', { name: 'Edit' })).toBeInTheDocument();
-		expect(getByText(newItemSection, /The New Era of Canine Science: Reshaping Our Relationships With Dogs/)).toBeInTheDocument();
 
 		const bibliography = screen.getByRole("list", { name: "Bibliography" });
 		expect(getAllByRole(bibliography, 'listitem')).toHaveLength(6);
@@ -358,13 +370,16 @@ describe('Translate', () => {
 			'searchbox', { name: 'Enter a URL, ISBN, DOI, PMID, arXiv ID, or title' })
 		).toHaveAttribute('readonly'));
 
-		const newItemSection = await screen.findByRole('region', { name: 'New item…' });
-
 		await waitFor(() => expect(screen.getByRole(
 			'searchbox', { name: 'Enter a URL, ISBN, DOI, PMID, arXiv ID, or title' }
 		)).not.toHaveAttribute('readonly'));
 
-		expect(getByText(newItemSection, /Circadian mood variations in twitter content/)).toBeInTheDocument();
+		let newItemSection;
+		await waitFor(async () => {
+			newItemSection = await screen.findByRole('region', { name: 'New item…' });
+			return expect(getByText(newItemSection, /Circadian mood variations in twitter content/)).toBeInTheDocument();
+		});
+
 		expect(hasTranslated).toBe(true);
 	});
 
@@ -388,8 +403,10 @@ describe('Translate', () => {
 		expect(input).toHaveFocus();
 		fireEvent.paste(input, { clipboardData: { getData: () => pastedBibtex } });
 
-		const newItemSection = await screen.findByRole('region', { name: 'New item…' });
-		expect(await findByText(newItemSection, /Understanding Dogs/)).toBeInTheDocument();
+		await waitFor(async () => {
+			const newItem = await screen.findByRole('region', { name: 'New item…' });
+			return expect(getByText(newItem, /Understanding Dogs/)).toBeInTheDocument();
+		});
 		expect(hasTranslated).toBe(true);
 	});
+15 −0		.github/workflows/ci.yml
+1 −1		.nvmrc
+1 −12		components/button.jsx
+12 −3		components/dropdown.jsx
+66 −8		components/icon.jsx
+185 −170		components/select.jsx
+2 −1		hooks/index.js
+2 −2		hooks/use-focus-manager.js
+11 −0		hooks/use-force-update.js
+2,407 −11,140		package-lock.json
+22 −22		package.json
+18 −22		scss/_icon.scss
+5 −1		scss/_select.scss
+8 −5		scss/abstracts/_defaults.scss
+15 −0		test/dropdown.test.jsx
+171 −7		test/select.test.jsx
-Original file line number
+Diff line change
@@ Expand Up / @@ -39,7 +39,8 @@ @@
     	}
     	a {
-    		color: mix($link-color, $shade-0, 40%);
+    		color: #a6c3ff;
+    		text-decoration: underline;
     	}
     	p {
@@ Expand Down @@