brand/main
10
Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
 Henry Catalini Smithand0ko
|
cb1cb2c0af |
Improve repo file list table semantics for screen readers (second attempt) (#12232)
Unintentionally fixes forgejo/forgejo#11812 per tip https://codeberg.org/forgejo/forgejo/pulls/12232#issuecomment-13580345 --- This is a second attempt to fix https://codeberg.org/forgejo/forgejo/issues/11116. The [first attempt](https://codeberg.org/forgejo/forgejo/pulls/11846) introduced a [regression](https://codeberg.org/forgejo/forgejo/issues/12082) and needed to be [reverted](https://codeberg.org/forgejo/forgejo/pulls/12088). What's different about this attempt is that several days of extra work have been invested in amending the CSS to ensure that no visual changes slip through as a side-effect of the structural changes to the HTML. This was surprisingly challenging, and I documented much of the journey in https://codeberg.org/henrycatalinismith/forgejo/issues/1. In summary, the existing version of the "latest commit" row leans heavily on global styles that are universally applied to all `thead` elements inside `table` elements with the `ui` and `table` classes. The nature of the structural HTML changes necessary to fix the accessibility bug (this row can't be inside `thead`) is such that those universal styles no longer apply to this element and must be duplicated into new element-specific styles. Similarly, existing styles applying to non-`thead` table content has unwanted effects on this element once it moves into the `tbody` which needed to be counteracted. The original PR already lays out the accessibility impact of this pull request in a good amount of details and so instead I'm going to use the space here to focus on comparing the visuals in the `forgejo` branch with those in this PR. There follow a few pretty boring identical before & after screenshots that are pixel-for-pixel identical with each other. I don't think you'll be able to spot any bugs by glancing at these and am more sharing them to provide an insight into where my attention has been during testing: the 380px wide mobile viewport, a larger desktop viewport, and the "commit message too long to fit in the available space" case. If you know of other troublesome cases for this code that aren't covered by what you see in these images then that could be a good thing to explore here. Before | After -|-  |   |  Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/12232 Reviewed-by: 0ko <0ko@noreply.codeberg.org> |
||
|
Henry Catalini SmithandMathieu Fenniak
|
86898a7d05 |
Revert "Improve repo file list table semantics for screen readers (#11846)" (#12088)
Fixes https://codeberg.org/forgejo/forgejo/issues/12082 by reverting commit
|
||
|
Henry Catalini SmithandMathieu Fenniak
|
8a6d76cff4 |
Preserve focus on star/unstar & watch/unwatch buttons after click (#11932)
Fixes https://codeberg.org/forgejo/forgejo/issues/11880. Adding `hx-on::after-settle="this.querySelector('button').focus()"` restores focus after the content has been swapped and the DOM has been setled. I tried `hx-on::after-swap` first since it's mentioned more often in https://github.com/bigskysoftware/htmx/issues/1869, but it didn't work. The demo attached in `focus.mp4` runs through a series of repeated clicks on both buttons. You can hear the screen reader announce the button's new label when focus is restored. ### Documentation - [ ] I created a pull request [to the documentation](https://codeberg.org/forgejo/docs) to explain to Forgejo users how to use this change. - [ ] I did not document these changes and I do not expect someone else to do it. ### Release notes - [x] This change will be noticed by a Forgejo user or admin (feature, bug fix, performance, etc.). I suggest to include a release note for this change. - [ ] This change is not visible to a Forgejo user or admin (refactor, dependency upgrade, etc.). I think there is no need to add a release note for this change. *The decision if the pull request will be shown in the release notes is up to the mergers / release team.* The content of the `release-notes/<pull request number>.md` file will serve as the basis for the release notes. If the file does not exist, the title of the pull request will be used instead. Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/11932 Reviewed-by: Andreas Ahlenstorf <aahlenst@noreply.codeberg.org> Co-authored-by: Henry Catalini Smith <henry@catalinismith.se> Co-committed-by: Henry Catalini Smith <henry@catalinismith.se> |
||
|
Henry Catalini SmithandMathieu Fenniak
|
dd968f147d |
Improve repo file list table semantics for screen readers (#11846)
https://codeberg.org/forgejo/forgejo/issues/11116 To understand the impact of this you really need to listen to the before and after screen recordings attached. https://codeberg.org/forgejo/forgejo/issues/11116 is a really great bug report, and I was surprised by how disorienting this actually was when testing manually compared to my expectation after reading the issue. This is an impactful improvement! This is my first time adding new translation strings. Excited to learn more about that if I've guessed wrong about how to do it. To summarise, what we're doing here is as follows. 1. Address the core issue by changing the existing `<th>` elements to `<td>` so that screen readers stop semantically associating them with each row and reading them out for every table cell. 2. Replace them with real `<th>` elements that communicate the true semantic role of each column. 3. Add a `<caption>`. This serves a dual purpose: it gives the table an accessible name which improves the navigability of the page, and it gives us a place to explain to the user that the first row of the table is a little bit different because it's the latest commit rather than a file in the repo. 4. Visually hide the new caption and headings so that only screen reader users get them. ## Checklist The [contributor guide](https://forgejo.org/docs/next/contributor/) contains information that will be helpful to first time contributors. All work and communication must conform to Forgejo's [AI Agreement](https://codeberg.org/forgejo/governance/src/branch/main/AIAgreement.md). There also are a few [conditions for merging Pull Requests in Forgejo repositories](https://codeberg.org/forgejo/governance/src/branch/main/PullRequestsAgreement.md). You are also welcome to join the [Forgejo development chatroom](https://matrix.to/#/#forgejo-development:matrix.org). ### Tests for JavaScript changes - I added test coverage for JavaScript changes... - [ ] in `web_src/js/*.test.js` if it can be unit tested. - [ ] in `tests/e2e/*.test.e2e.js` if it requires interactions with a live Forgejo server (see also the [developer guide for JavaScript testing](https://codeberg.org/forgejo/forgejo/src/branch/forgejo/tests/e2e/README.md#end-to-end-tests)). ### Documentation - [ ] I created a pull request [to the documentation](https://codeberg.org/forgejo/docs) to explain to Forgejo users how to use this change. - [ ] I did not document these changes and I do not expect someone else to do it. ### Release notes - [x] This change will be noticed by a Forgejo user or admin (feature, bug fix, performance, etc.). I suggest to include a release note for this change. - [ ] This change is not visible to a Forgejo user or admin (refactor, dependency upgrade, etc.). I think there is no need to add a release note for this change. *The decision if the pull request will be shown in the release notes is up to the mergers / release team.* The content of the `release-notes/<pull request number>.md` file will serve as the basis for the release notes. If the file does not exist, the title of the pull request will be used instead. Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/11846 Reviewed-by: Gusted <gusted@noreply.codeberg.org> Reviewed-by: Andreas Ahlenstorf <aahlenst@noreply.codeberg.org> Co-authored-by: Henry Catalini Smith <henry@catalinismith.se> Co-committed-by: Henry Catalini Smith <henry@catalinismith.se> |
||
|
Henry Catalini SmithandMathieu Fenniak
|
1d0503d6b5 |
Add aria-label="Copy" to copy button (#11895)
This copy button on the pull request page lacks an accessible name. You can hear the screen reader announce it as just "button" in the screen recording `button.mp4`, and then hear the amended version in `copy.mp4` where it's announced as "copy, button". The most relevant WCAG success criteria here is [1.1.1 Non-text content](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html). ### Documentation - [ ] I created a pull request [to the documentation](https://codeberg.org/forgejo/docs) to explain to Forgejo users how to use this change. - [ ] I did not document these changes and I do not expect someone else to do it. ### Release notes - [x] This change will be noticed by a Forgejo user or admin (feature, bug fix, performance, etc.). I suggest to include a release note for this change. - [ ] This change is not visible to a Forgejo user or admin (refactor, dependency upgrade, etc.). I think there is no need to add a release note for this change. *The decision if the pull request will be shown in the release notes is up to the mergers / release team.* The content of the `release-notes/<pull request number>.md` file will serve as the basis for the release notes. If the file does not exist, the title of the pull request will be used instead. Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/11895 Reviewed-by: Andreas Ahlenstorf <aahlenst@noreply.codeberg.org> Co-authored-by: Henry Catalini Smith <henry@catalinismith.se> Co-committed-by: Henry Catalini Smith <henry@catalinismith.se> |
||
|
Henry Catalini SmithandOtto
|
bfebd42a3d |
Fix @mention combobox semantics for screen reader accessibility (#11860)
Fixes https://codeberg.org/forgejo/forgejo/issues/7668. This was simpler to fix than my theory I posted on https://codeberg.org/forgejo/forgejo/issues/7668 about needing to patch the upstream package. When testing in Firefox with the developer console open and warnings enabled, I noticed a `Empty string passed to getElementById()` warning coming from `@github/combobox-nav` while attempting to manage the `aria-activedescendant` attribute. Then I found this in the [README for that project](https://github.com/github/combobox-nav). > Markup requirements: > - Each option needs to have role="option" and a unique id This was easy to miss, as we're using `@github/text-expander-element` and the combobox-nav package is one of _its_ dependencies. Without a unique ID on each dropdown menu item, `@github/text-expander-element` is unable to set an appropriate `aria-activedescendant` attribute on the textarea. Once that's in place, the screen reader announcements come to life beautifully. While working on it I noticed the emoji picker combobox was affected by the same problem and patched that as well. Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/11860 Reviewed-by: Otto <otto@codeberg.org> Co-authored-by: Henry Catalini Smith <henry@catalinismith.se> Co-committed-by: Henry Catalini Smith <henry@catalinismith.se> |
||
|
Henry Catalini SmithandMathieu Fenniak
|
ba6794348e |
Make label dropdown menu items with .tw-hidden unselectable (#11858)
Fixes https://codeberg.org/forgejo/forgejo/issues/9894. The dropdown menu items are being hidden with `.tw-hidden`. The Fomentic dropdown makes items with `.disabled` and `.filtered` unselectable by default but can be [easily configured](https://fomantic-ui.com/modules/dropdown.html#/settings) to broaden this selector. In the before & after GIFs attached, there is an archived label between "duplicate" and "help wanted". In the before GIF, focus disappears momentarily between the two, which is when the hidden, archived label has been programmatically focused by Fomentic. In the after GIF, focus hops instantaneously between the two selectable labels because of the broader `unselectable` selector. ### Tests for JavaScript changes (can be removed for Go changes) - I added test coverage for JavaScript changes... - [ ] in `web_src/js/*.test.js` if it can be unit tested. - [ ] in `tests/e2e/*.test.e2e.js` if it requires interactions with a live Forgejo server (see also the [developer guide for JavaScript testing](https://codeberg.org/forgejo/forgejo/src/branch/forgejo/tests/e2e/README.md#end-to-end-tests)). ### Documentation - [ ] I created a pull request [to the documentation](https - [ ] - [ ] ://codeberg.org/forgejo/docs) to explain to Forgejo users how to use this change. - [ ] I did not document these changes and I do not expect someone else to do it. ### Release notes - [x] This change will be noticed by a Forgejo user or admin (feature, bug fix, performance, etc.). I suggest to include a release note for this change. - [ ] This change is not visible to a Forgejo user or admin (refactor, dependency upgrade, etc.). I think there is no need to add a release note for this change. *The decision if the pull request will be shown in the release notes is up to the mergers / release team.* The content of the `release-notes/<pull request number>.md` file will serve as the basis for the release notes. If the file does not exist, the title of the pull request will be used instead. Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/11858 Reviewed-by: Andreas Ahlenstorf <aahlenst@noreply.codeberg.org> Co-authored-by: Henry Catalini Smith <henry@catalinismith.se> Co-committed-by: Henry Catalini Smith <henry@catalinismith.se> |
||
|
Henry Catalini SmithandMathieu Fenniak
|
6726b6e3e9 |
Add aria-labels to ensure watch and star buttons always have a text label (#11878)
Fixes https://codeberg.org/forgejo/forgejo/issues/6621. The attached screen recording `before.mp4` demos the problem as described by https://codeberg.org/forgejo/forgejo/issues/6621. And `after.mp4` is the fixed version. ### Documentation - [ ] I created a pull request [to the documentation](https://codeberg.org/forgejo/docs) to explain to Forgejo users how to use this change. - [ ] I did not document these changes and I do not expect someone else to do it. ### Release notes - [x] This change will be noticed by a Forgejo user or admin (feature, bug fix, performance, etc.). I suggest to include a release note for this change. - [ ] This change is not visible to a Forgejo user or admin (refactor, dependency upgrade, etc.). I think there is no need to add a release note for this change. *The decision if the pull request will be shown in the release notes is up to the mergers / release team.* The content of the `release-notes/<pull request number>.md` file will serve as the basis for the release notes. If the file does not exist, the title of the pull request will be used instead. Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/11878 Reviewed-by: Andreas Ahlenstorf <aahlenst@noreply.codeberg.org> Co-authored-by: Henry Catalini Smith <henry@catalinismith.se> Co-committed-by: Henry Catalini Smith <henry@catalinismith.se> |
||
|
Henry Catalini SmithandMathieu Fenniak
|
676940a853 |
Add aria-current="page" to active navbar items (#11887)
By setting `aria-current="page"` on the active navbar item we make the information about which one corresponds to the current page available in a non-visual way. Both the attached screen recordings were produced on http://localhost:3000/pulls, so the "Pull requests" link is the active one. In `before.mp4` all the links are announced identically, and in `after.mp4` the "Pull requests" link is announced like this. > current page, visited, link, Pull requests ### Documentation - [ ] I created a pull request [to the documentation](https://codeberg.org/forgejo/docs) to explain to Forgejo users how to use this change. - [ ] I did not document these changes and I do not expect someone else to do it. ### Release notes - [x] This change will be noticed by a Forgejo user or admin (feature, bug fix, performance, etc.). I suggest to include a release note for this change. - [ ] This change is not visible to a Forgejo user or admin (refactor, dependency upgrade, etc.). I think there is no need to add a release note for this change. *The decision if the pull request will be shown in the release notes is up to the mergers / release team.* The content of the `release-notes/<pull request number>.md` file will serve as the basis for the release notes. If the file does not exist, the title of the pull request will be used instead. Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/11887 Reviewed-by: Andreas Ahlenstorf <aahlenst@noreply.codeberg.org> Co-authored-by: Henry Catalini Smith <henry@catalinismith.se> Co-committed-by: Henry Catalini Smith <henry@catalinismith.se> |
||
|
Henry Catalini Smithand0ko
|
181ba05eed |
fix(ui): allow label descriptions to wrap in dropdown (#11607)
https://codeberg.org/forgejo/forgejo/issues/11512 Restoring default whitespace behaviour seems sufficient to resolve this. The `display: block` property is necessary because `<small>` is an inline element and otherwise the `padding-left` only applies to the first line. There's a description in one of the default label packages affected by the issue so I've used that for the before/after screenshots below. | Before | After | |-|-| |  |  | The issue doesn't just affect long descriptions though. In fact even the nice, short defaults are affected. Vision impairment is one of the most common disabilities, and increasing the text size is a typical way in which people adapt their computing environment to accommodate their disability. Even the short default label descriptions are cut off in this use case. | Before | After | |-|-| |  |  | Co-authored-by: 0ko <0ko@noreply.codeberg.org> Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/11607 Reviewed-by: 0ko <0ko@noreply.codeberg.org> Reviewed-by: Beowulf <beowulf@beocode.eu> Co-authored-by: Henry Catalini Smith <henry@catalinismith.se> Co-committed-by: Henry Catalini Smith <henry@catalinismith.se> |