Issue #218: ADD Acessibility page

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.2.0] - 2024-11-08
+
+### Added
+
+ - New page for explaining acessibility in MECRED. 
+
 ## [1.1.3] - 2024-11-06
 
 ### Fixed

src/app/acessibilidade/page.js

+import Overlay from "../components/Overlay";
+
+export default function Help() {
+  return (
+    <Overlay>
+      <div className="flex w-full justify-center">
+          <div className="max-w-screen-md bg-white rounded p-12">
+            <div className="text-2xl mb-8 text-text-filter font-bold">Acessibilidade</div>
+            <div className="text-md mb-8 text-text-filter">
+            O MECRED acredita na importância de uma educação de qualidade e acessível para todos. Por isso, adota os princípios do design universal para assegurar que sua plataforma seja inclusiva e de fácil navegação. Nesta página, você encontrará instruções detalhadas sobre como navegar pelo site sem o uso do mouse. Ao final da página, há um botão que direciona para a tela de contato, onde você pode relatar eventuais problemas diretamente à nossa equipe.
+            </div>
+            <div className="border-2 bg-main rounded mb-3 p-4">
+              <div className="text-xl mb-2 text-text-filter font-bold">Atalhos</div>
+              <div className="text-md text-text-filter"><div className="font-bold font-mono inline mx-2">{"<TAB>"}</div>Navegação pela página.</div>
+              <div className="text-md text-text-filter"><div className="font-bold font-mono inline mx-2">{"<Ctrl> + <+>"}</div>Aumentar o tamanho da fonte.</div>
+              <div className="text-md text-text-filter"><div className="font-bold font-mono inline mx-2">{"<Ctrl> + <->"}</div>Diminuir o tamanho da fonte.</div>
+              <div className="text-md text-text-filter"><div className="font-bold font-mono inline mx-2">{"<Ctrl> + <0>"}</div>Restaurar o tamanho da fonte para o tamanho original.</div>
+            </div>
+          <div className="flex justify-center flex-col items-center">
+            <div className="text-main-text mt-4 text-xl font-bold">Quer saber mais?</div>
+            <div className="text-main-text text-md mt-1 ml-3">Acesse a página de Ajuda e Suporte!</div>
+            <a href="/ajuda" className="mt-4 bg-secondary text-md text-white p-1 px-6 rounded-lg hover:bg-secondary-hover">Ir para a página de Ajuda</a>
+          </div>
+          </div>
+      </div>
+    </Overlay>
+  )
+}
\ No newline at end of file

src/app/components/AcessibilityBar.js

@@ -27,6 +27,7 @@ export default function AcessibilityBar({ handleOpenMenu, openMenu }) {
     const [defaultSizes, setDefaultSizes] = useState({});
     const [sizeProperties, setSizeProperties] = useState({});
 
+    const router = useRouter();
     const pathname = usePathname()
 
     function goHeader() {
@@ -222,7 +223,7 @@ export default function AcessibilityBar({ handleOpenMenu, openMenu }) {
                                         className="text-m pb-1" />
                                 </button>
 
-                                <button onClick={() => handleAccessibility(2)}>
+                                <button onClick={() => router.push("/acessibilidade")}>
                                     Acessibilidade
                                 </button>