fix(table): apply font color to anchors in headings (#1869)

* fix(table): apply font color to anchors in headings [STACKS-658](https://stackoverflow.atlassian.net/browse/STACKS-658) * Add buttons, anchors to table headers in docs * Change rendered example header links
StackExchange · Dec 12, 2024 · 456693d · 456693d
1 parent 011f8f5
commit 456693d
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 16 deletions.
diff --git a/docs/product/components/tables.html b/docs/product/components/tables.html
@@ -642,11 +642,25 @@
     <table class="s-table s-table__sortable">
         <thead>
             <tr>
-                <th scope="col" class="is-sorted">Listing @Svg.ArrowDownSm</th>
-                <th scope="col">Status @Svg.ArrowUpDownSm</th>
-                <th scope="col">Owner @Svg.ArrowUpDownSm</th>
-                <th scope="col" class="ta-right">Views @Svg.ArrowUpDownSm</th>
-                <th scope="col" class="ta-right">Applies @Svg.ArrowUpDownSm</th>
+                <th scope="col" class="is-sorted">
+                    <button type="button">Listing @Svg.ArrowDownSm</button>
+                </th>
+                <th scope="col">
+                    <button type="button">Status @Svg.ArrowUpDownSm</button>
+
+                </th>
+                <th scope="col">
+                    <button type="button">Owner @Svg.ArrowUpDownSm</button>
+
+                </th>
+                <th scope="col" class="ta-right">
+                    <button type="button">Views @Svg.ArrowUpDownSm</button>
+
+                </th>
+                <th scope="col" class="ta-right">
+                    <button type="button">Applies @Svg.ArrowUpDownSm</button>
+
+                </th>
             </tr>
         </thead>
         <tbody>
@@ -661,24 +675,19 @@
                     <thead>
                         <tr>
                             <th scope="col" class="is-sorted">
-                                Listing
-                                {% icon "ArrowDownSm" %}
+                                <a href="#sortable-tables">Listing {% icon "ArrowDownSm" %}</a>
                             </th>
                             <th scope="col">
-                                Status
-                                {% icon "ArrowUpDownSm" %}
+                                <a href="#sortable-tables">Status {% icon "ArrowUpDownSm" %}</a>
                             </th>
                             <th scope="col">
-                                Owner
-                                {% icon "ArrowUpDownSm" %}
+                                <button type="button">Owner {% icon "ArrowUpDownSm" %}</button>
                             </th>
                             <th scope="col" class="ta-right">
-                                Views
-                                {% icon "ArrowUpDownSm" %}
+                                <button type="button">Views {% icon "ArrowUpDownSm" %}</button>
                             </th>
                             <th scope="col" class="ta-right">
-                                Applies
-                                {% icon "ArrowUpDownSm" %}
+                                <button type="button">Applies {% icon "ArrowUpDownSm" %}</button>
                             </th>
                         </tr>
                     </thead>

diff --git a/lib/components/table/table.less b/lib/components/table/table.less
@@ -124,7 +124,9 @@
         thead th {
             a,
             button { //  If an anchor is used, it should appear like a normal header
-                color: inherit;
+                // `!important` is used to ensure the appropriate color is on visited links. See STACKS-658.
+                // https://stackoverflow.atlassian.net/browse/STACKS-658
+                color: inherit !important;
             }
 
             button {