Skip to content

[pull] master from angular:master#887

Merged
pull[bot] merged 8 commits intoCammisuli:masterfrom
angular:master
Sep 21, 2021
Merged

[pull] master from angular:master#887
pull[bot] merged 8 commits intoCammisuli:masterfrom
angular:master

Conversation

@pull
Copy link
Copy Markdown

@pull pull bot commented Sep 21, 2021

See Commits and Changes for more details.


Created by pull[bot]

Can you help keep this open source service alive? 💖 Please sponsor : )

gkalpak and others added 8 commits September 21, 2021 16:12
Improve the accessibility of button groups (such as those seen in
`/about` and `/resources` to choose between the different categories)
by making them easier to navigate via keyboard:

- Make the individual buttons focusable via keyboard.
  (Previously, they were not focusable - despite being anchor elements,
  because they were lacking an `href` attribute.)

- Give focused buttons a different style.

PR Close #43460
Improve the accessibility of contributor cards (in `/about`) by making
them easier to navigate via keyboard:

- Show the (otherwise hidden) contributor info links on focus.
- Make the "View bio" link focusable via keyboard (to give a clearer
  indication that users can click to view the bio - although technically
  the click is handled by an ancestor).
- Make the flipped cards focusable via keyboard (so it is possible to
  click them to unflip).

PR Close #43460
…#43460)

When using `ScrollService#scrollToElement()` to scroll to a specific
element, also focus the element if it is focusable (i.e. if it has a
`focus()` method).

This will be useful for implementing a "skip to content" link as
described in #42936.

PR Close #43460
Previously, anchor links that were supposed to point to fragments inside
the current page (e.g. `href="#something"`) would end up navigating to
the homepage (`/`). This was due to them being resolved relative to the
base URL, which is set to `/` (via `<base href="/">`). See also
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base#in-page_anchors.

This commit fixes this issue by handling such links specially in
`LocationService#handleAnchorClick()` and prepending the current path to
the URL.

This will also be useful for implementing a "skip to content" link as
described in #42936.

PR Close #43460
#43460)

Add a link at the top of the page that allows skipping directly to the
main content area. This allows people using assistive technologies to
skip navigation-related parts of the page which are presented before the
main content.

Related resources:
- [www.w3.org](https://www.w3.org/TR/WCAG20-TECHS/G1.html)
- [accessibility.oit.ncsu.edu](https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-state/developers/accessibility-handbook/mouse-and-keyboard-events/skip-to-main-content)
- [css-tricks.com](https://css-tricks.com/how-to-create-a-skip-to-content-link)

---
Example implementations on other websites:

- **[accessibility.oit.ncsu.edu](https://accessibility.oit.ncsu.edu/)**:
  ![accessibility.oit.ncsu.edu](https://user-images.githubusercontent.com/8604205/133285834-db1314e6-ff71-4862-8f80-c8a9f69083d9.png)

- **[smile.amazon.com](https://smile.amazon.com/)**:
  ![smile.amazon.com](https://user-images.githubusercontent.com/8604205/133285854-1163e733-8de3-4244-bc23-5cd5a943001d.png)

- **[chase.com](https://chase.com/)**:
  ![chase.com](https://user-images.githubusercontent.com/8604205/133293396-ade9d95f-56ce-4cdc-8926-b4cd2dc6c3a5.png)

- **[css-tricks.com](https://css-tricks.com/)**:
  ![css-tricks.com](https://user-images.githubusercontent.com/8604205/133285845-702045ee-088a-40f1-bb26-21adebb02505.png)

- **[github.com/angular/angular](https://github.com/angular/angular)**:
  ![github.com/angular/angular](https://user-images.githubusercontent.com/8604205/133921259-9fd759b9-f862-47c3-b069-643912df17a1.png)

- **[news.sky.com](https://news.sky.com/)**:
  ![news.sky.com](https://user-images.githubusercontent.com/8604205/133285863-89946096-5353-4b2b-ab69-eb748bdcfe06.png)

- **[youtube.com](https://youtube.com/)**:
  ![youtube.com](https://user-images.githubusercontent.com/8604205/133921261-a68a12c1-1aea-4ad0-8457-b4eaf8ed3497.png)

---
Angular.io implementation:

- **[angular.io](https://angular.io/)**:
  ![angular.io](https://user-images.githubusercontent.com/8604205/133409634-0054625c-d14b-4ebe-bb4c-142cfc524d98.png)

Fixes #42936

PR Close #43460
… files (#43519)

The migration was previously touching files that did not have any
expressions to migrate. This change ensures that the migration doesn't
commit any updates on files that do not need them.
This change, however, does not address the underlying issue with the
migration and CRLF (which is fixed in a follow-up change).

Related to #43416

PR Close #43519
…e characters (#43519)

The previous replacement logic would not account for the CRLF line
endings when applying replacements because it would replace the whole
template with `template.content.length` which would not account for
CRLF. This update applies individual expression edits at each location
in the template rather than attempting to replace the whole template
contents with a new string that contains the migrations.

fixes #43416

PR Close #43519
@pull pull bot added the ⤵️ pull label Sep 21, 2021
@pull pull bot merged commit 77bd253 into Cammisuli:master Sep 21, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants