tab order accessibility update

RachelDau · Mar 13, 2024 · b96d0c1 · b96d0c1
1 parent e4369ab
commit b96d0c1
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 10 deletions.
diff --git a/packages/app/obojobo-repository/shared/components/__snapshots__/notification.test.js.snap b/packages/app/obojobo-repository/shared/components/__snapshots__/notification.test.js.snap
@@ -30,7 +30,9 @@ exports[`Notification component hides the notification on exit button click 1`]
     <div
       className="notification-header"
     >
-      <h1>
+      <h1
+        tabindex="0"
+      >
         Test Title
       </h1>
       <button
@@ -40,7 +42,9 @@ exports[`Notification component hides the notification on exit button click 1`]
         x
       </button>
     </div>
-    <p>
+    <p
+      tabindex="0"
+    >
       Test Notification
     </p>
   </div>

diff --git a/packages/app/obojobo-repository/shared/components/notification.jsx b/packages/app/obojobo-repository/shared/components/notification.jsx
@@ -38,12 +38,12 @@ const Notification = ({ onDataFromNotification }) => {
 		return (
 			<div className={`notification-banner`} key={key}>
 				<div className="notification-header">
-					<h1>{title}</h1>
+					<h1 tabindex="0">{title}</h1>
 					<button onClick={() => onClickExitNotification(key)} className="notification-exit-button">
 						x
 					</button>
 				</div>
-				<p>{text}</p>
+				<p tabindex="0">{text}</p>
 			</div>
 		)
 	}

diff --git a/packages/app/obojobo-repository/shared/components/repository-nav.jsx b/packages/app/obojobo-repository/shared/components/repository-nav.jsx
@@ -24,7 +24,6 @@ const RepositoryNav = props => {
 	const onBlurHandler = () => {
 		timeOutId = setTimeout(() => {
 			setMenuOpen(false)
-			setNotificationsOpen(false)
 		})
 	}
 	const onFocusHandler = () => {
@@ -90,10 +89,9 @@ const RepositoryNav = props => {
 								{props.displayName}
 
 								{numberNotifications > 0 && (
-									<div className="notification-indicator" onClick={onToggleNotifications}>
-										{' '}
-										{numberNotifications} Notifications{' '}
-									</div>
+									<button className="notification-indicator" onClick={onToggleNotifications}>
+										{numberNotifications} Notifications
+									</button>
 								)}
 							</div>
 							<Avatar

diff --git a/packages/app/obojobo-repository/shared/components/repository-nav.scss b/packages/app/obojobo-repository/shared/components/repository-nav.scss
@@ -123,6 +123,7 @@
 	.notification-indicator {
 		color: $color-notification;
 		cursor: pointer;
+		height: 0;
 	}
 
 	.repository--nav--current-user--name {

diff --git a/packages/app/obojobo-repository/shared/components/repository-nav.test.js b/packages/app/obojobo-repository/shared/components/repository-nav.test.js
@@ -283,7 +283,7 @@ describe('RepositoryNav', () => {
 
 		expect(
 			component.root.findByProps({ className: 'repository--nav--current-user--name' }).children[1]
-				.props.children[1]
+				.props.children[0]
 		).toBe(5)
 	})
 	test('renders null when there are no notifications but document.cookie is not null', () => {