revite

revite copied to clipboard

This introduces the use of semantic HTML tags throughout the frontend, as well as the use of various ARIA attributes to improve accessibility (see https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML).

Semantic section-related HTML tags are used (main, nav, article, etc), as well as more component based-tags (button).

Generic div tags were previously used in many parts throughout the codebase, hindering the use of accessibility tools such as screen readers[^1], and preventing keyboard navigation (tab focus) on clickable elements as they were not semantically focusable elements (buttons and links).

ARIA attributes are used in elements for which their semantics/purpose cannot be easily represented specifically enough simply through choice of HTML tags.

In a couple of the settings pages, some of the links were also defined using onClick attributes with a switchPage function. While some of these were anchor tags, they were still not focusable due to not having href attributes, so the browser sees it as having no location. Using react-router-dom's <Link> element resolves this.

In addition to improving accessibility, as a side-effect, these changes also enable an alternative solution to #149, as we can now make relatively specific selectors using these semantic tags and attributes. As a demonstration of this, I have rewritten a large portion of the Discord theme that was previous broken due to non-persistent class names, using this method.

Note that there are still some parts of the frontend that have not yet been changed to use semantic tags, hence the draft status of this PR.

[^1]: Disclaimer: I have never personally used a screen reader or other assistive technologies and so my understanding of them may not be accurate

Looks awesome so far! Didn't know you can do stuff like https://github.com/revoltchat/revite/pull/415/files#diff-86a2bd14a6079d4e70278e3ff08515ed0b7666dadaaf584a5a95456cb2f93628R59, this could definitely go a long way towards #149.

This may be an uphill battle as components are changed so it may be worth doing this across several PRs.

This may be an uphill battle as components are changed so it may be worth doing this across several PRs.

Fair enough, this has been open for far longer than I intended, I'm happy to have this merged right now if it all looks good to you (and the others).

Conflicting again :sob:

New client is using semantic HTML where possible

Closing due to rewrite, marking as potential issue in future by linking to https://github.com/revoltchat/frontend/issues/64.