MarkUsProject · david-yz-liu · Jul 17, 2025 · Jul 14, 2025 · Jul 15, 2025 · Jul 15, 2025
diff --git a/Changelog.md b/Changelog.md
@@ -12,6 +12,7 @@
 - Maintain font size in grading view (#7525)
 - Replaced assignment summary statistics in the "Status" column on the instructor Assignments page with a link to the grades page. (#7560)
 - Renamed the "Summary" sub-tab label to "Grades" in the Assignment interface. (#7560)
+- Replaced "Edit" and "Delete" action text links with Font Awesome icons across all tables. (#7595)
 
 ### 🐛 Bug fixes
 - Added host authorization setting for Resque (#7562)

diff --git a/app/javascript/Components/__tests__/student_table.test.jsx b/app/javascript/Components/__tests__/student_table.test.jsx
@@ -302,7 +302,7 @@ describe("For the StudentTable's display of students", () => {
 
       await screen.findByText("testtest");
 
-      fireEvent.click(screen.getByText(I18n.t("remove")));
+      fireEvent.click(screen.getByLabelText(I18n.t("remove")));
 
       await waitFor(() => {
         expect(fetch).toHaveBeenCalledWith(

diff --git a/app/javascript/Components/__tests__/ta_table.test.jsx b/app/javascript/Components/__tests__/ta_table.test.jsx
@@ -136,7 +136,7 @@ describe("For the TATable's display of TAs", () => {
 
       await screen.findByText("testtest");
 
-      fireEvent.click(screen.getByText(I18n.t("remove")));
+      fireEvent.click(screen.getByLabelText(I18n.t("remove")));
 
       await waitFor(() => {
         expect(fetch).toHaveBeenCalledWith(

diff --git a/app/javascript/Components/admin_course_list.jsx b/app/javascript/Components/admin_course_list.jsx
@@ -2,6 +2,8 @@ import React from "react";
 import {createRoot} from "react-dom/client";
 import ReactTable from "react-table";
 import {selectFilter} from "./Helpers/table_helpers";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faPencil} from "@fortawesome/free-solid-svg-icons";
 
 class AdminCourseList extends React.Component {
   constructor() {
@@ -76,7 +78,13 @@ class AdminCourseList extends React.Component {
       Cell: ({value}) => {
         return (
           <span>
-            <a href={Routes.edit_admin_course_path(value)}>{I18n.t("edit")}</a>
+            <a
+              href={Routes.edit_admin_course_path(value)}
+              aria-label={I18n.t("edit")}
+              title={I18n.t("edit")}
+            >
+              <FontAwesomeIcon icon={faPencil} />
+            </a>
             &nbsp;|&nbsp;
             <a href={Routes.course_path(value)}>{I18n.t("courses.go_to_course")}</a>
           </span>

diff --git a/app/javascript/Components/admin_users_list.jsx b/app/javascript/Components/admin_users_list.jsx
@@ -2,6 +2,8 @@ import React from "react";
 import {createRoot} from "react-dom/client";
 import ReactTable from "react-table";
 import {selectFilter} from "./Helpers/table_helpers";
+import {faPencil} from "@fortawesome/free-solid-svg-icons";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 
 class AdminUsersList extends React.Component {
   constructor() {
@@ -94,7 +96,15 @@ class AdminUsersList extends React.Component {
       Header: I18n.t("actions"),
       accessor: "id",
       minWidth: 70,
-      Cell: ({value}) => <a href={Routes.edit_admin_user_path(value)}>{I18n.t("edit")}</a>,
+      Cell: ({value}) => (
+        <a
+          href={Routes.edit_admin_user_path(value)}
+          aria-label={I18n.t("edit")}
+          title={I18n.t("edit")}
+        >
+          <FontAwesomeIcon icon={faPencil} />
+        </a>
+      ),
       sortable: false,
       filterable: false,
     },

diff --git a/app/javascript/Components/instructor_table.jsx b/app/javascript/Components/instructor_table.jsx
@@ -4,6 +4,8 @@ import PropTypes from "prop-types";
 
 import Table from "./table/table";
 import {createColumnHelper} from "@tanstack/react-table";
+import {faPencil} from "@fortawesome/free-solid-svg-icons";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 
 class InstructorTable extends React.Component {
   constructor() {
@@ -41,8 +43,12 @@ class InstructorTable extends React.Component {
         enableColumnFilter: false,
         header: () => I18n.t("actions"),
         cell: props => (
-          <a href={Routes.edit_course_instructor_path(this.props.course_id, props.getValue())}>
-            {I18n.t("edit")}
+          <a
+            href={Routes.edit_course_instructor_path(this.props.course_id, props.getValue())}
+            aria-label={I18n.t("edit")}
+            title={I18n.t("edit")}
+          >
+            <FontAwesomeIcon icon={faPencil} />
           </a>
         ),
       }),

diff --git a/app/javascript/Components/marking_schemes_table.jsx b/app/javascript/Components/marking_schemes_table.jsx
@@ -2,6 +2,8 @@ import React from "react";
 import {createRoot} from "react-dom/client";
 
 import ReactTable from "react-table";
+import {faPencil, faTrashCan} from "@fortawesome/free-solid-svg-icons";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 
 class MarkingSchemeTable extends React.Component {
   constructor() {
@@ -51,12 +53,22 @@ class MarkingSchemeTable extends React.Component {
       Header: I18n.t("actions"),
       Cell: ({original}) => (
         <span>
-          <a href={original.edit_link} data-remote="true">
-            {I18n.t("edit")}
+          <a
+            href={original.edit_link}
+            data-remote="true"
+            aria-label={I18n.t("edit")}
+            title={I18n.t("edit")}
+          >
+            <FontAwesomeIcon icon={faPencil} />
           </a>
           &nbsp;|&nbsp;
-          <a href={original.delete_link} data-method="delete">
-            {I18n.t("delete")}
+          <a
+            href={original.delete_link}
+            data-method="delete"
+            aria-label={I18n.t("delete")}
+            title={I18n.t("delete")}
+          >
+            <FontAwesomeIcon icon={faTrashCan} />
           </a>
         </span>
       ),

diff --git a/app/javascript/Components/notes_table.jsx b/app/javascript/Components/notes_table.jsx
@@ -1,6 +1,8 @@
 import React from "react";
 import {createRoot} from "react-dom/client";
 import ReactTable from "react-table";
+import {faPencil, faTrashCan} from "@fortawesome/free-solid-svg-icons";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 
 class NotesTable extends React.Component {
   constructor(props) {
@@ -40,17 +42,21 @@ class NotesTable extends React.Component {
           <a
             href={Routes.edit_course_note_path(this.props.course_id, id)}
             className="inline-button button"
+            aria-label={I18n.t("edit")}
+            title={I18n.t("edit")}
           >
-            {I18n.t("edit")}
+            <FontAwesomeIcon icon={faPencil} />
           </a>
 
           <a
             href={Routes.course_note_path(this.props.course_id, id)}
             className="inline-button button"
             data-method="delete"
             data-confirm={I18n.t("notes.delete.link_confirm")}
+            aria-label={I18n.t("delete")}
+            title={I18n.t("delete")}
           >
-            {I18n.t("delete")}
+            <FontAwesomeIcon icon={faTrashCan} />
           </a>
         </div>
       );

diff --git a/app/javascript/Components/student_table.jsx b/app/javascript/Components/student_table.jsx
@@ -4,6 +4,8 @@ import PropTypes from "prop-types";
 
 import {CheckboxTable, withSelection} from "./markus_with_selection_hoc";
 import {selectFilter} from "./Helpers/table_helpers";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faPencil, faTrashCan} from "@fortawesome/free-solid-svg-icons";
 
 class RawStudentTable extends React.Component {
   constructor() {
@@ -198,14 +200,23 @@ class RawStudentTable extends React.Component {
               Cell: data => (
                 <>
                   <span>
-                    <a href={Routes.edit_course_student_path(this.props.course_id, data.value)}>
-                      {I18n.t("edit")}
+                    <a
+                      href={Routes.edit_course_student_path(this.props.course_id, data.value)}
+                      aria-label={I18n.t("edit")}
+                      title={I18n.t("edit")}
+                    >
+                      <FontAwesomeIcon icon={faPencil} />
                     </a>
                   </span>
                   &nbsp;|&nbsp;
                   <span>
-                    <a href="#" onClick={() => this.removeStudent(data.value)}>
-                      {I18n.t("remove")}
+                    <a
+                      href="#"
+                      onClick={() => this.removeStudent(data.value)}
+                      aria-label={I18n.t("remove")}
+                      title={I18n.t("remove")}
+                    >
+                      <FontAwesomeIcon icon={faTrashCan} />
                     </a>
                   </span>
                 </>

diff --git a/app/javascript/Components/ta_table.jsx b/app/javascript/Components/ta_table.jsx
@@ -4,6 +4,8 @@ import PropTypes from "prop-types";
 
 import ReactTable from "react-table";
 import {selectFilter} from "./Helpers/table_helpers";
+import {faPencil, faTrashCan} from "@fortawesome/free-solid-svg-icons";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 
 class TATable extends React.Component {
   constructor() {
@@ -109,14 +111,23 @@ class TATable extends React.Component {
             Cell: data => (
               <>
                 <span>
-                  <a href={Routes.edit_course_ta_path(this.props.course_id, data.value)}>
-                    {I18n.t("edit")}
+                  <a
+                    href={Routes.edit_course_ta_path(this.props.course_id, data.value)}
+                    aria-label={I18n.t("edit")}
+                    title={I18n.t("edit")}
+                  >
+                    <FontAwesomeIcon icon={faPencil} />
                   </a>
                 </span>
                 &nbsp;|&nbsp;
                 <span>
-                  <a href="#" onClick={() => this.removeTA(data.value)}>
-                    {I18n.t("remove")}
+                  <a
+                    href="#"
+                    onClick={() => this.removeTA(data.value)}
+                    aria-label={I18n.t("remove")}
+                    title={I18n.t("remove")}
+                  >
+                    <FontAwesomeIcon icon={faTrashCan} />
                   </a>
                 </span>
               </>

diff --git a/app/javascript/Components/tag_table.jsx b/app/javascript/Components/tag_table.jsx
@@ -6,6 +6,8 @@ import ReactTable from "react-table";
 import CreateTagModal from "./Modals/create_tag_modal";
 import EditTagModal from "./Modals/edit_tag_modal";
 import {ResultContext} from "./Result/result_context";
+import {faPencil, faTrashCan} from "@fortawesome/free-solid-svg-icons";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 
 class TagTable extends React.Component {
   constructor(props) {
@@ -90,12 +92,22 @@ class TagTable extends React.Component {
       Cell: ({value}) => {
         return (
           <span>
-            <a href="#" onClick={() => this.edit(value)}>
-              {I18n.t("edit")}
+            <a
+              href="#"
+              onClick={() => this.edit(value)}
+              aria-label={I18n.t("edit")}
+              title={I18n.t("edit")}
+            >
+              <FontAwesomeIcon icon={faPencil} />
             </a>
             &nbsp;|&nbsp;
-            <a href="#" onClick={() => this.delete(value)}>
-              {I18n.t("delete")}
+            <a
+              href="#"
+              onClick={() => this.delete(value)}
+              aria-label={I18n.t("delete")}
+              title={I18n.t("delete")}
+            >
+              <FontAwesomeIcon icon={faTrashCan} />
             </a>
           </span>
         );

diff --git a/app/javascript/common/fontawesome_config.js b/app/javascript/common/fontawesome_config.js
@@ -43,6 +43,7 @@ import {
   faSquareCheck,
   faTable,
   faTrash,
+  faTrashCan,
   faUpload,
   faUserGroup,
   faUserMinus,
@@ -102,6 +103,7 @@ library.add(
   faSquareCheck,
   faTable,
   faTrash,
+  faTrashCan,
   faUpload,
   faUserGroup,
   faUserMinus,

diff --git a/app/views/sections/index.html.erb b/app/views/sections/index.html.erb
@@ -31,13 +31,13 @@
             <span class='info'>(<%= section.students.count %>)</span>
           </td>
           <td>
-            <%= button_to t('delete'),
-                          { action: 'destroy',
-                            id: section.id },
-                          data: { confirm: t('.destroy_confirm') },
-                          method: 'delete',
-                          disabled: !section.students.empty?,
-                          class: 'inline-button' %>
+            <%= button_to({ action: 'destroy', id: section.id },
+                          { data: { confirm: t('.destroy_confirm') },
+                            method: 'delete',
+                            disabled: !section.students.empty?,
+                            class: 'inline-button' }) do %>
+              <i class="fa fa-trash-can" title=I18n.t("delete") aria-hidden="true"></i>
+            <% end %>
           </td>
         </tr>
       <% end %>