Edit/delete buttons under iframe sources are not accessible

I checked if this bug is still an issue in the latest Mahara master.

1. When using JAWS, pressing Enter on the edit button jumps to the top of the page instead of opening the edit form

 - When using JAWS, pressing Enter on Edit opens the Edit form, but the focus stays on the Edit button. Recommendation is to move the focus to the first field on the Edit form.

2. The edit button is actually a link - since it modifies the current page it would make more sense as a button

 - This is still an issue.

3. The edit button is descriptive (it contains the name of the row it's deleting) but the delete button isn't

 - This is still an issue.

Please let me know if you have questions.

The "Delete" button should also have a tool tip like the "Edit" button.

Furthermore, the "Edit" button doesn't need the chevron to indicate that it can be uncollapsed. We don't use a chevron in User menu -> Create -> Files for the "Edit" button there.

For a similar button that already has the title element, see Admin menu -> Web services -> External apps -> Add a new app and on the overview screen hover over 'Edit' and 'Delete'. You see that it says 'Edit "title of the application"'.

Now the iframe sources sometimes have the same title so that there is only one icon shown in the 'External media' block configuration. Therefore, I propose to include the display name and the URL in the tool tip so that each row is unique.

The chevron on the 'Edit' button has already been removed. So don't worry about that.

Patch for "master" branch: https://reviews.mahara.org/11997

Patch for "master" branch: https://reviews.mahara.org/11998

Patch for "master" branch: https://reviews.mahara.org/11999

Patch for "main" branch: https://reviews.mahara.org/12131

The title tag is readable by numerous screen readers and its use is considered to be accessible. See https://www.w3.org/WAI/tutorials/forms/labels/#using-the-title-attribute (there for forms, but similarly this can be applied to buttons).

Screen readers Orca (Ubuntu), NVDA, ChromeVox at minimum can read the title tag. Therefore, we are using the title tag for the time being for buttons that appear in tables like this one to have a consistent implementation.

Reviewed: https://reviews.mahara.org/12131
Committed: https://git.mahara.org/mahara/mahara/commit/b40731f7b2deac376eb5c1504d9ef5ee946cf356
Submitter: Robert Lyon (<email address hidden>)
Branch: main

commit b40731f7b2deac376eb5c1504d9ef5ee946cf356
Author: Dianne Tennent <email address hidden>
Date: Tue Sep 14 10:42:34 2021 +1200

Bug #1489259: Make buttons under iframe sources accessible

Give edit/delete icon buttons a title attribute
for screenreaders and remove obsolete span tags

Add info to styleguide

Change-Id: Ice0eafa8aa39ab03be12c4a574df160c0b70fdd4

Patch for "21.10_DEV" branch: https://reviews.mahara.org/12172

Reviewed: https://reviews.mahara.org/12172
Committed: https://git.mahara.org/mahara/mahara/commit/db272d717c470cd0744970673d798482c92a73c2
Submitter: Robert Lyon (<email address hidden>)
Branch: 21.10_DEV

commit db272d717c470cd0744970673d798482c92a73c2
Author: Dianne Tennent <email address hidden>
Date: Tue Sep 14 10:42:34 2021 +1200

Bug #1489259: Make buttons under iframe sources accessible

Give edit/delete icon buttons a title attribute
for screenreaders and remove obsolete span tags

Add info to styleguide

Change-Id: Ice0eafa8aa39ab03be12c4a574df160c0b70fdd4
(cherry picked from commit b40731f7b2deac376eb5c1504d9ef5ee946cf356)