New Issue

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

Open

opened by Moiety · 3 comments

Moiety commented

Collaborator

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 - [ ] Edit Init Forms (restore backup, password recovery) - [x] Edit Index - [ ] Edit Page Listing - [ ] Edit Page - [ ] Edit Settings - [ ] Edit Navigation

Moiety added the

Bugs

label

Moiety added the

Accessibility

label

are0h commented

Owner

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 added this to the Fipamo Beta project

are0h added this to the Fipamo Beta 2.7 milestone

are0h self-assigned this

are0h modified the milestone from Fipamo Beta 2.7 to Fipamo Beta 2.6.2

are0h commented

Owner

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

Poster

Collaborator

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

🎉 1