Generic errors are not friendly to screen readers as they are.

Task

• Update FormField to include name of field in required error message
• Give a count of errors present on screen when errors occur.

While I use collapse class, no show button not fields show up. Please see image for clearance

Django==3.2.8
python==3.10.0

settings.py

INSTALLED_APPS = [
    'admin_interface',
    'colorfield',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'CheckAdmin',
]

models.py

class Check(models.Model):
    name = models.CharField(max_length=255)
    name1 = models.CharField(max_length=255)
    name2 = models.CharField(max_length=255)

admin.py

@admin.register(Check)
class CheckAdmin(admin.ModelAdmin):
    fieldsets = (
        (None, {
            'fields': ['name']
        }),
        ('Optionals', {
            'classes': ['collapse'],
            'fields': ['name1', 'name2']
        })
    )

Actually I found this problem when using django-admin-508 in another project. To be sure that the issue is being caused by django-admin-508 I created new project and found it is being caused by django-admin-508.

Note: Around six month ago when I was trying to use bootstrap4 in admin panel I faced same issue. So, I guess it is CSS related issue

The app is not testable on its own, its more of a library/theme package. To test it, it needs another app that uses it as a dependency to test it from.

This package is forked from admin_interface, but the internal naming is not changed. So while installing the package is done using pip install django-admin-508 the app name in the settings as well as all references and directory names are still admin_interface.

We need a basic CI pipeline to test changes and potentially deploy a test instance with this package installed

raft-tech/TANF-app#1664 (review)

To quote the relavent part of this review for this issue:

• Error counter (shown in video) is working to provide context into the number of errors on a page—however in both Chrome and Safari on MacOS the alert attached to it seems to be getting overridden by other page events about half the time. If we can, I suggest trying to set focus to the error counter on reload so that if it doesn't get read as an alert it still gets read as text. This also matches frontend TDP behavior on form errors.
• AC 1 isn't implemented at the moment, so generic "Field is required" vs "[Specific Field name] is required" errors are still present. All form fields do a good job of only allowing valid content to be entered, and they do pass "Required" and "Invalid" states to VoiceOver so from a pure compliance standpoint we might be able to do without the specific error copy, however a follow on discussion of whether there's an efficient way to get this done would be great.

Tasks

• figure out why required field validation works in dummy app and not in TDRS/dependent applications
• Try setting focus to error counter

Acceptance Criteria

• Screen Reader consistantly reads error
• Name of field being present in required field validation error works in tdrs

• Automated voiceover tests

https://dev.to/craigmorten/a11y-testing-automating-screenreaders-1a3n

https://github.com/guidepup/circleci-voiceover-example

• Use pa11y
  • need test instance?

This work depends on #7

Need to tweak the default font overrides in this module:

body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}