All pages use `role`-attributes with invalid values #99

New issue

Closed

opened 2023-07-11 16:41:05 +02:00 by Moiety · 4 comments

Moiety commented

2023-07-11 16:41:05 +02:00

(Migrated from koodu.ubiqueros.com)

Pages: all pages tested (including: login, dashboard, create/edit page)

The role-attribute is used to set specific accessibility semantics; there’s only a limited set of valid values that apply to specific components. By the looks of it Fipamo uses the role-attribute purely for styling. Can you elaborate on why you chose this attribute?

One way to resolve this is to replace the role-attributes with classes.

As an example, from _frame.twig:

<nav role="top-nav">
	<div role="nav-left">
		…
	</div>
	<div role="title">
		…
	</div>
	<div role="nav-right">
		…
	</div>
</nav>
<div role="notify">
	…
</div>

None of the values provided here are valid; this causes accessibility issues.

Ro Edit
The following pages need to be updated to remove the invalid role attributes and make the appropriate adjustments to the scripting to longer reference these attributes.

Edit Login
Edit Init Forms (restore backup, password recovery)
Edit Index
Edit Page Listing
Edit Page
Edit Settings
Edit Navigation

Pages: all pages tested (including: login, dashboard, create/edit page) The `role`-attribute is used to set specific accessibility semantics; there’s only a limited set of [valid values](https://www.w3.org/TR/wai-aria-1.1/#roles_categorization) that apply to specific components. By the looks of it Fipamo uses the `role`-attribute purely for styling. Can you elaborate on why you chose this attribute? One way to resolve this is to replace the `role`-attributes with classes. As an example, from [_frame.twig](https://koodu.ubiqueros.com/are0h/Fipamo/src/commit/2f0b83b492300ebd9f98ddcc031298b64af1ff0a/brain/views/dash/_frame.twig#L18): ``` <nav role="top-nav"> <div role="nav-left"> … </div> <div role="title"> … </div> <div role="nav-right"> … </div> </nav> <div role="notify"> … </div> ``` None of the values provided here are valid; this causes accessibility issues. ____ *Ro Edit* The following pages need to be updated to remove the invalid role attributes and make the appropriate adjustments to the scripting to longer reference these attributes. - [x] Edit Login - [x] Edit Init Forms (restore backup, password recovery) - [x] Edit Index - [x] Edit Page Listing - [x] Edit Page - [x] Edit Settings - [x] Edit Navigation

are0h commented

2023-07-11 23:41:03 +02:00

(Migrated from koodu.ubiqueros.com)

The intention was to use role as a CSS anchor and describe what the block was being used for, so I got a bit carried away with it.

The HTML already relies on semantic HTML, so I can edit these files to remove most of the role tags and change the ones I do keep with valid values.

The intention was to use role as a CSS anchor and describe what the block was being used for, so I got a bit carried away with it. The HTML already relies on semantic HTML, so I can edit these files to remove most of the role tags and change the ones I do keep with valid values.

are0h commented

2023-07-27 22:59:57 +02:00

(Migrated from koodu.ubiqueros.com)

I'm going to start with this one because it's the most complex.

I have to edit every page style along with the JS that is referencing the role attribute specifically.

This will touch just about every system on the site, so I'm going to be methodical about getting this cleaned up so I don't send the codebase into a tailspin.

I'm going to start with this one because it's the most complex. I have to edit every page style along with the JS that is referencing the `role` attribute specifically. This will touch just about every system on the site, so I'm going to be methodical about getting this cleaned up so I don't send the codebase into a tailspin.

Moiety commented

2023-07-28 08:24:32 +02:00

(Migrated from koodu.ubiqueros.com)

Let me know if you want some help with this. We could do some pair programming if you want.