Open milofultz opened 7 months ago
When logged in, viewing the page with "Contacts"/"Civic Profile" tabs, there is no h1 for the page.
h1
1. Log in. 2. On next page when logged in, check the DOM.
There should be an h1 that "describes the content of the page (similar to the document's element</a>)" (<a rel="noreferrer nofollow" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#avoid_using_multiple_h1_elements_on_one_page">from MDN</a>).</p> <h3>Possible Solution (optional):</h3> <p>Add an <code>h1</code> that describes the content of the page. Don't know if it should be for the entire page (including the tabbed areas of "Contacts"/"Civic Profile") or just the tab themselves. Think it should probably be the whole page.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/xscottxbrownx"><img src="https://avatars.githubusercontent.com/u/71395931?v=4" />xscottxbrownx</a> commented <strong> 7 months ago</strong> </div> <div class="markdown-body"> <p>They are currently two separate pages.</p> <img width="203" alt="Screenshot 2023-11-21 at 9 37 18 AM" src="https://github.com/codeforpdx/PASS/assets/71395931/305ce31f-7fa6-4302-bc17-b940301e0515"> <img width="756" alt="Screenshot 2023-11-21 at 9 33 41 AM" src="https://github.com/codeforpdx/PASS/assets/71395931/283707ee-1d38-4b67-b69f-0a8d501dd2ec"> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/leekahung"><img src="https://avatars.githubusercontent.com/u/14917816?v=4" />leekahung</a> commented <strong> 7 months ago</strong> </div> <div class="markdown-body"> <blockquote> <p>They are currently two separate pages.</p> </blockquote> <p>That's right. Currently how the site is set up so that "Contacts" is in a separate page with the contacts list and "Civic Profile" will be on their own page with profile information. The two pages can be accessible via the navbar which consist of MUI tabs linking the pages to their respective routes (<code>/contacts</code> and <code>/civic-profile</code> as Scott pointed out in the image of <code>src/AppRoutes.jsx</code>).</p> <p>So if we were to improve the site with <code>h1</code> elements for accessibility, think we'll needed them each of the pages, one for "Contacts" and one for "Civic Profile". As for what elements to utilize, I think the recently implemented breadcrumbs would be a good choice since the trailing crumb would typically display the name of the route they've entered.</p> <img width="1440" alt="Screen Shot 2023-11-21 at 12 49 30" src="https://github.com/codeforpdx/PASS/assets/14917816/c2285fdf-b934-4141-bd29-dcd23097bed7"> <img width="1440" alt="Screen Shot 2023-11-21 at 12 49 45" src="https://github.com/codeforpdx/PASS/assets/14917816/e3a3d02a-61b3-42e1-a322-4a57d4825afa"> <p>The only part which this might not work would be under contacts since the breadcrumb there utilizes the contact's full webId as the crumb. We'll probably need an alternative for that edge case.</p> <img width="1440" alt="Screen Shot 2023-11-21 at 12 51 51" src="https://github.com/codeforpdx/PASS/assets/14917816/a9a7e38e-68a7-4861-b0ae-5208a2e84ccc"> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>
Bug Description:
When logged in, viewing the page with "Contacts"/"Civic Profile" tabs, there is no
h1for the page.Reproduction Steps:
1. Log in. 2. On next page when logged in, check the DOM.
Expected Behavior:
There should be an element</a>)" (<a rel="noreferrer nofollow" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#avoid_using_multiple_h1_elements_on_one_page">from MDN</a>).</p>
<h3>Possible Solution (optional):</h3>
<p>Add an <code>h1</code> that describes the content of the page. Don't know if it should be for the entire page (including the tabbed areas of "Contacts"/"Civic Profile") or just the tab themselves. Think it should probably be the whole page.</p> </div>
</div>
<div class="comment">
<div class="user">
<a rel="noreferrer nofollow" target="_blank" href="https://github.com/xscottxbrownx"><img src="https://avatars.githubusercontent.com/u/71395931?v=4" />xscottxbrownx</a>
commented
<strong> 7 months ago</strong> </div>
<div class="markdown-body">
<p>They are currently two separate pages.</p>
<img width="203" alt="Screenshot 2023-11-21 at 9 37 18 AM" src="https://github.com/codeforpdx/PASS/assets/71395931/305ce31f-7fa6-4302-bc17-b940301e0515">
<img width="756" alt="Screenshot 2023-11-21 at 9 33 41 AM" src="https://github.com/codeforpdx/PASS/assets/71395931/283707ee-1d38-4b67-b69f-0a8d501dd2ec"> </div>
</div>
<div class="comment">
<div class="user">
<a rel="noreferrer nofollow" target="_blank" href="https://github.com/leekahung"><img src="https://avatars.githubusercontent.com/u/14917816?v=4" />leekahung</a>
commented
<strong> 7 months ago</strong> </div>
<div class="markdown-body">
<blockquote>
<p>They are currently two separate pages.</p>
</blockquote>
<p>That's right. Currently how the site is set up so that "Contacts" is in a separate page with the contacts list and "Civic Profile" will be on their own page with profile information. The two pages can be accessible via the navbar which consist of MUI tabs linking the pages to their respective routes (<code>/contacts</code> and <code>/civic-profile</code> as Scott pointed out in the image of <code>src/AppRoutes.jsx</code>).</p>
<p>So if we were to improve the site with <code>h1</code> elements for accessibility, think we'll needed them each of the pages, one for "Contacts" and one for "Civic Profile". As for what elements to utilize, I think the recently implemented breadcrumbs would be a good choice since the trailing crumb would typically display the name of the route they've entered.</p>
<img width="1440" alt="Screen Shot 2023-11-21 at 12 49 30" src="https://github.com/codeforpdx/PASS/assets/14917816/c2285fdf-b934-4141-bd29-dcd23097bed7">
<img width="1440" alt="Screen Shot 2023-11-21 at 12 49 45" src="https://github.com/codeforpdx/PASS/assets/14917816/e3a3d02a-61b3-42e1-a322-4a57d4825afa">
<p>The only part which this might not work would be under contacts since the breadcrumb there utilizes the contact's full webId as the crumb. We'll probably need an alternative for that edge case.</p>
<img width="1440" alt="Screen Shot 2023-11-21 at 12 51 51" src="https://github.com/codeforpdx/PASS/assets/14917816/a9a7e38e-68a7-4861-b0ae-5208a2e84ccc"> </div>
</div>
<div class="page-bar-simple">
</div>
<div class="footer">
<ul class="body">
<li>© <script>
document.write(new Date().getFullYear())
</script> Githubissues.</li>
<li>Githubissues is a development platform for aggregating issues.</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="/githubissues/assets/js.js"></script>
<script src="/githubissues/assets/markdown.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script>
<script>
hljs.highlightAll();
</script>
</body>
</html>
h1that "describes the content of the page (similar to the document's