9 replies

1. Khalid ⚡ Mastodon 8 min later

   @zachleat congratulations on your new job at UPS... Oh wait.

   1. Zach Leatherman Mastodon 11 min later

      @khalidabuhakmeh I take the specifications from the customers… wait

2. Zach Leatherman Mastodon 13 min later

   (it’s almost as if I am building something…)

   1. iamdtms Mastodon 26 min later

      @zachleat <toc> reminds me to the army days :)
      https://codepen.io/iamdtms/pen/dydmjme

      1. Zach Leatherman Mastodon 29 min later

         @iamdtms well that’s lovely!

      2. Curtis Wilcox Mastodon 23 hr later

         @iamdtms
         Nice! In 2022, putting the dots on their own aria-hidden element was a good improvement. These days, it's no longer necessary (depending on your level of support for older browsers), `content` can have alternative text, including `""` for decorative content.

         https://codepen.io/ccwilcox/pen/MYpJrYg?editors=1100
         @zachleat

         1. iamdtms Mastodon 23 hr later

            @cwilcox808 @zachleat Content works. This concept is not about accessibility. Thank you.

            1. Curtis Wilcox Mastodon 1 day later

               @iamdtms
               I was just pointing out an option available now that avoids adding unnecessary HTML elements and uses less code overall.

               Yours is forked from a version that had the pseudo-elements attached to `<span class="title">`. Yours had them attached to an added element, `<span class="leaders" aria-hidden="true"></span>`. The only reason to make that change is to prevent the dots from being read by screen readers.
               My fork goes back to attaching them to `.title` and using `/ ""` within the `content` to prevent the dots from being read by screen readers.
               @zachleat

               1. iamdtms Mastodon 1 day later

                  @cwilcox808 @zachleat MVC is often interoperable.

                  ```
                  Page&amp;nbsp;
                  ```

                  Could have been a

                  ```
                  padding-inline-end: 1ch;
                  ```

                  For the record, and #css content "..." is fitting markup-saving each and every line. It's special.