a11y: Make field and format buttons keyboard-accessible

Also add aria-pressed attribute to signal that these are toggle buttons.
zotero · May 31, 2024 · b5c18cd · b5c18cd
1 parent 0c4d11a
commit b5c18cd
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 26 deletions.
diff --git a/frontend/scss/style.scss b/frontend/scss/style.scss
@@ -51,34 +51,36 @@ h2 {
 		width: 90%;
 
 		li {
-			background-color: var(--material-button);
-			box-shadow:
-				0px 1px 0.75px 0px var(--fill-quinary),
-				0px 0.25px 0.25px 0px var(--color-border);
-			;
-			border: 0.5px solid var(--fill-senary);
-			color: var(--color-primary);
-			cursor: default;
 			display: inline-block;
 			margin: 4px 7px 4px 0;
-			padding: 3px 6px;
-			transition: border 0.15s ease, background-color 0.15s ease;
 
-			&:hover {
-				background-color: var(--accent-azure);
-				color: var(--accent-white);
-			}
-
-			&.field-active,
-			&.format-active {
-				background: var(--accent-blue);
-				border-color: var(--accent-blue);
-				color: var(--accent-white);
+			> button {
+				background-color: var(--material-button);
+				box-shadow:
+					0px 1px 0.75px 0px var(--fill-quinary),
+					0px 0.25px 0.25px 0px var(--color-border);
+				border: 0.5px solid var(--fill-senary);
+				color: var(--color-primary);
+				cursor: default;
+				padding: 3px 6px;
+				font-size: 1em;
 
 				&:hover {
 					background-color: var(--accent-azure);
+					color: var(--accent-white);
+				}
+
+				&.field-active,
+				&.format-active {
+					background: var(--accent-blue);
 					border-color: var(--accent-blue);
 					color: var(--accent-white);
+
+					&:hover {
+						background-color: var(--accent-azure);
+						border-color: var(--accent-blue);
+						color: var(--accent-white);
+					}
 				}
 			}
 		}

diff --git a/frontend/src/component.jsx b/frontend/src/component.jsx
@@ -408,12 +408,16 @@ const App = () => {
                             <ul className="formats-list">
                                 {state.filtered.formats.map(format => (
                                     <li
-                                        data-value={format}
                                         onClick={handleFormatClick}
                                         key={format}
-                                        className={state.query.format === format ? 'format-active' : 'a'}
                                     >
-                                        {format}
+                                        <button
+                                            aria-pressed={state.query.format === format}
+                                            data-value={format}
+                                            className={state.query.format === format ? 'format-active' : ''}
+                                        >
+                                            {format}
+                                        </button>
                                     </li>
                                 ))}
                             </ul>
@@ -425,12 +429,16 @@ const App = () => {
                             <ul className="fields-list">
                                 {state.filtered.fields.map(field => (
                                     <li
-                                        data-value={field}
                                         onClick={handleFieldClick}
                                         key={field}
-                                        className={state.query.fields.includes(field) ? 'field-active' : 'a'}
                                     >
-                                        {field}
+                                        <button
+                                            aria-pressed={state.query.fields.includes(field)}
+                                            className={state.query.fields.includes(field) ? 'field-active' : ''}
+                                            data-value={field}
+                                        >
+                                            {field}
+                                        </button>
                                     </li>
                                 ))}
                             </ul>