Skip to content

Unified style and accessibility upgrades for login, registration, and profile pages#4491

Merged
ajrbyers merged 16 commits into
masterfrom
b-4380-account-pages
Dec 2, 2024
Merged

Unified style and accessibility upgrades for login, registration, and profile pages#4491
ajrbyers merged 16 commits into
masterfrom
b-4380-account-pages

Conversation

@joemull

@joemull joemull commented Nov 15, 2024

Copy link
Copy Markdown
Member

Closes #4380.

Implementation notes

  • Brought all pages where a user manages their own account into the back office, and deprecated the theme templates
  • Adjusted the admin base as needed to handle unauthenticated users
  • Implemented a contextual title element so that the relevant site name is appropriately provided in addition to the page title
  • Wrote view tests to make sure new templates are hit
  • Used "secondary" style buttons for accessibility (color contrast)
  • Adjusted link colors for accessibility (color contrast)
  • Improved form accessibility in a few places
  • Made heading structure consistent, though I would have preferred not to use h2 for these elements (h1 is taken by the header and used for the site title, which is not ideal in my opinion)

Limitations

  • We have got to sort out the heading structure in core/base.html -- it results in two h1s in most cases, and one of them is often empty. My preference is that h1 is used for the actual page, not the site name, and that the site name is simply appended to the title element, so it is available in the browser tab.
  • The interests field is a consistent accessibility trap, until we can get away from jquery / tagit. We may be able to re-implement this bit of the page as a Django formset

Screenshot_20241115_164725
Screenshot_20241115_164748
Screenshot_20241115_164758
Screenshot_20241115_164806
Screenshot_20241115_164832
Screenshot_20241115_164857
Screenshot_20241115_164957
Screenshot_20241115_165013
Screenshot_20241115_165050
Screenshot_20241115_165123
Screenshot_20241115_165141
Screenshot_20241115_165210
Screenshot_20241115_165224
Screenshot_20241115_165430
Screenshot_20241115_165509
Screenshot_20241115_165826

@joemull joemull requested review from StephDriver and removed request for ajrbyers November 18, 2024 09:59
@joemull joemull assigned StephDriver and unassigned ajrbyers Nov 18, 2024

@StephDriver StephDriver left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Joe, I think something's been missed, this is how I manually tested it:

  • log in (works so far, and was taken to new back office log in page)
  • select 'Profile' from drop down menu on top right
  • was taken to a front of house template, which was themed (testing with ?theme=clean allowed me to change the theme).

either I've misunderstood the scope of this issue, or something's gone wrong. I was expecting the profile page to be back office.

@joemull joemull requested a review from ajrbyers November 19, 2024 10:09
@joemull joemull assigned ajrbyers and unassigned StephDriver Nov 19, 2024
@joemull

joemull commented Nov 19, 2024

Copy link
Copy Markdown
Member Author

either I've misunderstood the scope of this issue, or something's gone wrong. I was expecting the profile page to be back office.

OK, thanks for testing it. Not sure why you're not seeing the right templates, but I'll go ahead and assign to Andy in case there is something different about the way you're testing it.

@ajrbyers ajrbyers left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for this, its good to reduce the number of overall templates.

I've added some comments inline. Some more general comments:

  • If you enter your username and password incorrectly when the page reloads the form is larger, this feels very strange and should be a consistent experience for the user.
  • Can you review all of the comments throughout this PR and ensure they're appropriate. See for example settings.css I don't think the comment here is useful.
  • The forms feel a bit lost in the middle of the screen, especially on wider screens.
  • These forms introduce a layout system of their own, is there a reason we're not utilising the established layout for the back office here?

Comment thread src/templates/admin/core/accounts/edit_profile.html Outdated
Comment thread src/static/admin/css/admin.css
Comment thread src/templates/admin/elements/forms/accessible_messages.html
@joemull joemull assigned joemull and unassigned ajrbyers Nov 21, 2024
@joemull

joemull commented Nov 21, 2024

Copy link
Copy Markdown
Member Author

If you enter your username and password incorrectly when the page reloads the form is larger, this feels very strange and should be a consistent experience for the user.

