FritzAndFriends / ResourceManagement

A resource management application originally designed for Sebastian Riding Associates.
MIT License
35 stars 28 forks source link

Refactor: Restyle Availability Page & Accessibility Improvements #71

Closed mdarrik closed 5 years ago

mdarrik commented 5 years ago

This pull request has 2 goals.

Fixing the availability grid layout.

On Friday (8/9/2019) there were some issues with the grid implementation not looking the way you wanted and not working on mobile.

Accessibility Improvements

  1. Added missing form labels and fixed the "for" attributes on some existing labels
  2. Added a <main> tag to the layout.
  3. Replaced the headings with the appropriate ones on the availability screen. Each subsequent heading layer specifies a smaller sub-section within the document. And so there needs to be an appropriate order to the headings. (Every page has an h1, h2 for top-level sections of the page. For font-styling, bootstrap has corresponding classes, which I used here.
  4. Mapped the availability tabs after (this example from W3.org)[https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html] The interaction pieces written in JavaScript (cue horse sound) still need to be handled in Blazor. Someone should open an issue after these changes are merged and this could make a good issue for someone wanting to dive into Blazor + common A11y practices. It should be fairly doable, but I didn't quite have time to dive into it. If someone wants to chat through the changes, they can tag me in the issue and I can try and walk them through it.

3. Some Other Stuff To Note

  1. I used the dash case (there's a specific name that is escaping me) for id's and class names (e.g. some-class-name), this is mainly b/c html & css are case-insensitive. You may want to switch this to your PascalCase style if you prefer for consistency. I was kind of short on time and just going off of my default convention.
    1. Some of the css changes may be due to StyleLint in VS Code. I didn't really think about what plugins I had running, and it's possible when I did auto-formatting it tweaked the layout of some stuff.

Thank you! I should get notified on my phone if you have any questions/comments.

csharpfritz commented 5 years ago

Thank you for the suggestions and code!