fix(accessibility): meilleure accessibilité sur les outils (#5390)

SocialGouv · Oct 19, 2023 · 43e8ad3 · 43e8ad3
1 parent c674b32
commit 43e8ad3
Show file tree

Hide file tree

Showing 88 changed files with 3,029 additions and 3,093 deletions.
diff --git a/...es/code-du-travail-frontend/__tests__/__snapshots__/fiche-ministere-travail.test.tsx.snap b/...es/code-du-travail-frontend/__tests__/__snapshots__/fiche-ministere-travail.test.tsx.snap
diff --git a/...ode-du-travail-frontend/__tests__/__snapshots__/modeles-de-courriers-[slug].test.tsx.snap b/...ode-du-travail-frontend/__tests__/__snapshots__/modeles-de-courriers-[slug].test.tsx.snap
diff --git a/packages/code-du-travail-frontend/pages/outils/[slug].tsx b/packages/code-du-travail-frontend/pages/outils/[slug].tsx
@@ -70,15 +70,15 @@ function Outils({
       <div>
         <Container>
           <Flex>
-            <ShareContainer>
-              <Share title={title} metaDescription={description} />
-            </ShareContainer>
             <Tool
               icon={icon}
               title={title}
               displayTitle={displayTitle}
               slug={slug}
             />
+            <ShareContainer>
+              <Share title={title} metaDescription={description} />
+            </ShareContainer>
           </Flex>
           <RelatedItems items={relatedItems} />
           {router.asPath !== "/outils/indemnite-licenciement" && (
@@ -151,5 +151,5 @@ export const ShareContainer = styled.div`
 
 export const Flex = styled.div`
   display: flex;
-  flex-direction: column;
+  flex-direction: column-reverse;
 `;
diff --git a/packages/code-du-travail-frontend/src/common/Answer.tsx b/packages/code-du-travail-frontend/src/common/Answer.tsx
@@ -102,7 +102,11 @@ function Answer({
           {additionalContent}
           <ShareContainer>
             <Paragraph noMargin>Partager ce contenu&nbsp;:&nbsp;</Paragraph>
-            <Share title={title} metaDescription={metaDescription} />
+            <Share
+              title={title}
+              metaDescription={metaDescription}
+              tabIndex={-1}
+            />
           </ShareContainer>
           <Feedback url={router.asPath} />
         </MainContent>

diff --git a/packages/code-du-travail-frontend/src/common/Article.js b/packages/code-du-travail-frontend/src/common/Article.js
@@ -26,48 +26,50 @@ const Article = ({
   return (
     <Container>
       <Wrapper variant="main">
-        <Flex>
+        <FlexReverse>
+          <Content>{children}</Content>
+          <Flex>
+            {suptitle && <OrderedSuptitle as="p">{suptitle}</OrderedSuptitle>}
+            <StyledPageTitle
+              subtitle={subtitle}
+              stripe="left"
+              shift={theme.spacings.larger}
+            >
+              {title}
+            </StyledPageTitle>
+            <Meta>
+              <Paragraph noMargin fontSize="small">
+                {source &&
+                  (source.url ? (
+                    <StyledSpan>
+                      Source:{" "}
+                      <A11yLink
+                        href={source.url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        {source.name}
+                      </A11yLink>
+                    </StyledSpan>
+                  ) : (
+                    <StyledSpan>Source: {source.name}</StyledSpan>
+                  ))}
+
+                {source && date && (
+                  <HideOnMobile aria-hidden="true">&nbsp;-&nbsp;</HideOnMobile>
+                )}
+                {date && (
+                  <StyledSpan>
+                    {dateLabel}&nbsp;:&nbsp;{date}
+                  </StyledSpan>
+                )}
+              </Paragraph>
+            </Meta>
+          </Flex>
           <ShareContainer>
             <Share title={title} metaDescription={metaDescription} />
           </ShareContainer>
-          {suptitle && <OrderedSuptitle as="p">{suptitle}</OrderedSuptitle>}
-          <StyledPageTitle
-            subtitle={subtitle}
-            stripe="left"
-            shift={theme.spacings.larger}
-          >
-            {title}
-          </StyledPageTitle>
-          <Meta>
-            <Paragraph noMargin fontSize="small">
-              {source &&
-                (source.url ? (
-                  <StyledSpan>
-                    Source:{" "}
-                    <A11yLink
-                      href={source.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      {source.name}
-                    </A11yLink>
-                  </StyledSpan>
-                ) : (
-                  <StyledSpan>Source: {source.name}</StyledSpan>
-                ))}
-
-              {source && date && (
-                <HideOnMobile aria-hidden="true">&nbsp;-&nbsp;</HideOnMobile>
-              )}
-              {date && (
-                <StyledSpan>
-                  {dateLabel}&nbsp;:&nbsp;{date}
-                </StyledSpan>
-              )}
-            </Paragraph>
-          </Meta>
-        </Flex>
-        <Content>{children}</Content>
+        </FlexReverse>
       </Wrapper>
     </Container>
   );
@@ -113,6 +115,11 @@ const Flex = styled.div`
   flex-direction: column;
 `;
 
+const FlexReverse = styled.div`
+  display: flex;
+  flex-direction: column-reverse;
+`;
+
 const ShareContainer = styled.div`
   display: flex;
   align-items: center;

diff --git a/...-frontend/src/common/References/__tests__/__snapshots__/ReferencesJuridiques.test.js.snap b/...-frontend/src/common/References/__tests__/__snapshots__/ReferencesJuridiques.test.js.snap
@@ -8,8 +8,7 @@ exports[`<ReferencesJuridiques /> should render 1`] = `
     <div>
       <button
         aria-expanded="false"
-        class="sc-kOPcWz ezOCpB sc-bbSZdi klJhHR"
-        tabindex="1"
+        class="sc-kOPcWz ezOCpB sc-bbSZdi jpCDWv"
         type="button"
       >
         <svg

diff --git a/packages/code-du-travail-frontend/src/common/Share.tsx b/packages/code-du-travail-frontend/src/common/Share.tsx
@@ -11,9 +11,14 @@ const POPUP_OPTIONS =
 type Props = {
   title: string;
   metaDescription: string;
+  tabIndex?: number;
 };
 
-export const Share = ({ title, metaDescription }: Props): JSX.Element => {
+export const Share = ({
+  title,
+  metaDescription,
+  tabIndex,
+}: Props): JSX.Element => {
   const [currentPageUrl, setCurrentPageUrl] = useState("");
   const hiddenInputRef = useRef(null);
   const [isUrlCopied, setUrlCopied] = useState(false);
@@ -38,6 +43,7 @@ export const Share = ({ title, metaDescription }: Props): JSX.Element => {
             POPUP_OPTIONS
           );
         }}
+        tabIndex={tabIndex}
       >
         <Circle>
           <StyledIcon as={icons.ShareFacebook} />
@@ -55,6 +61,7 @@ export const Share = ({ title, metaDescription }: Props): JSX.Element => {
         onClick={() => {
           matopush(["trackEvent", "clic_share", currentPageUrl, "email"]);
         }}
+        tabIndex={tabIndex}
       >
         <Circle>
           <StyledIcon as={icons.Mail} />
@@ -74,6 +81,7 @@ export const Share = ({ title, metaDescription }: Props): JSX.Element => {
             POPUP_OPTIONS
           );
         }}
+        tabIndex={tabIndex}
       >
         <Circle>
           <StyledIcon as={icons.ShareLinkedin} />
@@ -85,6 +93,7 @@ export const Share = ({ title, metaDescription }: Props): JSX.Element => {
           <StyledButton
             className="spacing-left"
             title="Plus d’options"
+            tabIndex={tabIndex}
             onClick={async () => {
               matopush([
                 "trackEvent",