The forms feel a bit lost in the middle of the screen, especially on wider screens.

Thanks for these comments and the chat we had, which helped clarify a few things for me. I've opted to left-align everything to be more consistent with other back-office pages, and I've returned to using the title-section element. This puts the semantic name of each of these pages in an h1, which is good (was h2 in the first version), but it means we need to resolve the h1 in the header before this will be accessible, as discussed.

These forms introduce a layout system of their own, is there a reason we're not utilising the established layout for the back office here?

I've tried to use what I can, but there are some float-based components that were not feasible to re-use. I've opted to marginally expand the utilities so that we can develop a framework-agnostic set of layout tools with modern patterns like grid and flex, while we shift frameworks. Let's discuss this more because I have a few things coming down the pike, and I'd like to expand the utilities in the back office more formally.

@joemull joemull requested a review from ajrbyers November 21, 2024 12:20
@joemull joemull removed their assignment Nov 21, 2024

@StephDriver StephDriver left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • ✅ log in takes me to the new back office page.
  • ✅ failed / rejected log in remains in back office.
  • ✅ clicking 'forgotten your password' on new back office log in page takes me to back office
  • ❌ clicking 'register' on new back office log in page takes me to front of house
  • ❌ register from navigation bar takes me to front of house
  • ❌ once logged in, the profile link in account menu from nav bar takes me to front of house

nb. log in looks quite different to me than in the screenshots above:
image

as per screen share discussion, this could be a domain v path issue.

@StephDriver StephDriver assigned joemull and unassigned StephDriver Nov 21, 2024
@joemull

joemull commented Nov 21, 2024

Copy link
Copy Markdown
Member Author

I still can't replicate this issue @StephDriver. Are we sure your browser isn't caching the old pages?

@mauromsl or @ajrbyers, could you tell me what about Steph's dev setup might cause this issue? I can't think of a scenario in which this view

template = 'admin/core/accounts/register.html'

would return a template under /OLH/ or /clean/ or something else, even if there were a domain / path difference. It should return a 404 if it really can't find the path, not fall back to a path explicitly excluded by the admin bit, right?

@ajrbyers

Copy link
Copy Markdown
Member

@StephDriver let’s find some time to dig around this next week.

@StephDriver

StephDriver commented Nov 25, 2024

Copy link
Copy Markdown
Member

I still can't replicate this issue @StephDriver. Are we sure your browser isn't caching the old pages?

I don't think so... mostly because I tried it with multiple different browsers and had same results, and there were two pages which loaded the new versions. But I agree it needs further digging... so watch this space.

@StephDriver

StephDriver commented Dec 2, 2024

Copy link
Copy Markdown
Member

Trying this again:
✅ log in takes me to the new back office page.
✅ failed / rejected log in remains in back office.
✅ clicking 'forgotten your password' on new back office log in page takes me to back office
✅ clicking 'register' on new back office log in page takes me to the back office page
✅ register from navigation bar takes me to the back office page
✅ once logged in, the profile link in account menu from nav bar takes me to the back office page.

@joemull joemull assigned StephDriver and unassigned joemull Dec 2, 2024
@StephDriver StephDriver self-requested a review December 2, 2024 10:05

@StephDriver StephDriver left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

see comment, all tests fine now.

@StephDriver StephDriver removed their assignment Dec 2, 2024

@ajrbyers ajrbyers left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is very impressive work @joemull, I really like this. I have spotted one issue though, check out the comments.

Comment thread src/templates/admin/core/accounts/edit_profile.html Outdated
@joemull joemull requested a review from ajrbyers December 2, 2024 13:07
@ajrbyers ajrbyers merged commit f47441b into master Dec 2, 2024
@ajrbyers ajrbyers deleted the b-4380-account-pages branch December 2, 2024 13:08
mauromsl added a commit that referenced this pull request Oct 22, 2025
mauromsl added a commit that referenced this pull request Oct 22, 2025
joemull pushed a commit that referenced this pull request Oct 22, 2025
joemull pushed a commit that referenced this pull request Oct 22, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bring authentication and account pages into back office

3 participants