Fix ApplicationShell component aria roles issues (#2651)

* fix(application-shell): fix a11y aria roles issues * chore(application-shell): changeset added
commercetools · Jun 24, 2022 · f7ec746 · f7ec746 · github-actions · Jun 24, 2022
1 parent 0ba23b8
commit f7ec746
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/.changeset/quick-plums-wonder.md b/.changeset/quick-plums-wonder.md
@@ -0,0 +1,9 @@
+---
+'@commercetools-frontend/application-shell': patch
+---
+
+Fixed aria role names.
+
+We were using invalid role names in some of the component's elements.
+
+Special mention to the element wrapping the notifications as it now uses the aria-live [attribute](https://www.w3.org/TR/wai-aria/#aria-live) (with **polite** value).
diff --git a/packages/application-shell/src/components/application-shell/application-shell.tsx b/packages/application-shell/src/components/application-shell/application-shell.tsx
@@ -253,7 +253,6 @@ export const RestrictedApplication = <
                         userBusinessRole={user?.businessRole ?? undefined}
                       />
                       <div
-                        role="application-layout"
                         css={css`
                           height: 100vh;
                           display: grid;
@@ -263,7 +262,8 @@ export const RestrictedApplication = <
                       >
                         <div
                           ref={notificationsGlobalRef}
-                          role="global-notifications"
+                          role="region"
+                          aria-live="polite"
                           css={css`
                             grid-row: 1;
                             grid-column: 1/3;
@@ -321,7 +321,6 @@ export const RestrictedApplication = <
                         </Route>
 
                         <header
-                          role="header"
                           css={css`
                             grid-row: 2;
                             grid-column: 1/3;
@@ -334,7 +333,6 @@ export const RestrictedApplication = <
                         </header>
 
                         <aside
-                          role="aside"
                           css={css`
                             position: relative;
                             grid-row: 3;