Improve accessibility by using semantic elements

danielchalmers · May 19, 2024 · 8b24305 · 8b24305
1 parent 489649d
commit 8b24305
Show file tree

Hide file tree

Showing 14 changed files with 78 additions and 80 deletions.
diff --git a/JournalApp/Components/EditCategoryDialog.razor b/JournalApp/Components/EditCategoryDialog.razor
@@ -5,7 +5,7 @@
 
 <MudDialog DefaultFocus="DefaultFocus.FirstChild" OnBackdropClick="Submit">
     <TitleContent>
-        <div class="page-header">
+        <div class="page-toolbar">
             <MudIconButton Icon="@Icons.Material.Filled.Close" Title="Cancel" OnClick="Cancel" />
 
             <MudText Typo="Typo.h6">@(Category == null ? "New" : "Edit") @(Group == "Medications" ? "medication" : "category")</MudText>

diff --git a/JournalApp/Components/EditDoseDialog.razor b/JournalApp/Components/EditDoseDialog.razor
@@ -5,7 +5,7 @@
 
 <MudDialog DefaultFocus="DefaultFocus.FirstChild" OnBackdropClick="Submit">
     <TitleContent>
-        <div class="page-header">
+        <div class="page-toolbar">
             <MudIconButton Class="cancel-button" Icon="@Icons.Material.Filled.Close" Title="Cancel" OnClick="Cancel" />
 
             <MudText Typo="Typo.h6">Edit day's dose</MudText>

diff --git a/JournalApp/Components/EditNoteDialog.razor b/JournalApp/Components/EditNoteDialog.razor
@@ -5,7 +5,7 @@
 
 <MudDialog DefaultFocus="DefaultFocus.FirstChild" OnBackdropClick="Submit">
     <TitleContent>
-        <div class="page-header">
+        <div class="page-toolbar">
             <MudIconButton Class="cancel-button" Icon="@Icons.Material.Filled.Close" Title="Cancel" OnClick="Cancel" />
 
             <MudText Typo="Typo.h6">@Title</MudText>

diff --git a/JournalApp/Pages/Calendar/CalendarPage.razor b/JournalApp/Pages/Calendar/CalendarPage.razor
@@ -7,8 +7,8 @@
 @inject ILogger<CalendarPage> logger
 @inject CalendarService CalendarService
 
-<div class="page-title">
-    <div class="page-header">
+<header class="page-header">
+    <div class="page-toolbar">
         <MudIconButton Class="close-button" Icon="@Icons.Material.Filled.ArrowBack" Title="Back" OnClick="Close" />
 
         <MudText Typo="Typo.h6">Calendar</MudText>
@@ -19,9 +19,9 @@
     </div>
 
     <CalendarSwitcher @ref="_switcher" @bind-SelectedYear="SelectedYear" @bind-SelectedYear:after="AfterSelectedYearChanged" YearClicked="OnYearClicked" />
-</div>
+</header>
 
-<div class="page-body">
+<main class="page-body">
     @if (_gridYear != null)
     {
         <div style="padding-bottom: 40vh;">
@@ -30,7 +30,7 @@
                           PreviousMonthClicked="PreviousMonth" NextMonthClicked="NextMonth" />
         </div>
     }
-</div>
+</main>
 
 @code {
     GridYear? _gridYear = null;

diff --git a/JournalApp/Pages/Calendar/CalendarView.razor b/JournalApp/Pages/Calendar/CalendarView.razor
@@ -5,12 +5,12 @@
 <div class="calendar-view">
     @foreach (var month in GridYear.GridMonths)
     {
-        <div class="calendar-month" id="calendar-month-@(month.Month)">
-            <div class="calendar-month-header">
+        <section class="calendar-month" id="calendar-month-@(month.Month)">
+            <header class="calendar-month-header">
                 <MudIconButton Icon="@Icons.Material.Filled.ArrowLeft" OnClick="async () => await PreviousMonthClicked.InvokeAsync(month.Month)" title="Previous month" />
                 <MudText Typo="Typo.h4">@(month.Name)</MudText>
                 <MudIconButton Icon="@Icons.Material.Filled.ArrowRight" OnClick="async () => await NextMonthClicked.InvokeAsync(month.Month)" title="Next month" Disabled="@(month.Month == 12 && month.Year == DateTime.Now.Year)" />
-            </div>
+            </header>
 
             <div class="mood-blocks-month">
                 <div class="mood-blocks-week">
@@ -41,7 +41,7 @@
                     </div>
                 }
             </div>
-        </div>
+        </section>
     }
 </div>
 

diff --git a/JournalApp/Pages/Index.razor b/JournalApp/Pages/Index.razor
@@ -9,8 +9,8 @@
 @inject IShare Share
 @inject IBrowser Browser
 
-<div class="page-title">
-    <div class="page-header">
+<header class="page-header">
+    <div class="page-toolbar">
         <MudButton OnClick="OnTitleClicked" Ripple="false" Variant="Variant.Text">
             <MudText Typo="Typo.h6">🙂 @ThisAssembly.AssemblyTitle</MudText>
         </MudButton>
@@ -48,9 +48,9 @@
 
         <MudIconButton Icon="@Icons.Material.Filled.ArrowForwardIos" Title="Next day" OnClick="NextDay" Disabled="@(_day.Date > DateOnly.FromDateTime(DateTime.Now))" />
     </div>
-</div>
+</header>
 
-<div class="page-body">
+<main class="page-body">
     <div class="main-timeline">
         @foreach (var group in db.Categories.Where(x => x.Enabled && !x.Deleted).GroupBy(x => x.Group))
         {
@@ -74,12 +74,12 @@
                     </MudText>
                 }
 
-                <div class="data-point-list">
+                <ul class="data-point-list">
                     @foreach (var category in group.OrderBy(x => x.Index).ThenBy(x => x.Name))
                     {
                         @foreach (var point in _day.Points.Where(x => !x.Deleted && x.Category.Guid == category.Guid && x.Type == category.Type).OrderBy(x => x.CreatedAt))
                         {
-                            <div class="data-point-container">
+                            <li class="data-point-container">
                                 @if (!string.IsNullOrEmpty(category.Name))
                                 {
                                     <div class="data-point-header">
@@ -95,12 +95,12 @@
                                 <div class="data-point-view">
                                     <DataPointView Point="point" StateChanged="_ => StateHasChanged()" />
                                 </div>
-                            </div>
+                            </li>
                         }
                     }
-                </div>
+                </ul>
 
-                <div class="data-point-group-footer">
+                <footer class="data-point-group-footer">
                     @if (group.Key == null)
                     {
                         <MudButton Variant="Variant.Text" StartIcon="@Icons.Material.Filled.Category" OnClick="ManageCategories" FullWidth>Choose categories</MudButton>
@@ -113,11 +113,11 @@
                     {
                         <MudButton Variant="Variant.Text" StartIcon="@Icons.Material.Filled.Comment" OnClick="NewNote" FullWidth>New note</MudButton>
                     }
-                </div>
+                </footer>
             </div>
         }
     </div>
-</div>
+</main>
 
 @code {
     AppDbContext db;

diff --git a/JournalApp/Pages/ManageCategoriesPage.razor b/JournalApp/Pages/ManageCategoriesPage.razor
@@ -5,8 +5,8 @@
 @inject ILogger<ManageCategoriesPage> logger
 @inject IDbContextFactory<AppDbContext> DbFactory
 
-<div class="page-title">
-    <div class="page-header">
+<header class="page-header">
+    <div class="page-toolbar">
         <MudIconButton Icon="@Icons.Material.Filled.ArrowBack" Title="Submit" OnClick="Submit" />
 
         <MudText Typo="Typo.h6">@(Group == null ? "Categories" : Group)</MudText>
@@ -15,9 +15,9 @@
 
         <MudIconButton Icon="@Icons.Material.Filled.Add" Title="New" OnClick="New" />
     </div>
-</div>
+</header>
 
-<div class="page-body">
+<main class="page-body">
     @if (!Categories.Any())
     {
         <MudText Align="Align.Center">Click the '+' icon to add a new one.</MudText>
@@ -39,7 +39,7 @@
             </div>
         }
     }
-</div>
+</main>
 
 @code {
     AppDbContext db;

diff --git a/JournalApp/Pages/SafetyPlanning/SafetyPlanItem.razor b/JournalApp/Pages/SafetyPlanning/SafetyPlanItem.razor
@@ -1,12 +1,12 @@
 @namespace JournalApp
 
-<div class="@($"safety-plan-item safety-plan-item-{MarkupUtil.ToClassName(Title)}")">
+<section class="@($"safety-plan-item safety-plan-item-{MarkupUtil.ToClassName(Title)}")">
     <MudText Typo="Typo.h5">@Title</MudText>
     <MudText Typo="Typo.caption">@Subtitle</MudText>
     <MudTextField T="string" @bind-Text="Text" Placeholder="@Placeholder"
                   Typo="Typo.body2" Variant="Variant.Outlined" Immediate Underline="false"
                   AutoGrow Lines="3" MaxLines="10" />
-</div>
+</section>
 
 @code {
     string _text;

diff --git a/JournalApp/Pages/SafetyPlanning/SafetyPlanPage.razor b/JournalApp/Pages/SafetyPlanning/SafetyPlanPage.razor
@@ -5,15 +5,15 @@
 @implements IDisposable
 @inject ILogger<SafetyPlanPage> logger
 
-<div class="page-title">
-    <div class="page-header">
+<header class="page-header">
+    <div class="page-toolbar">
         <MudIconButton Icon="@Icons.Material.Filled.ArrowBack" Title="Submit" OnClick="Submit" />
 
         <MudText Typo="Typo.h6">Safety Plan</MudText>
     </div>
-</div>
+</header>
 
-<div class="page-body">
+<main class="page-body">
     <div class="safety-plan-items-container">
         <MudText Align="MudBlazor.Align.Center">
             Your coping strategies and sources of support that can be used before or during a crisis to help yourself stay safe.
@@ -56,7 +56,7 @@
                         Placeholder="family, friends, pets, health, faith"
                         @bind-Text="Plan.Purpose" />
     </div>
-</div>
+</main>
 
 @code {
     bool _leaving;

diff --git a/JournalApp/Pages/SettingsPage.razor b/JournalApp/Pages/SettingsPage.razor
@@ -15,17 +15,17 @@
 }
 else
 {
-    <div class="page-title">
-        <div class="page-header">
+    <header class="page-header">
+        <div class="page-toolbar">
             <MudIconButton Icon="@Icons.Material.Filled.ArrowBack" Title="Back" OnClick="Close" />
 
             <MudText Typo="Typo.h6">Settings</MudText>
         </div>
-    </div>
+    </header>
 
-    <div class="page-body">
+    <main class="page-body">
         <div class="settings-group-list">
-            <div class="settings-group">
+            <section class="settings-group">
                 <MudText Typo="Typo.h4">Personalization</MudText>
 
                 <MudRadioGroup T="AppTheme" Value="PreferenceService.SelectedAppTheme" ValueChanged="v => PreferenceService.SelectedAppTheme = v">
@@ -37,17 +37,17 @@ else
                 <MudCheckBox @bind-Value="PreferenceService.HideNotes">Hide "Today's notes"</MudCheckBox>
 
                 <MudButton StartIcon="@Icons.Material.Filled.HealthAndSafety" OnClick="SetUpSafetyPlan" Variant="Variant.Outlined" FullWidth>Set Up Safety Plan</MudButton>
-            </div>
+            </section>
 
-            <div class="settings-group">
+            <section class="settings-group">
                 <MudText Typo="Typo.h4">Data & backups</MudText>
 
                 <MudButton StartIcon="@Icons.Material.Filled.Upload" OnClick="StartExport" Variant="Variant.Outlined" FullWidth>Export</MudButton>
 
                 <MudButton StartIcon="@Icons.Material.Filled.Download" OnClick="PickAndStartImport" Variant="Variant.Outlined" FullWidth>Import</MudButton>
-            </div>
+            </section>
 
-            <div class="settings-group">
+            <section class="settings-group">
                 <MudText Typo="Typo.h4">About</MudText>
 
                 <MudCopyText Text="@($"JournalApp {ThisAssembly.AssemblyInformationalVersion}")" />
@@ -57,18 +57,18 @@ else
                 <MudLink Href="https://github.com/danielchalmers/JournalApp/issues">Send feedback on GitHub</MudLink>
                 <MudLink Href="https://play.google.com/store/apps/details?id=com.danielchalmers.journalapp">View on Play Store</MudLink>
                 <MudLink Href="https://github.com/danielchalmers/JournalApp">View source code</MudLink>
-            </div>
+            </section>
 
-            <div class="settings-group">
+            <section class="settings-group">
                 <MudText Typo="Typo.h4">Credits</MudText>
 
                 <MudTextField T="string" Text="@CreditsText" Typo="Typo.body2" ReadOnly Underline="false"
                               AutoGrow MaxLines="_creditsExpanded ? 0 : 5" FullWidth />
 
                 <MudLink OnClick="() => _creditsExpanded = true">Expand credits</MudLink>
-            </div>
+            </section>
         </div>
-    </div>
+    </main>
 }
 
 @code {

diff --git a/JournalApp/Pages/Trends/TrendsPage.razor b/JournalApp/Pages/Trends/TrendsPage.razor
@@ -6,17 +6,17 @@
 @inject ILogger<TrendsPage> logger
 @inject IDbContextFactory<AppDbContext> DbFactory
 
-<div class="page-title">
-    <div class="page-header">
+<header class="page-header">
+    <div class="page-toolbar">
         <MudIconButton Icon="@Icons.Material.Filled.ArrowBack" Title="Back" OnClick="Close" />
 
         <MudText Typo="Typo.h6">Trends</MudText>
     </div>
 
     <TrendsSwitcher @bind-SelectedDates="SelectedDates" @bind-SelectedDates:after="LoadDates" OpenToDate="OpenToDate" />
-</div>
+</header>
 
-<div class="page-body">
+<main class="page-body">
     <div id="trends-category-list">
         @foreach (var (category, points) in AllPoints.OrderBy(x => x.Key.Group).ThenBy(x => x.Key.Index))
         {
@@ -25,7 +25,7 @@
                 continue;
             }
 
-            <div class="trends-category">
+            <section class="trends-category">
                 <MudText Typo="Typo.h6">@(TrendCategoryView.GetHeaderText(category))</MudText>
 
                 <ErrorBoundary>
@@ -37,10 +37,10 @@
                         <MudText Color="Color.Error">💥 Failed to load.</MudText>
                     </ErrorContent>
                 </ErrorBoundary>
-            </div>
+            </section>
         }
     </div>
-</div>
+</main>
 
 @code {
     bool _leaving;

diff --git a/JournalApp/Pages/Worksheets/WorksheetView.razor b/JournalApp/Pages/Worksheets/WorksheetView.razor
@@ -1,7 +1,7 @@
 @namespace JournalApp
 @inject ILogger<WorksheetView> logger
 
-<div class="worksheet-view">
+<li class="worksheet-view">
     <MudButton OnClick="OnResourceClicked" StartIcon="@Icons.Material.Filled.Link" Color="Color.Primary" Disabled="@IsLinkDisabled" title="View worksheet">
         <MudText Typo="Typo.h5">@Worksheet.Title</MudText>
     </MudButton>
@@ -15,7 +15,7 @@
     {
         <MudLink Href="@Worksheet.SourceUri" Typo="Typo.caption" Color="Color.Default" Style="word-wrap: anywhere" title="Go to source">@PrettySourceUri</MudLink>
     }
-</div>
+</li>
 
 @code {
     [Parameter]